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.
Indent not displaying correctly - Fields not aligned well to the leftAsked by lshad24 on January 09, 2014 at 11:53 AM
My form (33426781191961?) contains several sections. Each section has a header and associated items beneath this header. Under the first section header 'Conference Details', the associated items are indented correctly below the header. Can you tell me why the elements under each of the other headers (travel, lodging, etc.) are not indenting correctly when displayed in the browser?
sections elements section items
Thank you for contacting us.
Please insert the following CSS into your form to get everything aligned correctly:
Please let us know if this helps.
Hi Titus, Thanks for answering. I don't want all of the form elements to be aligned to the left which is what the code you provided will do. I want the fields below each heading to be indented so that the form is easier to read. When I create my form and preview, the fields below the Conference Details indent properly, but the fields beneath the other headings do not. How can I fix this?
The Header fields are styled using div's, which thematically applies styles across the form.
This is what is making them overlap other fields, making those fields appear as if they are not indented:
To correct this, you need to replace all the headers (except the main one at the top) with Text/HTML fields and style them as headers as shown:
Here is some sample text with thematic tags:
<div id="subHeader_7" class="form-subHeader">Please enter your Travel estimates below. The current standard mileage rate is $0.565/mile</div>
After that, apply some styling to the headers you just replaced by injecting CSS rules to your form.
Please identify your header id's using this guide, replacing them with the right ones before styling your form with the following rule:
Here's a sample of the outcome: http://jotformpro.com/form/40076550209954?
Please let us know if you hit a bump.
TitusN, once again your help in resolving my display issue was timely and spot on, so thank you for taking the time to resolve it for me. On this same form, you provided help in getting a 'group' of fields (travel section) to display based on the conditiont that the 'row' above it was completed. One of the issues that I have with the solution is that I do not want a new row to display unless it is needed by the user. Can you modify your solution to include an 'add' button that users can click if they need to add another row? Is there a way to include an add button that doesn't clutter up the current design? Thanks fo rlooking at this again.
You are welcome.
Certainly, we can add an 'Add Row' button rather than the fields being filled as a conditional rule.
Please allow a little time, and I will add a response to your requested workaround on this thread: http://www.jotform.com/answers/313830-Conditions-based-on-a-button-click#11