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

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

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.

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
...

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.

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
...

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.

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.
...

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.

 

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
...

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.

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
...

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.

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
...

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

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
...

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.

 

 

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

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.

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
...

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"

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