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 embed my form in the website and keep its exact look?

    Asked by EffieMcNair on February 14, 2016 at 02:50 AM

    Hi there,

     

    I would like to be able to embed my form in my website with the exact same look like I designed it to be, however, some of the field are messed up, and the whole form is stretched and much longer. Playing with the CSS back and forward  didn't do me much good!   Please help!

     

    Here is my form:https://form.jotform.co/60309090672857

    And here is my embedded, different look form:  http://transaustremovals.com.au/about/

     

    Thanks!

    Effie 

    Page URL:
    http://transaustremovals.com.au/about/

    and keep in how to embed
  • Profile Image
    JotForm Support

    Answered by ashwin_d on February 14, 2016 at 10:44 AM

    Hello Effie,

    Please embed your form using its iFrame embed code and see if that solves your problem. The following guide should help you how to grab your form's iFrame embed code:  http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code 

    Do try it out and get back to us if the issue persists.

    Thank you!

  • Profile Image

    Answered by EffieMcNair on February 14, 2016 at 04:51 PM

    Thanks Ashwin, I already tried all these options....I think I know what's the problem but don't know how to fix it...it happens as the form is small, and under a certain size it seems to turn it into a responsive form and change the fields...

    I want the form to change its fields only on a mobile, and not on bigger screens - what is the way to do that? (or maybe its another problem that mess up my fields...?)

    More ideas please?

    Thanks, Effie

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 15, 2016 at 01:06 AM

    I checked your website and I can see that you are currently using the script embed code. Can you try embedding your form to your website using the iFrame embed code only?

    Only copy the yellow highlighted iframe code seen below and do not copy the rest of the script.

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/60309090672857"

          frameborder="0"

          style="width:100%;

          height:539px;

          border:none;"

          scrolling="no">

        </iframe>

        <script type="text/javascript">

          window.handleIFrameMessage = function(e) {

            var args = e.data.split(":");

            var iframe = document.getElementById("JotFormIFrame");

        ........

          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>

    Do let us know if this fixes the issue.

  • Profile Image

    Answered by EffieMcNair on February 15, 2016 at 01:19 AM

    Thanks Chriistian - I copied and pasted the bit that you have you suggested but unfortunately it didn't fix the problem...

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 15, 2016 at 03:13 AM

    You can inject this css to fix the appearance of the form:

    #input_18,#input_17,#cid_20,#cid_19,#cid_18,#cid_17,#cid_15,#cid_22,#cid_21{

    width:160px!important;

    }

    .form-label{

    width:60px!important;

    }

    Here's a guide on how to inject css: How to Inject Custom CSS Codes

    You can also clone this form where I tested the css: https://form.jotform.com/60451503492955

    Simply follow this guide: How to Clone an Existing Form from a URL

    Do let us know if the issue persists.

  • Profile Image

    Answered by EffieMcNair on February 15, 2016 at 10:55 PM

    mmm....well its a bit better, but not exactly the same, still unwanted margin from the left and right and a very big stretch button...

    Must be a better way to embed a simple form in a simple side bar without going through each single field and add '!important'? 

     

    here is my form: https://form.jotform.co/60309090672857 

     

    Thanks again,

    Effie

  • Profile Image
    JotForm Support

    Answered by Chriistian on February 16, 2016 at 12:42 AM

    By defining each field, the css forces the design to stay as it is when viewed in desktop.

    You can inject this custom css to fix the appearance of your form. The yellow highlighted css are the previous code that we added, and the rest are the new css that should fix the button and the margin.

    #input_18,#input_17,#cid_20,#cid_19,#cid_18,#cid_17,#cid_15,#cid_22,#cid_21{

    width:160px!important;

    }

    .form-label{

    width:60px!important;

    }

    div.form-header-group{

    margin: 0px!important;

    }

    button#input_2 {

    width: 52px;

    }

    #id_20,#id_19,#id_18,#id_17,#id_15,#id_22,#id_21{

    padding-top:0px;

    padding-bottom:0px;

    }

    Here's the link to the form where I applied the css: https://form.jotform.com/60460312940951 

    If you like, you can clone this form instead and embed this form in your website.

    Do let us know if you need further assistance.

     

  • Profile Image

    Answered by EffieMcNair on February 18, 2016 at 05:40 AM

    Thanks for that - all good  :-)

  • Profile Image
    JotForm Support

    Answered by Jan on February 18, 2016 at 10:07 AM

    On behalf of Christian, you are welcome. Let us know if you need any help. Thank you.