Try It Yourself: Customize Form Style & Layout

In this video, you'll learn how to change the colors, fonts, images and layout of your form.

Try it Yourself

Let's start by changing some of the Global Layout Properties.

1. Click the Forms Root Property Node (the name of the form at the top of the tree) in the Form Outline panel to access the global Form Properties.
    
2. Click the  'expand' icon to expand the Form Layout & Alignment Properties section of the Form Properties panel.
    
3. Change the value for the Alignment property to Vertical. This will align the captions above the fields.
    
4. Next, change the value for the Field Width property to '600.'

Notice how these settings affect the entire form.

Next, lets override the global settings for an individual field.

1. Click the 'Number of Guests' field in the Live Edit Preview panel.
    
2. Change the values for the Field Width to '300.'

Because we have an individual field selected, the field width change applies only to that field.
 

Next, lets edit the Theme & Style settings to change the heading color and upload our company logo.

1. In the upper right corner of the Form Designer, click the Theme & Style button.
   • The Theme Settings window displays.
      
2. Click the Settings icon in the upper right corner of the Theme Settings window and choose Page to edit the page settings.
    
3. Click the 'expand' icon to expand the Header section and select any new predefined color from the background-color drop down.
   • You can also enter the hexadecimal code for any color here.
      

Now let's upload our logo to display in the header:

1. Select the graphic field, then click the 'editor' icon to launch the Media Library.
   • The Media Library has a selection icons you can choose. You can also upload your own graphics. 
      
2. Click the 'My Shared Media' folder in the left panel.
   • Files in the 'My Shared Media' folder can be used by all our forms.
      
3. Click Upload.
   • The Upload File dialog displays. You can use this dialog to add multiple files to be uploaded at once.
      
4. Click Add.
   • A standard File Upload dialog displays.
   • Browse to and select your logo to upload.
      
5. Click Upload to upload the file to the server.
    
6. Click Close to close the Upload File dialog, then click the Save button on the Media Library window to use your uploaded image.
    
7. Back in the Form Designer, click the Save button to save your changes.