What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Validation not working

    Asked by healthitjobs on February 22, 2016 at 07:22 AM

    We have a form integrated on this page http://www.encountersofhope.com/blog/activate-gift-card/ where the validation is not working correctly. If you try to submit the form and there are validation errors, the button changes state to "Please Wait" and then freezes the form/page. It does recognize the validation errors correctly, but you cannot fix them and re-submit. Please let us know how to resolve this.

    Thanks!

    Tim

    Page URL:
    http://www.encountersofhope.com/blog/activate-gift-card/

    Screenshot
    please wait Activate Freezes integrated
  • Profile Image
    JotForm Support

    Answered by Charlie on February 22, 2016 at 08:43 AM

    Upon checking your website link, it seems like you have embedded your form to your website using the full source code. I see your website is loading other JS scripts and libraries, it is most likely conflicting with the form's own resources. There are also errors in your website.

    I strongly suggest re-embedding the form using the iFrame code to avoid script conflicts, here's a guide on how to get that iframe code: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Make sure to remove all the script and code from the previous embed code you used. Let us know if that works.

  • Profile Image

    Answered by healthitjobs on February 22, 2016 at 08:58 AM

    Thanks Charlie. The reason I used the full source was to create a two column form and that seemed to be the recommended approach. Is there a different method to achieve that since the iframe embed doesn't seem to allow you to do that. 

  • Profile Image
    JotForm Support

    Answered by Charlie on February 22, 2016 at 09:45 AM

    You should be able to create a two column layout in our form using the form builder. Here's a sample form that I made based from your form: https://form.jotform.com/60523491247959. I tried to copy the design in your website. You can also clone my form to have a copy of it in your own account. Here's a link on how to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    Here's how you can implement the changes I made in your form:

    1. You can shrink and move fields in a new line. 

    Now, to make a two column effect, just shrink the field you want to move at the top of it. In this case, you want to place the "Last Name" field the same line with the "First name" field.

    You can learn more about positioning form fields on this guide: http://www.jotform.com/help/328-How-to-Position-Fields-in-JotForm 

    I have also copied the label for your text area field and place it in my cloned form. I set the "Label Align" to "Top".

     

     

    2. After that, enable the mobile responsiveness of your form, enable the "Make this form responsive" and "Enable form columns". You can find this in your Form Designer Tool

     

    3. Now use this custom CSS code to design your fields and properly align them.

    input, select {

        width : 90% !important;

        box-shadow : inset 0 1px 5px rgba(0, 0, 0, 0.1) !important;

        border : 1px solid #d2d2d2 !important;

        font-size : 13px !important;

        color : #747474 !important;

        padding : 8px 15px !important;

        margin-right : 1% !important;

        -moz-box-sizing : border-box !important;

        box-sizing : border-box !important;

    }

    #cid_6 {

        width : 100% !important;

    }

    textarea {

        width : 100% !important;

    }

    Paste it under the "CSS" tab in your Form Designer Tool.

     

    Make sure to save the changes. Let us know if that works. Even if you are using iFrame embed code, this style and layout should not be affected.