Article - Customizing Form Style

1. Click on the form to open the Web Form panel.

2. Select Style.


Display Style:

1. On the Style panel, select Display Style.

 

2. On the Display panel,  select the desired display and input styles.


Label Font:

1. On the Style panel, select Label Font.

2. On the Label Font panel,  select the desired font type, size, character spacing, font color and style.

 

Submit Button Style:

1. On the Style panel, select Submit Button Style.

 

2. On the Submit Button Style panel, you can edit the button text and select the desired width, alignment, color and other options.

 

Submit Button Font Style:

1. On the Style panel, select Submit Button Font Style.

2. On the Submit Button Font Style panel,  select the desired font type, size, character spacing, font color and style. If you want to use the same font style as the label font, simple check the Same style as label font option.


Background Color:

1. On the Style panel, select Background.

2. On the Background panel, use the color picker to select the desired background color for your contact form. Check the Enable gradient box to specify the background as a gradient. Click on the color boxes to select the color ranges to fill the page. The colors produced by a gradient changes continuously with position to produce a smooth color transition appearance.

 

 

3. If you want add a background image to your webform, simply click the Change button under Image to select or upload the background image you want to use.

 


Border:

1. On the Style panel, select Border.

 

2. On the Border panel, use the color picker to select the desired border color.

 

3. Use the Width slider to set the border width. You can also enter the numeric value, in pixels, in the text field provided.

4. Use the Padding slider to set the padding settings. You can also enter the numeric value, in pixels, in the text field provided.

5. Use the Corners slider to set the curvature of the corners. This setting is to create rounded corners. You can also enter the numeric value in the text fields provided.

 


Shadow:

1. On the Style panel, select Shadow.

 

2. On the Shadow panel, use the color picker to select the desired shadow color.

 

3. Use the Horizontal offset slider to set the horizontal offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn to the right side of the form; a negative value means the shadow is drawn to the left side.

4. Use the Vertical offset slider to set the vertical offset of the shadow. You can also enter the numeric value, in pixels, in the text field provided. A positive value means the shadow is drawn below the form; a negative value means the shadow is drawn above.

5. Use the Blur slider to customize the blur radius. You can also enter the numeric value in the text field provided. The blur radius defines how big and how much blurred the shadow is. A larger value makes the shadow lighter, and a value of 0 makes the shadow’s edges sharp.

6. Use the Spread slider to customize the spread distance. You can also enter the numeric value in the text field provided. The spread distance makes the shadow bigger (ie. expand) in all directions.

 

 

Changes are auto-saved and will apply automatically. 

 

Published: September 13 2015

Found in Categories