Skip to main content

8. Customizing the Style Settings of your entire Form

Onboarding Team
  • Updated

Style Settings

The Style Settings tab allows you to adjust the overall style of the entire form - this includes all three subsections.

1.png

 

Form Format

2.png

This option allows you to design the actual format that your form will be presented in when viewed. There are two options:

One-Page

Any questions that you've added to your form during the Set Up process will be stored on the same page as the rest of your form. Your viewer can scroll through the contents of your form using the scroll bar.

Tip: This is a good option if you don't have a lot of sections on your form. It allows your Contact to complete the form without needing to click through any screens. Be sure not to make the scroll too long!

3.png

Multi-Page

Any questions that you've added to your form during the Set Up process will be stored on the next page - your viewer will be given the option of clicking on a "Next" button which will guide them through the steps.

Tip: This is a good option if you have a lot of information on your form and you'd like to minimize the time that your viewer spends scrolling.

4.png

 

Form Page Width

5.png

This option allows you to choose whether or not your background colors and section headings span an entire browser page or are condensed.

Full-width

The borders and section headings will span across your viewer's entire browser page.

6.png

Centered

The borders and section headings will be boxed off and not span the entire page.

7.png

Form Page Max Width

8.png

Use this field to increase or decrease the width of the questions/information on your form.

Adjusting the Form Header

When adjusting the Form Page Width as either Full-width or Centered, as well as adjusting the Form Page Max Width, these will change the justification of the form and overall width of the form. This means the Header image you uploaded will be affected when the form is published (to a Desktop or to a Mobile device). To engage with this a little more, and to see how you can test your Form a little to get the settings just right, head over to this article on the Header Dimensions for Forms!

 

Background Image

9.png

This option allows you to upload an image to be the background of your form.

Hint: The image will be most visible when the Boxed width format is used.

10.png

 

Content Section Background Colour

11.png

Alternatively, you can choose a color to be displayed in the background of your form! You can paste in a Hex Code or pick a color from the bar/display box.

Hint: You can use the arrows to flick between Hex, RGBA and HSLA colors!

 

Button & Title Background Colour

12.png

Use this option to adjust the section headers and selectable buttons on your Form.

Button & Title Font Colour

13.png

Use this option to adjust the font color that is displayed in the section headers and selectable buttons.

What's Next?

Well, you've finished the Design process. But the fun doesn't stop here! It's time to put the final touches on your form in the Settings Tab.