How do I get my form to display correctly?

  • Profile Image
    Malane
    Asked on March 16, 2013 at 12:06 PM

    I'm creating a website and I want a Contact Me/Feedback form on it so I used your free Form builder (I found it really easy to use and I've never used other similar software so well done there) to create my ideal form. I went for the easy option of just embedding it at first but I could only see the Heading and Name fields on the page, no way to access the other fields, I've tried tabbing to them, adding a min-height to  page'sin the css and neither worked.

    So I tried the iframe option but the Submit button is missing - the form still submits once you've answered the ReCaptcha and pressed Return but it takes you to a thank you message on the same url instead of the Thank You page as I had configured.

    So I tried the source option but the Radio options have had the 2 column option removed (so the options sit above each other instead of side-by-side) and it also doesn't display the ReCaptcha image (just the Title message). Once you press Submit the Submit button changes to Please Wait and then you go to a Captcha image (not a ReCaptcha as I created) on it's own page with another Submit button below it! Once you answer the Captcha and click Submit you are then correctly taken to http://submit.jotformeu.com/server.php.

  • Profile Image
    Goldo
    Answered on March 16, 2013 at 01:26 PM

    If you could provide us the website url to where the form is embedded would be great, so we can check. Thanks!

    On the other hand I want you to know that you can modify the width and height of the form using iFrame. With regard to the captcha issue, please also try to remove the the re-captcha and re-add it.

    Let us know.

  • Profile Image
    Malane
    Answered on March 16, 2013 at 02:03 PM

    The website is not live yet as I'm still in the process of writing it. The image I uploaded was of the iFrame code and it was missing the submit button, the ReCapthca takes me to a Thank You message on the same url. I have images of the issues with the other codes (embed and source) but your form only allows me to upload one file.

    I have named the form Contact Me 01 on my account, maybe looking at it there will help?

    Thanks, Malane.

  • Profile Image
    Welvin
    Answered on March 16, 2013 at 04:13 PM

    Hi Malane,

    Please try to increase the iframe height value until the submit button will show up on your page. Also try to just embed the codes from the opening <iframe> tag to the closing </iframe> tag. If none of this solutions works, then that is an issue with the form container. Please try to adjust the container positioning.

    Also, what do you mean by "..the ReCapthca takes me to a Thank You message on the same url"? Do you mean that, even if you entered the correct captcha, there is another captcha field shown when the submit button is press? If yes, then that is maybe because your browser javascript is disabled. Please kindly check and enable, this website will help you identify javascript status on your browser: http://www.activatejavascript.org/.

     

    Thanks

  • Profile Image
    Malane
    Answered on March 16, 2013 at 04:39 PM

    I have recently learned HTML and CSS so editing iFrame code is a step too far for me atm I'm afraid. By the form container I'm assuming you mean the html page #container

    I paste it into, it has a min-height set but no max-height so that shouldn't be an issue right? If you look at the image I uploaded there is a slice of the #container
    showing at the bottom of the form.

     

    Also, what do you mean by "..the ReCapthca takes me to a Thank You message on the same url"?

    Javascript is enabled on my browser. When I used the iFrame option to add the form, and then filled it in, the Thank You message was displayed on the same page that the form had been on, replacing the form. When I used the source option to add the form, and then filled it in, the Thank You message was displayed at http://submit.jotformeu.com/server.php.

    I have edited the form and taken off the ReCaptcha feature so it is now just a plain Captcha and this seems to have solved the issue with the Embed code option, the form is now displaying properly and behaving as expected when I submit. I would really like to use ReCaptcha though to cater for users who are visually challenged, is this a known issue? Is there a fix or workaround I can use?

    Hopefully I have managed to explain my issues more clearly, thanks for your advice and prompt replies.

    Malane.

  • Profile Image
    jonathan
    Answered on March 16, 2013 at 05:38 PM

    Hi Malane,

    You can also try using first the re-captcha in your form before getting the iframe code. Then, re-embed the iframe code again into your website.

    May I suggest also to try omitting the second part of the iframe code when embedding. In the iframe code below, do not include the codes in red.. only use those in yellow.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//www.jotformeu.com/form/30724330008340" frameborder="0" style="width:100%; height:1102px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Make sure that re-captcha is already set in the field before you generate the iframe code.
    Hope this help. Please inform us this does not make any difference.
    Thanks.