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

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

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: 

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

I hope this helps. 

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" onDISABLEDload="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

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;

}

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

Let us know if issue remains.

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

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.