Not able to fill in the top most fields of embedded form on website

  • Profile Image
    Hanspeter
    Asked on February 13, 2018 at 06:50 PM

    Hi everybody

    1st Problem:
    I have problems with my contact form. When I start with the field Name followed with the line factory name, then is not possible to fil in the first two fields. Now I have used a head line and a rating line. I can use all field without the rating line. If I cancel the first two lines (Head lind and rating line) than I can not use the Name and factory Name.

    My 2nd Problem:
    When I use the Laptop or PC, I can use and see in the Internet the whole contact form but on my mobile phone I cannot use and see the whole form.

    My e-Mail Adresse: info@getraenke-gstoehl.li

    Webseite: www.getraenke-gstoehl.li

    I look Forward to hearing from you.

    Many thanks

    Hanspeter


  • Profile Image
    Kevin_G
    Answered on February 13, 2018 at 09:23 PM

    I have checked the form embedded here http://www.getraenke-gstoehl.li/kontakt.htm and I can see what you're referring to, the first elements cannot be filled and the issue seems to happen due to an element displaying over the form content: 

    15185749271.png

    You would need to resolve that conflict on the web page in order to have the form working as expected. 

    I hope this helps. 

  • Profile Image
    hanspeterbuettiker
    Answered on February 14, 2018 at 03:59 PM

    Hi Kevin_G

    Thank you for your help! Unfortunately, but I am so stupid in IT. I do not understand, what I hve to do or what does it mean. I can not find the code you talked about. Below-mentioned my whole code from the form:

    <iframe id="JotFormIFrame-80385115493357" onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" src="https://form.jotformeu.com/80385115493357" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe> <script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-80385115493357"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { 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; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>

    I have no idea, what I have to change in this huge code.

    Sorry, but I am so untalented.

    Thank you in advance for your help

    Kind regards
    Hanspeter

  • Profile Image
    jonathan
    Answered on February 14, 2018 at 05:34 PM

    We apologize for the confusion. The issue mentioned by our colleague was actually on your website page, and not on the form. So the suggested resolution was to fix it on your website page codes.


    An alternative option I suggest that you can try which you can do on the form side (Form Builder) is to inject custom CSS code on the form.

    Try add this CSS codes on your form.

    .supernova .form-all, .form-all {

        margin-top : 60px !important;

    }


    .form-line {

        padding : 0px 1px 0px 1px;

    }

    1518647602zzz 2018-02-15 06.29.04.png


    Then test again on your website if it resolves the issue.

    Let us know if issue remains.




  • Profile Image
    hanspeterbuettiker
    Answered on February 15, 2018 at 04:29 PM

    Hi Jonathan

    Perfekt, it works now on the Laptop/PC/Tablet/etc! Thank you very, very much!

    I have still a Problem with the mobile phone. The size is not korrekt on the Screen.

    Have you also an anser for this problem?

    Than you very much for your successful help.

    Greeting
    Hanspeter

  • Profile Image
    Kevin_G
    Answered on February 15, 2018 at 05:41 PM

    I think this should be resolved adding a mobile meta tag, please add this to your web page where the form is embedded on: 

    <meta name="viewport" content="width=device-width, initial-scale=1">

    This link will provide you more details about it: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag 

    I hope this helps.