Video Transcript:

To use the features shown in this video, you will need to use EverWeb 4.0 or higher, for macOS, or Microsoft Windows.

EverWeb’s new Columns and Divider controls enable you to build even more sophisticated Contact Forms for use in your website.

In this video we will be using these features in a contact form that we have already created using the Contact Form Advanced widget.

If you are new to creating a contact form in EverWeb, you will hear about Controls a lot of the time. A Control is simply a field that you add to your contact form. A control can have different attributes. This gives you a lot of flexibility, so you can design the contact form exactly how you want to.

In this example, our contact form includes a first name and a last name control. Both are TextBox type controls.

As you can see in the example, the fields are listed one beneath the other, but I would like them to be displayed side by side.

I can use a Column Control to achieve the effect I want.

Start by adding a new control to the contact form by clicking on the Add button.

Add a label that describes what the Control does e.g.Two columns.

Press enter when finished.

With the control still selected, change the Control Type dropdown menu to Columns.

In the Option List below the Control Type, you can set the number of columns you want. The default is set to Two which is what we want.

Next move the ‘Two Columns’ control up the list to be immediately above the First Name field.

Notice that the Columns Control works only on the Controls directly underneath it. As the number of columns is set to two, only the two controls after the Two Columns control will be affected.

In this case, the First Name and Last Name fields are the two controls directly underneath the ‘Two Columns’ control. After the two columns have been created, the form then defaults back to one column again.

If I want, I can change the spacing between my First Name and Last Name fields by changing the Spacing field’s value in my Two Columns Control.

In addition to using the Columns Control, I may want to separate the first name and last name fields from the rest of the form. I can use a Divider control to do this.

Click on the Add button again and call the Control Divider 1.

Press Enter when finished.

Next change the Control Type to Divider.

Move the Divider 1 control to underneath the Last Name field. This will create a separator between the name fields and the rest of the form.

Now use the fields in the Options List to style the look of the line.

To change the color of the divider line, you can enter the color's hex code that you want. Alternatively, click on the Colors button in the Toolbar. The Color Picker will be displayed.

The Color Picker will be displayed. Click on the Sliders icon if the color sliders are not visible. Now either use the sliders to select the color you want, or use a saved color from the color swatches below the sliders.

When you use the sliders, or choose a color swatch, you will see the color displayed in the big color swatch area.

Once you have the color that you want to use, select the code in the Hex Code field then copy it to the clipboard.

In the Color field, highlight the existing color and replace it with the hash symbol, then paste in the HexCode from the Clipboard.

After completing your contact form, preview, or publish your site to test.