I need help with some corrections on my form

  • Profile Image
    MarinLatinFoods
    Asked on July 31, 2020 at 03:34 PM

    Hi.

    I have created a form "Design Contact Form" and it's live on my other website:

    https://designedbymarin.com/contact.html

    You will notice that there are some issues with it. I have created a screen shot explaining what I need help with. Have been trying to do it myself, but to no avail.

    Please don't forget that I would like for the form to be as close as aesthetically possible to the word "Thank you!" on top.

    Please review the screenshot I attached and advise.

    Thanks!

    ~ Paul

    Screenshot
  • Profile Image
    Welvin
    Answered on July 31, 2020 at 05:26 PM

    Hello Paul,

    I have fixed this for you by injecting the following custom CSS codes in the form.

    .jotform-form {

        padding-top: 0;

    }

    .form-all {

        margin: 0 auto !important;

        display: block;

    }

    .form-line-error {

        background: transparent;

    }

    .language-dd:active, .language-dd:hover {

        color: #fff;

        border: 1px solid #fff;

    }

    .language-dd#langDd {

        color: #fff !important;

    }


    You can check the codes in the designer. Guide here: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    As for the highlight, you can disable that in the form settings. I also did this.

  • Profile Image
    MarinLatinFoods
    Answered on July 31, 2020 at 05:35 PM

    It looks great. Thank you so much Welvin

  • Profile Image
    MarinLatinFoods
    Answered on August 01, 2020 at 12:47 PM

    I just check the form on my iPhone and notice that an adjustment is needed. See screenshot attached.

     

    1596300437Contact Designed By Marin.png

  • Profile Image
    JohnRex
    Answered on August 01, 2020 at 02:31 PM

    I can see you have embedded the form using its iframe code. I suggest removing the script part and set a fixed height property. Please embed the form using only this code below (I get rid of the script part):

    <iframe

          id="JotFormIFrame-202124611893046"

          title="Design Contact Form"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          allowfullscreen="true"

          allow="geolocation; microphone; camera"

          src="https://form.jotform.com/202124611893046"

          frameborder="0"

          style="

          min-width: 100%;

          height:800px;

          border:none;"

          scrolling="no"

        >

        </iframe>

    Here's how it will look like on mobile:

    15963065002484921.png

    Please try that and let us know how it goes.

  • Profile Image
    MarinLatinFoods
    Answered on August 01, 2020 at 03:57 PM

    Perfect. Thanks. But I increased it to height:900px;