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

    Conflict between two forms embedded on the same page

    Asked by pickupchange on March 30, 2016 at 02:11 PM

    Hello, I have 2 different forms embedded in my website and when I click on the "submit" button without filling the name and email, I'm redirected to the second form below.

    You can see the problem here http://www.pickupchange.com/5-effective-ways-girl-club/

    If you click on "Send me the videos" in the form on the header, you redirected to the one at the bottom of the page.

    What can I do?

    Thanks
    Alessandro

    Page URL:
    http://www.pickupchange.com/5-effective-ways-girl-club/

    form embedded two forms multiple forms
  • Profile Image
    JotForm Support

    Answered by Mike on March 30, 2016 at 03:51 PM

    Thank you for contacting us.

    Is there any way that you can use an iFrame embed code for one of your forms on the web page? In theory, it should fix the issue.

  • Profile Image

    Answered by pickupchange on March 30, 2016 at 03:54 PM

    The problem is that I would lose all the CSS or at least it will become a lot more difficult to fix the form as it is right now.

  • Profile Image
    JotForm Support

    Answered by Mike on March 30, 2016 at 05:11 PM

    You can also try to with: JotForm.onSubmissionError = "doNothing"; instead of "jumpToSubmit" in source code to see if that helps.

    It should simulate the 'On Submission Error - Do Nothing' option from Preferences.

  • Profile Image

    Answered by pickupchange on March 30, 2016 at 05:15 PM

    Thanks Mike, this worked!

  • Profile Image

    Answered by pickupchange on March 31, 2016 at 06:28 AM

    Hello Mike, actually there's something wrong. Unfortunately the javascript conflicts with another script I have in the website.

    If I add the form as an iframe the problem disappears, but then the iframe doesn't read my css. Is there a way to make my css work for the attributes inside the iframe?

    Thanks

  • Profile Image
    JotForm Support

    Answered by mert on March 31, 2016 at 10:47 AM

    Hi there,

    Since you are using iFrame embed code, you need to give the CSS rules through our "Form Builder" before getting the embed code. To inject CSS rules to your form, please follow the instructions from the guide below:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    After getting this, please do let us know.

    Regards.

  • Profile Image

    Answered by pickupchange on March 31, 2016 at 05:25 PM

    Thanks, that's really clear. 

    Do you think is possible to take out the css that are automatically assigned to the form? My problem is that I have to overwrite all the rules that changes the design of my form.

  • Profile Image
    JotForm Support

    Answered by Mike on March 31, 2016 at 07:07 PM

    Unfortunately, we cannot disable/remove default styles.

    You may also consider embedding forms on some "blank" web pages of your website, and them embed them with iFrames to the actual page. For example, embed form source on domain.com/form1.html and use the domain.com/form1.html as the iFrame URL.

  • Profile Image

    Answered by pickupchange on April 01, 2016 at 05:58 AM

    It's a good solution. I've done it but something strange happens. When I fill the form and I click on the submit button, I'm not redirected to the thank you page but I stay on the same page and the iframe is replaced with an empty table.

    And my subscription isn't sent to mailchimp.

  • Profile Image
    JotForm Support

    Answered by mert on April 01, 2016 at 08:05 AM

    In order to give you a healthier support, could you please share the URL of your web page? With that one, we can investigate the page's source code. Because, I can't see any iframe embedded form on the page (http://www.pickupchange.com/5-effective-ways-girl-club/) you have shared earlier.

    However, you can use the following guide to avoid conflicts on your page:

    http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

     

    As I said earlier, please share your web page's URL on your next post, we can define the problem better with that way.

     

    Regards.

  • Profile Image

    Answered by pickupchange on April 01, 2016 at 08:12 AM

    You can take a look at the form on the header of my homepage: http://www.pickupchange.com

    If you fill the form and click on the submit button, the form disappears.

  • Profile Image
    JotForm Support

    Answered by mert on April 01, 2016 at 09:26 AM

    According to my checks, it returns error on the background, if you check the actual page "http://www.pickupchange.com/wp-content/themes/thepickupchange/3_video_form_header.html". When you try to submit on that page, it showing the following error screen:

     

    If we come to the source of the problem, your email field on the HTML page has an id called "input_3"; but on the form's javascript code, it checks the "input_1" for requirement, that's why it jump to the error state.

    Please, see it from the below:

     

    So, you need to change code like the following:

     

    <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

    <script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.12356" type="text/javascript"></script>

    <script type="text/javascript">

        JotForm.init(function () {

            setTimeout(function () {

                $('input_3').hint('You can leave it blank');

            }, 20);

            JotForm.clearFieldOnHide = "disable";

            JotForm.onSubmissionError = "jumpToSubmit";

        });

    </script>

     

    I hope this one will solve the problem, please do let us know the results.

    Regards.

  • Profile Image

    Answered by pickupchange on April 01, 2016 at 09:38 AM

    I changed it but the problem is always there.

  • Profile Image

    Answered by pickupchange on April 01, 2016 at 10:13 AM

    Sorry mert, I just solved it. There was something wrong in the code.
    Is there a way to open the thank you page in a new page?

    Thanks for the help

  • Profile Image
    JotForm Support

    Answered by mert on April 01, 2016 at 10:27 AM

    You are most welcome, glad to see it is working. For the last question, it is really easy to do by adding the "target" attribute with the value "_blank" to the related part of your "3_video_form_header" HTML file. The associated part is on the 18th line on the file:

    Please, see the code with necessary changes with "target"="_blank":

     <form class="jotform-form" target = "_blank" action="https://submit.jotformeu.com/submit/60477083021348/" method="post" name="form_60477083021348" id="60477083021348" accept-charset="utf-8">

     

    I hope this one will work. Please, do let us know the results.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by mert on April 01, 2016 at 10:35 AM

    Sorry, for the repeating; but our comment tool is erasing the "target" HTML attribute when I try to use it with the value "_blank", so I need to find a way to avoid it.

  • Profile Image

    Answered by pickupchange on April 01, 2016 at 10:36 AM

    Thank you mert, it works perfectly.

    There is just another little thing, and it's that when I click on submit without filling the form, my form jump up and gets close to the title.

    I think the problem is in this line of the javascript

    case "setHeight":
    iframe.style.height = args[1] + "px";
    break;

    case "collapseErrorPage":
    if (iframe.clientHeight > window.innerHeight) {
    iframe.style.height = window.innerHeight + "px";
    }
    break;

    This didn't happen copying the source code, the form didn't move up.

    Do you know how to fix it?

    Thanks

  • Profile Image
    JotForm Support

    Answered by Kiran on April 01, 2016 at 12:51 PM

    I've moved your other question to a separate thread and shall be addressed there shortly.

    https://www.jotform.com/answers/808338

    Thank you!