After adding a form to your landing page or editing it in a subscription form, you can adjust the settings in the Landing Page Designer or Form Designer to further customize your form. One of the ways you can do that is by adjusting the style settings. You can use available styling options to style fields, labels, placeholders, and buttons as you want them to appear on your landing page. This section provides procedures to edit the following:
A. Change the Field styles
To change the field style:
- In the editing area, click the form item to display the Form settings in the designer’s right pane.
- Scroll down and click the Field Styles drop-down menu to display the style settings. You can set the following:
- Field Spacing: enter the spacing or use the up and down arrows to edit the amount of space above and below the fields.
- Field Background Color: select background color for your field.
- Border Width: enter the width or use the up and down arrows to edit the width of the field's border.
- Border Radius: enter the radius or use the up and down arrows to edit the field shape between a rectangle and a circle.
- Border Color: select the field's border color.
- Field Font: select a font for your field.
- Field Font Size: enter the size or use the up and down arrows to edit the font size for your field.
- Inner Padding: enter the size or use the up and down arrows to edit how much padding you would like to have within your field.
- Font Color: select the Field's text color.
- Field Decorations: select whether your field's text is in Italics, Bold, or Underlined (or all three).
B. Change the Label styles
To change the label style:
- In the editing area, click the form item to display the Form settings in the designer’s right pane.
- Scroll down and click the Label Styles drop-down menu to display the style settings. You can set the following:
- Hide Label: when selected, hides the form label.
- Label Font: select a font for your label.
- Label Position: select Top or Left for the position.
- Label Font Size: enter the size or use the up and down arrows to edit the font size for your label.
- Label Spacing: enter the spacing or use the up and down arrows to edit the space between the form field and the label.
- Label Font Color: select the label's color.
- Asterisk Color: select the asterisk's color.
- Label Decorations : select whether your label is in Italics, Bold, or Underlined (or all three).
C. Change the Placeholder styles
To change the placeholder style:
- In the editing area, click the form item to display the Form settings in the designer’s right pane
- Scroll down and click the Placeholder Styles drop-down menu to display the style settings. You can set the following:
- Placeholder Font: select a font for your placeholder.
- Placeholder Font Size: enter the size or use the up and down arrows to edit the font size for your placeholder.
- Placeholder Font Color: select the placeholder's color.
- Placeholder Decorations : select whether your placeholder is in Italics, Bold, or Underlined (or all three).
- Click Apply Field Styles to apply the same style you've set for the Field styles of your form.
- Click Apply Label Styles to apply the same style you've set for the Label styles of your form.
D. Change the Button styles
To change the button style:
- In the editing area, click the form item to display the Form settings in the designer's right pane.
- Scroll down and click the Button Styles drop-down menu to display the style settings. You can set the following:
- Button Color: select a button color from the color palette.
- Label Color: select a button label color from the color palette.
- Border Color: select a button border color from the color palette.
- Label: enter the text that you want to be displayed on the button.
- Font Family: select a font for your button's label.
- Font Size: enter the size or use the up and down arrows to edit the font size for your button's label.
- Decorations: select whether your button's label is in Italics, Bold, or Underlined (or all three).
- Alignment: select Left, Middle, or Right alignment for the button.
- Button Width: select Fit to Text, Full Width or Custom for the button width. When you select Custom, you can enter values for Button Width and Button Height.
- Label Padding: click the lock icon to display these options: Padding Top, Padding Bottom, Padding Left, and Padding Right, then enter the row padding or use the up and down arrows to edit the padding from 0 to 2000.
- Distance: enter the distance or use the up and down arrows to edit the number of pixels between the button and the form field.
- Border Width: enter the width or use the up and down arrows to edit the button's border width.
- Corner Radius: enter the radius or use the up and down arrows to edit the button shape between a rectangle and a circle.