Card Form: Back and submit buttons are disabled on embedded form.

  • Profile Image
    zeeks
    Asked on May 12, 2020 at 05:04 PM

    A lot of my customers are having trouble with submitting this form. They say they fill out the information and then it gets to the submit page and it won't let them submit (buttons don't work)


    This happens a lot in Chrome I think so we have to tell customers to use Firefox. Some don't even have that browser so thats less than ideal to do that every time. 

    https://form.jotform.com/92325037761254

    The problem is I can't always replicate it, but its happened to me before. 

  • Profile Image
    Vanessa_T
    Answered on May 12, 2020 at 08:53 PM

    I cloned your form then made a test submission but was not able to replicate the issue.

    1589330946A.gif

    Would you mind if we make a test submission directly on your form instead?

    Also, since you mentioned that the issue is intermittent, kindly share the console logs when the issue is displayed.

    How-to-get-a-console-report-from-most-common-browsers

    In addition, can you please answer the following:

    - Is it always happening with chrome only? not in firefox or safari?

    - Device used when the issue was replicated (mobile or desktop? please specify the details)

    - Could it be possible that there was a required field that was not filled which caused the users not to be able to submit?

    - Is the form embedded? please share the exact URL where the form is embedded.

  • Profile Image
    Mike 
    Answered on May 14, 2020 at 07:15 AM

    I am unable to replicate the issue right now but oddly several customers have reported it over the past year. The form is not embedded and i've reach out to the customer with those things you asked. There is no error message.

    And it wouldn't be a required field problem because they won't know they can't proceed to the next step (the form wouldn't allow)

  • Profile Image
    Vanessa_T
    Answered on May 14, 2020 at 08:30 AM

    Thank you for those information. You mentioned the issue is over the past year, can you please let us know when was the most recent incident?

    Kindly let us know your user's browser and device details so we may try to replicate it on our end.

    Please also send a screenshot of the console logs when the issue is present so we may include it in the ticket should we need to send this to our backend team.

    How-to-get-a-console-report-from-most-common-browsers

  • Profile Image
    zeeks
    Answered on May 15, 2020 at 04:59 PM

    Happened just the other day.

    My bad - the form is embedded here: https://www.nomorechores.com/automate-your-turnover/

    Ok I found where his problem is, it's here at the end of the form after the "review and send". button. Both "back to form" and "submit" are disabled - https://www.evernote.com/l/AAeh1czbfSZFSZRnR9iKhdWvLnuH99Hfgmo


    I was able replicate in Chrome. Customer says it also happens in Safari. 

    Looks like it does not happen when the form isn't embedded.

  • Profile Image
    Kevin_G
    Answered on May 15, 2020 at 08:23 PM

    Thanks for the details. 

    I have been testing the embedded version and I can see the issue, I have been checking this further and it seems like there is an element overlapping the buttons. 

    Kindly try embedding your form using the iFrame code, this guide will help you to get it: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    This embed methods prevents conflicts between the form and the code on your site. 

    Let us know if the problem persists. 

  • Profile Image
    Mike Ziarko 
    Answered on May 19, 2020 at 01:31 PM

    Kevin, this is what my developer told me:

    Looks like the form is being embedded using an iFrame, and so, it's not a conflict with any element from your website.

    As per what I see, the div overlapping the submit button is #cardProgress, which is responsible for indicating in which step of the form the user is in. See attached.

    Unfortunately, as the form is already in an iFrame, we can't change its content/style, so I recommend you to either disable the progress card feature, or report the issue to Jotform, as it seems to be a common issue in the community.

    Let me know if there's anything else we can do here! :)


    1589909420screenshot-www.nomorechores.co



  • Profile Image
    IvayloK
    Answered on May 19, 2020 at 02:35 PM

    Are you referring to the form on this website: https://www.nomorechores.com/automate-your-turnover?

    I checked the embedded form again. The JavaScript code still appears.

    Can you please try to remove the simple one line JavaScript code and then test again?

    Let us know, how it goes. We will wait for your response.


  • Profile Image
    zeeks
    Answered on June 19, 2020 at 03:05 PM

    Do you mean this one?


    <script type="text/javascript" src="https://form.jotform.com/jsform/92325037761254"></script>

    Won't that remove the form from the page?

  • Profile Image
    Amin_N
    Answered on June 19, 2020 at 04:46 PM

    Since you already use the form iFrame code to embed it, then it's absolutely okay to remove the JavaScript line.

    Please give it a try and let us know how it goes.