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

    The width of my fields is determined by my form width. Help!

    Asked by cperezdo on January 04, 2016 at 02:13 PM

    Hi, I changed the form width in the Designer, and suddenly it changed automatically all the sizes of my fields (text boxes, drop down, e-mail, phone, calendar, everything...) to the full size of the form.

    I have tried injecting CSS regarding to every field ID, but it doesn't work in most of them. I am quite desperate as I can't control the layout of my form.

    Please, I would really appreciate some help here.

    Thanks!

    C

    Page URL:
    https://form.jotformeu.com/60016545856356

    form width size layout text boxes
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 04, 2016 at 04:51 PM

    Hi,

    Thank you for contacting us.

    Yes, when you change the width in the Designer, it will change the width for all the fields at the same time.

    To change it just for a single field, you can do it by following the steps as the image below.

    Hope this will help you, do let us know if it does not, we will be glad to assist you.

    Regards.

  • Profile Image

    Answered by cperezdo on January 04, 2016 at 05:46 PM
    Thanks a lot for your prompt answer, but it is the first thing I tried and doesn't work, sorry.
    I have tried many things, but it doesn't change it, not even with the css lines I added, it just worked for one field.
    Please, I would really appreciate if you can help me with this issue.
    Best regards,
    Cristina
    CPD
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 04, 2016 at 07:00 PM

    Hi,

    I tried changing the width directly in the Designer tool and I was able to edit it, to do it just click on the Designer icon on the top toolbar :

    Then you can edit the width property as shown in the image below, you can double click on each element and then add the width property, I did it using pixels , but you can do it using percentage.

    Do let us know if it works as you need or if you are still unable to change the width, we will be more than glad to assist you.

    Thanks.

  • Profile Image

    Answered by cperezdo on January 04, 2016 at 07:46 PM
    Hi!
    Thank you so much!
    I can control the width as you say now, but the label related to the field doesn’t stay in the left, just on top…. Sorry to keep bothering you, but please, how can I sort it out? ex. Nº Adulti
    Thanks a lot.
    Cristina
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on January 05, 2016 at 01:10 AM

    Hi Cristina,

    You can set the Label Align to LEFT instead of AUTO

     

    Is this the field you are having the issue? Let us know if issue remains.

    Thanks.

  • Profile Image

    Answered by cperezdo on January 05, 2016 at 04:46 AM
    Hi! yes, for instance with the field Nº Adulti, in my case, no mater what I choose in Label Align, it remains on top… It has been happening to me with other fields as well.
    ...
  • Profile Image

    Answered by Sammy on January 05, 2016 at 07:26 AM

    Kindly replace the CSS

    #id_12 {
        width : 100px;
    }

    with this one

    #cid_12 {
        width : 100px;
    }

     

    The first snippet controls the width of the container containing the label and the drop-down while the second will directly control the width of the drop-down.

     

    You can use the designer's CSS tab to effect these changes.

     

  • Profile Image

    Answered by cperezdo on January 05, 2016 at 08:46 AM
    Ohh! So many thanks!!! Now I can control it!!! Thanks a lot! My knowledge of CSS is null, so I can see I have to learn if I wanna do better.
    Nevertheless thank you all for your invaluable help!
    Best regards,
    Cristina
    ...
  • Profile Image

    Answered by Sammy on January 05, 2016 at 10:57 AM

    You are most welcome, happy to hear you have managed to address the issue.

    If you do encounter any other issue or require some insights in the aspects of the form builder kindly let us know and we will be glad to assist.

  • Profile Image

    Answered by cperezdo on January 05, 2016 at 01:46 PM
    Hi!
    Sorry to bother you again…. But suddenly my Designer tool only shows my form like the file attached… Could you help me, please, to put it back to normal?
    Thanks a lot,
    Cristina
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on January 05, 2016 at 02:56 PM

    We are not able to see the included screenshot image in your message.

    Please resend the image by following this guide 

    How-to-add-screenshots-images-to-questions-in-support-forum

    Thanks.

  • Profile Image

    Answered by cperezdo on January 06, 2016 at 11:46 AM
    Hi!
    Sorry to bother you again…. But suddenly my Designer tool only shows my form like the file attached… Could you help me, please, to put it back to normal?
    Thanks a lot,
    Cristina
    ...
  • Profile Image

    Answered by Sammy on January 06, 2016 at 01:09 PM

    Hello Cristina,

    Unfortunately the screenshot you have provided has not been successfully attached to your last post, would you mind uploading it again as per the instructions provided my my colleague.

     

    I checked you form and it appears some of the drop-downs and the entire form have significantly shortened.

    If this is the issue you can rectify it by

    Kindly check in the designer's design tab and change the form width from 100px to a value above 640px

  • Profile Image

    Answered by cperezdo on January 06, 2016 at 02:46 PM
    Hello my dearest!
    I tried to send the screenshot as your colleague told me, but I never got any answer from you… sorry… so I tried this way… As usual, I might have done something wrong… again...
    Regarding to your comments, yes, you are right, I tried to change the width of the page to 100% but even when it accepted it, the Designer Tool changed its appearance, but in jotform it was fine.
    I have done as you told me with de 640px and the Designer Tool works well now, just hope it also works fine in mobile phones and tablets… The only problem is that with that size (640px), in my site the form only fills half the page… that’s why I was trying to go for the 100% width hoping it would fill the whole page…
    Regarding to those 3 mini drop downs… yes… I want them to be that size ;), thanks anyway for your kindly comments!
    Now I have to learn how to organize the checkboxes to add more space between columns, as when I see that field in jotform it looks great, but in my site they are one nearly over each other…
    As always, lots and lots of thanks.
    KR,
    Cristina
    CPD
    ...
  • Profile Image
    JotForm Support

    Answered by jonathan on January 06, 2016 at 04:20 PM

    Hi Cristina,

    I checked your jotform http://www.jotformeu.com/form/60016545856356 and I can see it like this now.

    I assume this is fine now. Do let us know if anyting is still amiss.

    As to making the form mobile responsive you can refer to the user guide:

    How-To-Make-Mobile-Friendly-Forms-on-JotForm

    Thanks.

     

     

  • Profile Image

    Answered by cperezdo on January 06, 2016 at 04:46 PM

    Hi there!

    Yes, that is the appearance at jotform, but when I embed the source code into my website it goes like this:

    And as you can see, it only takes half of the website page... Do you have any idea of how to do it so it takes all the page size please? As well as how to add space between the columns in the field Richesti Speciali (checkboxes), so they don't look so packed?.

     

    Once again, many many thanks for your help.

    Cristina

  • Profile Image
    JotForm Support

    Answered by jonathan on January 06, 2016 at 05:56 PM

    It will help us investigating the problem properly if you share to us the URL of your website where we can at least check the embedded form.

    Please tell us the URL of your website. I tried manually checking using the URL I seen on your share screenshot image, but I only see it like this

     

    You may also want to check first by re-embedding the form using instead the iframe embed code.

    user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

    Let us know if issu remains.

  • Profile Image

    Answered by cperezdo on January 07, 2016 at 06:46 AM
    Hi!
    The page in my website is http://www.eleantravel.it/test-formulario-jotform
    I used a web builder called Supersite, owned by Aruba.it , and they were the ones to recommend me Jotform to build a form, as theirs is too basic.
    I have tried with iframe embedded code, but I just see a page super small in the middle of my web site page, …, it doesn’t look as part of the site.. sorry… Thanks a lot for the suggestion but I don’t think it will work with iframe.
    Hope with this we can make it right, as I can only see myself trying to count pixels…
    Thanks a lot really!
    BR,
    Cristina
    ...
  • Profile Image
    JotForm Support

    Answered by mert on January 07, 2016 at 11:10 AM

    Hi Cristina,

    I checked the web page "http://www.eleantravel.it/test-formulario-jotform" and I didn't see any iFrame embed code, it seems that you have embedded your form with the source code. Also, you can adjust the height and the width of the form on iFrame, so you can overcome the size problem with this way.

    After getting the embed code of your form with IFrame method, you can reduce height and width values. Below, you will see the example IFrame embed code. As it is seen, you don't need to take the whole structure of it, the content between <iframe>...</iframe> tags is enough to embed your form. Also, you can adjust the height and width of the form on red marked area.

     

        <iframe

          id="JotFormIFrame"

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

          allowtransparency="true"

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

          frameborder="0"

          style="width:100%;

          height:400px;

          border:none;"

          scrolling="no">

        </iframe>

     

    For further assistance, please let us know.

    Thanks.