Required field not working properly on embedded form on WordPress website

  • lawlibne
    Asked on June 18, 2015 at 6:22 PM

    I have a number of required fields in my form, but at least one is not working.  Here's the URL for the form:

    http://form.jotform.us/form/51546454423151?

    The lunch option field did not prompt the user when it was missing, so we have a submission without this field. The form is embedded on a hosted Wordpress site (ie not Wordpress.com) and I used the embed code provided for Wordpress sites.

    thanks in advance for your help.

  • raul
    Replied on June 18, 2015 at 7:21 PM

    I've checked your site and the required fields worked correctly on my side.

    Required field not working properly on embedded form on WordPress website Image 1 Screenshot 20

    And I was also unable to find the submission without the required field, can you let us know which one is it?

    Also, can you ask your user which browser he/she used to complete the form? We can then try using the same browser to see if we're able to replicate the problem.

    We'll wait for your response.

  • lawlibne
    Replied on June 18, 2015 at 10:39 PM

    The user says she was on a Mac using Firefox.  The response Submission Date = 2015-06-16 16:56:17

    She also said: "It not only didn't register my lunch selection but did not give me a chance to put in my credit card #."

  • Chriistian Jotform Support
    Replied on June 19, 2015 at 12:09 AM

    Hi lawlibne, 

    Thanks for contacting us.

     

    I did a test submission in your form and was able to replicate the issue in Firefox browser. Can you try re-embedding your form and use the iFrame code below?

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51546454423151" frameborder="0" style="width:100%; height:1507px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

     

    Do get back to us if the issue still persists.

     

    Regards.

  • Chriistian Jotform Support
    Replied on June 19, 2015 at 12:24 AM

    By the way, I also noticed that you haven't used any Payment Tool in your form. So upon submit of the form, it will always redirect to the Thank You Page even user has selected the Credit Card option. You can try to use the Paypal Widget to setup your payment. You can check this article for more details: Paypal Forms.

     

    Regards.

  • lawlibne
    Replied on June 19, 2015 at 12:32 PM

    Hi Christian,

    I'm confused by the last message.  We do have a payment tool, but it is conditional based on whether the person chooses credit card as the method of payment.  Other users have been able to submit the form and pay by credit card.

    Am I missing something?

  • Ben
    Replied on June 19, 2015 at 1:11 PM

    No, you are not missing anything, my colleague had probably missed the PayPal option, I see that it was the first thing that you had added to your jotform.

    I would however still suggest to use the code that my colleague Christian had mentioned above - the iframe one.

    I have just copy pasted it again for you here:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51546454423151" frameborder="0" style="width:100%; height:1507px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Do let us know how it goes.