Formatting Form For Your Live Page

When it comes to reworking how your form displays on your page, you have a couple options:

 

Make form look like it did when building it:

 

Step 1- Get form loaded into section on page you need it to be on.

 

Step 2- Making sure you are first in Advanced Mode, click on the section and then select the Settings Wheel in the bottom left corner of the section. The image displayed below is an example of how the form may look based on the default styling rules the design has in place.

Formatting_Form1

Step 3- With the first option that pulls up, Form Section Settings, select Make the Form Look Like it Did When I Built It. Select Save.

Formatting_Form2

When you save, you will be taken back to the section. You should see a change in how your form is displayed. Example: 

Formatting_Form3

If you like what you see, simply close in the bottom right of the section and publish changes for them to go live.



 

Format Form Font Keeping the Form Looking Like the Rest of the Website:

 

This option allows you to keep the form as is when you first load it into the section, reflecting the look of the rest of the site. Control over this formatting is tricky with two options. 

 

Option 1- The Font Looks ok, but the coloring is not: the coloring of the section and font is reflective based off of what background color you have set for the section. 

    Step 1- Making sure you are in Advanced Mode, click into the form section and go down to the Settings Wheel in the bottom left.

    Formatting_Form4

Step 2- Select the flower on the left. This will let you know what your background colors are. The default settings should reflect that with darker background colors, the font will be a lighter color. With a lighter background color, the font will be a darker color. Select the one you prefer and save.

Formatting_Form5

Keep in Mind: You have 6 colors available to you in your Color Pallet. Number 6 affects the linking of anything throughout the site, but will also affect the font and lines of the Form. You can change that to reflect what you need for all your forms. Although this changes anything linked throughout your site, all other areas you can override the color being used as they should be linked through a text box. The option for changing the font colors in the text box can be set to what you want by utilizing the font color option from the text box menu. Highlighting the linked word/phrase and choosing a new color will allow you to override the default link color for that specific word/phrase. 

 

To learn more about changing the site colors, you can follow these steps.

 

Option 2- You want to keep the styling of the form, but want to adjust the font being used on the form.

Step 1-  In Advanced Mode, Click Edit Fonts

Step 2- Select Choose Custom Fonts in the top right corner.

Step 3- Select which font option you wish to change and make the appropriate edits. You can change the font style, font size, and more (see image below). If you make a change to a font category, your form page should show you what the font change will look like before saving.

Formatting_Form6

The Titles font will update the title of the form, as well as field property name (in the example below it would effect the title Annual Potluck 2017 and field property Person's Name). 

The Main Body text font will affect the entire font for the form.

The Buttons font will change the field options (in the example below First Name, Last Name, Email, & Phone Number). 

Formatting_Form7

 

Updated

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request