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.
Form width on SidebarAsked by xagolab on January 09, 2017 at 02:32 PM
Just curious as to why doesn't form take on the full width of the sidebar just like my other form for newsletter? I tried to tinker with Form Design, but it didn't inherit any changes and at times, messed up the form.
I am attaching an example of what I mentioned above in a screenshot.
It has to do with the responsive layout of the form. Please review the user guide below.
While in the Form Designer, make sure the option "Make this form responsive" is checked and saved the form design.
Hope this help. Let us know how we can be of further assistance.
I did have responsive form checked. It doesn't fill the sidebar like the other
Could you please provide us the web page where the form is embedded? There are a couple of possible factors that may cause different results in the margin of the forms embedded.
We'll wait for your response.
I checked your form and you injected CSS code that anchors the form width:
You can increase the width value to make the form fit to the side bar of your web site. I thik it si something around 350 pixels.
I hope this answer helps. Please don't hesitate to contact us for your further queries.
All the best!
So if I set it to 350px, it is fixed. To make it dynamic, can I set it to AUTO or 100% something else so that it always takes on the full width of the sidebar?
You can set the width to 100% and at the same time you can set max-width to 266px.
Your side bar actually have 270 px width. So we have some borders so the form can be seen full on 266px width.
Here is the code for this:
max-width: 266px !important;
width: 100% !important;
If you want a wider form you can increase the maximum width value.
Try this code and turn back to us with the results.
I have implemented your suggestion with no luck. I even increased the width to 268px and at that width it chopped off again.
I guess I have to live with form in it's current state, huh?
Let's makes things clear:
- Your side bar has a width of 270 px
- The form below the JotForm has a width wider than the side bar. Hence, it is viewed as spilled over the margins.
The the divs with the name widget editor restrict the JotForm to be viewed wider. In order to achieve what you want, you need to change your styling related to these divisions:
Unfortunately, JotForm has nothing to do with that styling.
I hope I did help you. Please try to change your styling on your web page accordingly. An option is to decrease the second form's width to 89-90% from 100%:
PS: You can try styling options from the console. Here is a tutorial about it:
Thanks. I have been contemplating on decreasing the Newsletter width for a while. I was hoping for easy solution but at the same time I have to think about many other pages that will have sidebar and these forms.
To keep things simpler, I think I will decrease the size of the Newsletter form. I am hoping that other text stay well aligned in the sidebar otherwise I will be really juggling with aligning issue over and over on many pages to come.
Thank you and everyone else very much and I will update everyone with any other issues I come across regarding aligning on sidebar.