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.
I have some issues about how to design formAsked by Webteam00 on December 16, 2016 at 04:59 AM
I'm lost and confused.
From the design template, to the advanced design platform, to the preview panel, every iteration of any of my form is different!
When I make changes to on the CSS, some of the changes just don't transfer across.
Can you please help?
As you mentioned you use a template on your form and this restrict to style of your form. However, you can still change the design of your form by injecting some custom CSS.
You have already injected some custom CSS into your form but I think that we need to modify them.
In the below section of my answer you can see what I have changes in your form but first I want to share with you my demo form: https://form.jotform.com/63502948676972
I cloned your form to my side and worked on it. You can clone this form to your side, too. Please have a look at the guide about How-to-Clone-an-Existing-Form-from-a-URL
I have made below changes on your form:
#1- Change the width of your form to 1300px.
#2- Modified your Custom CSS. Removed your CSS from the form and injected below CSS, only. I have changed the style of the Submit Button with the below CSS code.
background : #c79c72;
color : white;
font-family : helvetica;
text-transform : uppercase;
border-color : white;
padding : 10px 50px;
#3- I have changed the Label Alignment from the designer, not with CSS.
#4- I have changed the alignment of your submit button. I aligned it to the center.
#5- I have add Mobile Responsive Widget to your form.
Actually, the reason of why design of your form is different in default form design page, Advanced Designer and Preview is your template and injected CSS actually. Your CSS codes affects the responsiveness of your form for different screen sizes. When the width of your designer screen changes, your form view is also changes because of that.
Please have a look at the following video:
Please also have a look at the guide: How-to-make-forms-mobile-responsive
If you need any further assistance, please feel free to let us know.