I have some issues about how to design form

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?

Thanks

Remy

Hi Remy,

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.

button#input_2 {

    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.

Thank you.