How to embed my form in the website and keep its exact look?

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 

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!

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

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"

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

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

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.

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

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.

Thanks for that - all good  :-)

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