Video Transcript:

EverWeb’s Contact Form Advanced Widget has been updated in version 2.7 adding three new form controls and a fully customisable Submit button.

The three new controls: Header 1, Header 2 and Description allow you to easily add sections to your contact form giving you greater design flexibility.

Adding a header or description control to your contact form is easy.

First add the Contact Form Advanced widget to your page by dragging and dropping it from the Widgets tab if you haven’t done so already.

With the widget selected, go to the Widget Settings. In the Form Controls section, click the Add button to add a new form control. Enter the text that you want to use for the Header or Description as the form control label. When you have finished, press Enter.

With the form control still highlighted, click on the Control Type dropdown menu and select either Header 1, Header 2 or Description depending on which you want to use.

You’ve now created a header or description control.

You can add in more than one header or description control to your form e.g. you may use one Header 1 form control as the title of the Form and multiple header 2 form controls acting as section headings within the form.

To change the order of the controls in the list, just drag and drop the control to its new location.

If you need to edit the controls’s text just double click on the control and edit the text. Press enter to finish editing.

It’s recommended that you have the option Edit, Spelling, Check Spelling While Typing set ON as this will flag any spelling mistakes as you type in the control.

The Control Instructions/Tip feature allows you to add instructions, hints or tips on how to complete the control e.g. in our form, if a person does not want to state their gender, the Control Instructions text advises the user to select the not applicable response.

You can customize the headers, description and Control Instructions using the Fonts and Styles section of the widget. Click on the Fonts button for the Form Control that you want to customize and use the Fonts Panel to style the control as you want.

The Contact Form Advanced widget also includes a fully customizable ‘Submit’ button.

If you use the default button, set the text that you want to see in the button using the Submit Caption field and set the alignment of the button within the width of the form to left, center or right aligned using the Alignment dropdown menu.

You can also use your own Submit button images by checking ‘Use Custom Image Button’. Use your own images for Normal, Image Over and Image Down states using the Choose button for each state and selecting the image file that you want to use.

The size of the custom button can be altered using the Width and Height fields. When using these fields remember to consider the buttons proportions when setting its dimensions.