Customizing Form Themes
This topic includes some common theme customizing steps as a reference. This topic applies to the newer Bootstrap Master Themes only.
To edit the theme settings, expand the Theme & Style Window, and click settings and then select the Sub Theme type to edit:
Setting the Form Width
The form width controls the outer boundary of the form. Setting the form width too small will cause fields to wrap to the next line. When creating a multi-column layout, if you notice that fields are wrapping to the next line, you may need to increase the form width.
- From the settings menu, select Page
-
Expand Outer Container group and enter the width property
Caption Width and Field Width
Caption and Field widths are not part of the Form Theme. All of the settings that control sizing and default spacing and padding on fields can be accessed via the Form Outline Panel. We've included a reference to these settings here as they are commonly accessed when styling your form.
- In the Form Outline Panel, click the Form Name (Root Node)
- Below the Outline, in the Form Properties Panel, expand the Form Layout & Alignment Properties
- Edit the Caption Width and Field Width Settings.
Note that you can also change the caption alignment and adjust other (less frequently used) settings that apply to the form layout.
Hiding/Showing the Header
The header is the strip of color across the top of your form. The header element contains the heading text, Sub Heading and Graphic. You can show and hide this entire area be following these steps:
-
- From the settings menu, select Page
-
Expand Header group and set the hidden property to true or false to hide/show the header
Note: when hiding the header you also hide the heading text, subheading text and graphic. If you still want to display those elements but don't want the solid strip of color above your form you can:
Set the Header background color to the same background color of the page:
- From the settings menu, select Page
-
Expand Header group and set the background-color property to white (or whatever the background color of your page is)
-
In the same group, modify the head-font-color and subhead-font-color to a new color so they are visible and clear.
Or you can hide the entire header as explained above and insert a Free Text Heading Element and/or Header Graphic element at the top of the form to show your company logo and customize heading text.
Changing the Heading & SubHeading
You can edit the Heading and Subheading by double clicking on them directly in the Form Designer Live Edit Window (Inline editing) or by:
- In the Form Outline Panel, click the Form Name (Root Node)
- Below the Outline, in the Form Properties Panel, expand the Form General Settings
- Edit the Heading and Sub Heading values.
Setting your Company Logo
To change the default graphic shown in the header of the form:
- From the settings menu, select Page
-
Expand Header group
-
Click the Graphic Property to open the Media Library
-
Click My Shared Media in the list of folders
-
Click Upload, and then click add in the Upload window.
-
Select your file and click Upload
-
Click close and then click save.
Centering the Header
- From the settings menu, select Page
-
Expand Header group and set the align property to center
Changing the Header Background Color
- From the settings menu, select Page
-
Expand Header group and set the background-color
Using the Border and Footer
You can optionally show a border around your entire form, with the option to also show a footer panel. When the footer panel is used, the forms buttons will automatically be shown in this footer panel. Use of the footer panel is only supported on single page forms.
To show the form border:
- From the settings menu, select Page
-
Expand the Outer Container group and set the border-style to solid
This will show the border around the form. You can adjust the margin above the top border by increasing the margin-top value. If your form is a single page form, you can show a panel insider this border area by following these steps:
To show the Footer Panel (single page forms only):
- From the settings menu, select Page
-
Expand the Footer group and set the panel-footer to true
The buttons on your form will now be shown within a panel footer area. Note that the buttons can no longer be dragged and dropped in the form outline panel and are locked in place.
Showing Icons in FIelds
You can select from over 500 icons to use inside the fields on your form.
-
Click the TextField, TextArea, or Drop Down Field in the Form Outline Panel.
-
In the Field Property Panel, expand the Field Style OverRide Settings Panel
-
Click the Inline Field Icon property to apply an icon to the field
Using Icons in the Submit Button
You can select from over 500 icons to use within your form buttons.
- From the settings menu, select Button
-
Expand the Button Style group
-
Click submit-icon or reset-icon and select an icon from the Icon Library
0 Comments