What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to make form responsive

    Asked by Eugen  on August 28, 2015 at 08:19 AM

    Guten Tag!

    Ich habe ein Problem mit dem JotForm-Kontaktformular.

    Ich benutze JotForm-Kontaktformular seit paar Jahren und hat es hat immer super funktioniert. Jetzt habe ich meine bestehende Webseite mit Web Designer 11 Premium für mobile Geräten wie Tablet oder Smartphone optimiert.

    Ich habe für beide Varianten der Webseite (Standart und Mobil) jeweils ein Jot-Form-Kontaktformular erstellt. (Kopiert und etwas angepasst). Für die Standart-Seite ist das Formular etwas breiter und für die mobile Seite etwas schmaler. Sonst ist alles gleicht. Die mobile Variante funktioniert einwandfrei, die standarte Webseite dagegen nicht. Der Formular-Text bleibt  nur kurz sichtbar und dann verschwindet. Wenn ich das Browser-Fenster verkleinere, bis die mobile Variante kommt und dann vergrößere es wieder, kommt der Text zurück. Lade ich die Seite erneut, kommt der gleiche Fehler wieder und der Formular-Text beleibt unsichtbar. Ich habe meine überarbeitete Webseite komplett fertig und kann sie jedoch nicht veröffentlichen, weil das Formular nicht richtig funktioniert und die Kunden mich nicht kontaktieren können. Kann mir jemand helfen???

    Grüß,

    Eugen

    Mobile smartphone xara
  • Profile Image
    JotForm Support

    Answered by BJoanna on August 28, 2015 at 11:14 AM

    Thank you for contacting us.

    To make your form responsive you need to add Mobile Responsive widget to your form. 

    If, after adding mobile responsive widget, your form is still not responsive please provide us link of your form or website if you have embedded your form, so that we can test your form.

    Hope this will help. Let us know if you need further assistance.  

  • Profile Image

    Answered by Eugen  on August 28, 2015 at 11:59 AM

    Hallo BJoanna,

    danke für deine Antwort!

    Mobile Responsive ist wirklich ein nützliches widget. Allerdings hat es mir leider nicht geholfen. Das Kontaktformular auf einer mobile Seite (wenn man sie z.B. von Smartphone aufruft) funktioniert ja gut. Das Formular funktioniert bei der standrart-Seite nicht, als wenn man die Webseite von PC oder Laptop aus aufruft. Ich verstehe nicht, warum?

    Leider kann ich keine Link auf die Seite mitteilen, da die neue Seite noch nicht online steht. Ich kann sie ohne dem funktionierenden Kontakt-Formular nicht online stellen. Ich hoffe auf deine Hilfe!

  • Profile Image

    Answered by Eugen  on August 28, 2015 at 12:14 PM

    Ich bin nicht sicher, ob du hier zugreifen kannst: http://127.0.0.1:8000/virt9624cc8d/kontakt-de.html

    Probiere es bitte aus. In Rechteck sollte das Formular sein. Wenn du das Browser-Fenster klein machst, kommt die mobile Variante des Formulars. Machst du danach das Fenster wieder groß, kommt die Standarte Variante. Aktualisierst du das große Fenster, verschwindet das Formular wieder. Warum???

  • Profile Image
    JotForm Support

    Answered by BJoanna on August 28, 2015 at 01:48 PM

    Unfortunately page you provided is not shown.

    Is this the form you are working on http://www.jotform.co/form/31925521016850 ?

    I have cloned mentioned form and I saw that you did not add Mobile Responsive Widget to your form.

    On my cloned form I added Mobile Responsive Widget.

    And form looks like this when I re-size browser window.

    Please add mobile responsive widget to make your form responsive. 

    Here is my cloned form: http://form.jotformpro.com/form/52395418531962? 

    Feel free to clone it to your account. 

    If you are working on some other form please provide us ID that form.

  • Profile Image

    Answered by Eugen  on August 28, 2015 at 05:27 PM

    Nein. Das war nicht das richtige Formular. Das ist das alte Formular. Das neue hat Mobile Responsive Widget.

    Ich habe jetzt in der Webseite die Formulare mit Mobile Responsive Widget eingebunden. Jetzt funktioniert die Standarte Seite, aber dafür die mobile Seite nicht mehr funktioniert. Mit der Hoffnung das Problem besser lösen zu können, habe ich die neue Webseite trotz Problemen mit dem Formular veröffentlicht: http://www.au-pair-grenz.de/kontakt-de.html

    Jetzt kannst du sehen, was ich meine.

    Ich hoffe sehr, dass du mir helfen kannst das Problem zu beseitigen. Danke im Voraus!

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 28, 2015 at 07:13 PM

    First, may I suggest to re-embed your form using iframe embed code. I believe this will resolve the problem. 

    If iframe does not work, please let us know so we can assist you further. Thanks!

  • Profile Image

    Answered by Eugen  on August 29, 2015 at 03:36 AM

    Hallo! Leider hat es auch nicht geholfen. Wenn ich iframe embed Code. in beiden Varianten der Seite (Standart und Mobil) verwende, ist das Formular bei der mobile Seite sichtbar und bei der Standarte (also für PC) nicht sichtbar. Irgendwie funktioniert nur die eine Variante, ich kann steuern welche es sein soll. Aber ich benötige beide funktionierende Varianten.

  • Profile Image
    JotForm Support

    Answered by EltonCris on August 29, 2015 at 07:05 PM

    Eugen, I can see you are still using script embed code. The form scripts conflict with your website scripts. This is the reason why the form does not appear on mobile. Please try to leave iframe embed code on your page so we can check how it appears on our side. It should be both visible on PC and mobile since iframe will not conflict anything on your page.

    Also, I see that you are using Xara Web Designer. Please consider checking this guide as it may help. http://www.jotform.com/help/175-Changing-Height-in-Xara-7. Take note that Xara creates fixed height for every html content, make sure to make it longer to avoid cut off on the form.

    Thanks!

  • Profile Image

    Answered by eugen_ on September 03, 2015 at 04:21 PM

    Hallo EltonCris!

    Jetzt habe ich die Formulare mit Hilfe iframe embed Code eingebunden und die Webseite so veröffentlicht, damit du das Resultat sehen kannst. Wie schon gesagt, ist das Formular bei der mobile Seite sichtbar und bei der Standarte (also für PC) nicht sichtbar. Da 75 % meiner Webseitenbesucher über PC oder Notebook die Seite aufrufen, möchte ich meine Seite ohne funktionierendem Kontaktformular nicht lange stehen lassen. Ich bitte schnelle Hilfe!

    Ja, ich weiß, dass bei Xara die Webseitenlänge begrenzt ist. Allerdings ist meine Kontakt-Seite gerade mal 2126 px. lang und grenzt noch lange nicht an das Maximum.

  • Profile Image

    Answered by Shadae on September 03, 2015 at 09:29 PM

    Hi eugen,

    I am able to see your form when viewing it on PC:

    Can you confirm that you are still experiencing this issue with your form not showing up on your webpage when viewed on a desktop?

    Thank you

  • Profile Image

    Answered by Eugen  on September 04, 2015 at 04:09 AM

    Hallo! Wenn du die Webseite neu laden tust, also aktualisierst, verschwindet das Formular mit Sicherheit. Ich bestätige, dass es bei mir nicht funktioniert.

     

  • Profile Image
    JotForm Support

    Answered by Boris on September 04, 2015 at 09:25 AM

    I can see the problem - the form's height is being incorrectly calculated as zero (0px) by its script, since there are two forms and two scripts trying to do the height calculation.

    To remedy this, please remove both scripts that were provided with your iFrame embed codes. There scripts are just under the iFrames of your forms. I have marked the script in orange below:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformeu.com/form/52394176924362" frameborder="0" style="width:100%; height:909px; 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);}if(window.location.href && window.location.href.indexOf("?") > -1) {var ifr = document.getElementById("JotFormIFrame");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;}}</script>

    There are two instances of this script on your website, one for each iFrame embedded form. You need to remove both scripts, and your form will no longer get its height incorrectly calculated to zero.

    Please let us know how it goes.

  • Profile Image

    Answered by Eugen on September 04, 2015 at 12:27 PM

    Hallo Boris!

    Vielen Dank für deine Hilfe!!! Jetzt funktioniert alles! :)))

    Ich müsste nur die Höhen anpassen, jetzt bin ich zufrieden. Danke dir und allen anderen, die versucht haben mir zu helfen!!!

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on September 04, 2015 at 01:34 PM

    On behalf of my colleagues, you are welcome.

    Feel free to contact us if you have any other questions.