How to make my form thinner?

  • Profile Image
    GDrummer95
    Asked on December 06, 2013 at 02:53 PM

    Hello there, I can't seem to make my form thinner, I like the look and color but there is too much padding or something on the side. How can I make it thinner and remove some of the padding?

    Here's the website url:

    http://myadt.us/

     

    I want it to look thinner like the one on this site:

    http://www.adt.com/

     

     

    Thanks!

  • Profile Image
    ardy0689
    Answered on December 06, 2013 at 04:35 PM

    Hello. Thanks for contacting us. I can see that you already used the iFrame embed code. You may use this iframe embed code for that specific form.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/33395308006148" frameborder="0" style="width:100%; height:571px; 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;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    All you need to do is to decrease the width percentage. It should make the form thinner. If you need further assistance, please do not hesitate to ask. Thank you

  • Profile Image
    EliezerN
    Answered on December 06, 2013 at 05:36 PM

    @GDrummer95

    In addition to my colleague's suggestion, I also cloned your form and worked a little on it so that it can look more alike to the form of the site you mentioned. So, here it is: http://form.jotformpro.com/form/33396342381961

    I simply injected this css code:

    .form-all

    {

    background-color:#F9C940 !important;

    }

    .form-textbox

    {

    margin-left:10px !important;

    width:184px !important;

    height:25px !important;

    }

    #id_24

    {

    margin-left:10px !important;

    }

    If you think that it is helpful for you, feel free to clone it so that you can use it for your needs. Here's how to clone a form: How to clone an existing for from a URL

    I hope it helps. Feel free to inform us if you need further assistance.

    Thanks