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

    Width of Embed Form

    Asked by ttrs on June 27, 2011 at 12:37 PM

    When I  to embedded a form (using Source) it used to automatically adjust the to the width of the page, as of this page:

    http://www.ttrs.co.uk/ttrs/order

    However now when I update the form and need to copy and paste the same code again, the width is very narrow, and this is the case for all my forms. An example of the same code and form on another page, but doesn't adjust to the width any longer.

    http://www.ttrs.co.uk/node/217/

    Is this a bug or am I doing something wrong?


    Thanks

    Page URL:
    http://www.ttrs.co.uk/node/217/

  • Profile Image
    JotForm Support

    Answered by liyam on June 27, 2011 at 01:48 PM

    Hello ttrs,

    I have looked inside your source code and it seems that there is something wrong with the CSS code in the http://www.ttrs.co.uk/ttrs/order.

    This is what you see in the CSS:

    .form-label{
    width:<span scaytid="53" scayt_word="150px">150px</span> !important;
    }
    .form-label-left{
    width:<span scaytid="54" scayt_word="150px">150px</span> !important;
    }
    .form-line{
    padding:<span scaytid="56" scayt_word="10px">10px</span>;
    }
    .form-label-right{
    width:<span scaytid="55" scayt_word="150px">150px</span> !important;
    }
    .form-all{
    width:<span scaytid="57" scayt_word="690px">690px</span>;
    color:Black !important;
    font-family:<span scaytid="58" scayt_word="Verdana">Verdana</span>;
    font-size:<span scaytid="59" scayt_word="12px">12px</span>;
    }

    While this one (http://www.ttrs.co.uk/node/217/) has the correct format.  I have highlighted the problems in your CSS code above.

    .form-label{
    width:150px !important;
    }
    .form-label-left{
    width:150px !important;
    }
    .form-line{
    padding:10px;
    }
    .form-label-right{
    width:150px !important;
    }
    .form-all{
    width:690px;
    color:Black !important;
    font-family:Verdana;
    font-size:12px;
    }


    As you can see... you may be wanting to accomplish having the http://www.ttrs.co.uk/ttrs/order layout but unfortunately, the code is not right.  If you want the width of your form to be set as the one similar to the 1st link, I would suggest to use CSS injection instead with this code inserted in your CSS injection:

    .form-all{
            width: 100% !important;
     }
    Just let us know if you need further clarification on this matter.
    Thanks,
    Liyam

  • Profile Image

    Answered by ttrs on July 18, 2011 at 07:36 AM

    Thanks this works. However I have to do this each time I make an edit, something I didn't used to have to do ! But it sounds like something on our website.

  • Profile Image
    JotForm Support

    Answered by liyam on July 18, 2011 at 08:23 AM

    Hello,

    This is because you pasted the HTML code in the source code of your website.  So you will still have to update your webpage if you have any changes that you do in your Jotform account.

    If you wish for your forms to automatically be updated everytime you make changes through your Jotform account, I would suggest that you embed your form using the embed code.

    Simply Choose the embed option (see the highlighted below)

    On the next slide, get the embed script source code:

    Now once you have the code, replace your source code inside your webpage and use the new code instead.  This way every time you make changes in your form here in Jotform, it will automatically be updated as well in your webpage.

    Hope this clears up some of your concerns.

    If you have other questions, please let us know.

    Thanks,

    Liyam

  • Profile Image

    Answered by ttrs on August 01, 2011 at 07:23 AM

    Hi the reason I don't use EMBED is because the page jumps too far down when seleting the options - using source prevents this from happening. Thanks anyway.