Conflict between two forms embedded on the same page

  • pickupchange
    Asked on March 30, 2016 at 2: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

  • Mike
    Replied on March 30, 2016 at 3: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.

  • pickupchange
    Replied on March 30, 2016 at 3: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.

  • Mike
    Replied on March 30, 2016 at 5:11 PM

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

    Conflict between two forms embedded on the same page Image 1 Screenshot 30

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

    Conflict between two forms embedded on the same page Image 2 Screenshot 41

  • pickupchange
    Replied on March 30, 2016 at 5:15 PM

    Thanks Mike, this worked!

  • pickupchange
    Replied on March 31, 2016 at 6: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

  • mert JotForm UI Developer
    Replied 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.

  • pickupchange
    Replied on March 31, 2016 at 5: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.

  • Mike
    Replied on March 31, 2016 at 7: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.

  • pickupchange
    Replied on April 1, 2016 at 5: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.

  • mert JotForm UI Developer
    Replied on April 1, 2016 at 8: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.

  • pickupchange
    Replied on April 1, 2016 at 8: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.

  • mert JotForm UI Developer
    Replied on April 1, 2016 at 9: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:

    Conflict between two forms embedded on the same page Image 1 Screenshot 30

     

    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:

    Conflict between two forms embedded on the same page Image 2 Screenshot 41

     

    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.

  • pickupchange
    Replied on April 1, 2016 at 9:38 AM

    I changed it but the problem is always there.

  • pickupchange
    Replied on April 1, 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

  • mert JotForm UI Developer
    Replied on April 1, 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:

    Conflict between two forms embedded on the same page Image 1 Screenshot 20

    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.

  • mert JotForm UI Developer
    Replied on April 1, 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.

  • pickupchange
    Replied on April 1, 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

  • Kiran Support Team Lead
    Replied on April 1, 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!