Columns and Dividers Design Features Come To EverWeb’s Contact Form Advanced Widget!

Most websites today include a contact form on at least one of the pages of their site. This contact form can serve a variety of uses and roles such as being a sign up form for the website’s newsletter, a customer feedback form, a survey form and so on. EverWeb makes building the contact form that you want easy and straightforward, whilst giving you amazing creative flexibility at the same time. Using the Contact Form Advanced widget lets you build whatever type of form that you need for your site, and with EverWeb 4.0 or higher, there are a couple of Form Control additions that give you even more design control and flexibility than ever!

Introducing Columns To The Contact Form Advanced Widget
The first of the two new Form Controls is ‘Columns’ which does exactly what its title suggests. For example, you might have a ‘First Name’ and ‘Last Name’ field in your contact form that you would like to see side by side rather than them being displayed on separate lines. Use the Columns Form Control to create this look:

1. First make sure that your First Name and Last Name Form Control fields are listed one after the other in the Contact Form Advanced widget’s Form Controls list.
2. Next, create a new Form Control which will be used to create two columns in the form.
3. Click on the ‘Add’ button below the Form Controls list box.
4. When you add a Form Control to the form, you will need to name it. As the Form Control is going to be used to create two columns on the form, a name such as ‘Two Columns’ would be appropriate.
5. After naming the form Control, press Enter to finish.
6. The next step is to change the ‘Two Columns’ Control Type to ‘Columns’ using the Control Type dropdown menu.
7. The Options List below the Control Type dropdown now displays two parameters that you can change.
8. The first parameter is ‘Columns’, which by default is set to two columns, which is what we want so we won’t change this.
9. The second parameter is ‘Spacing’ which adjusts the spacing between each column. The default is set at 10 but we can change that to another value, e.g. 20.
10. You might notice that there doesn’t appear to be any effect on the contact form displayed in the Editor Window. This is because the ‘Two Columns’ Form Control is at the bottom of the Form Controls list. We need to move it to where it is needed.
11. Drag and drop the ‘Two Columns’ Form Control directly above the ‘First Name’ Form Control.
12. You will now see that the two fields, ‘First Name’ and ‘Last Name’, now appear in two columns.
13. Tto adjust the spacing between the two fields, click again on the ‘Two Columns’ Form Control and adjust the Spacing parameter in the Options List.

When you use the Columns Form Control, note that it only affects the fields immediately below it, so in our example as the Column count was two, only the two columns below the ‘Two Columns’ Form Control were affected. After that the column count automatically resets to a single column.

Adding Dividers To Your Form
The second new Form Control introduced with EverWeb 4.0 is the ‘Divider’ Form Control which allows you to partition your contact form. Dividers can be styled in different ways so that you can create the look that you want on your site. In the following example we are going to add a Divider below the ‘Last Name’ Form Control in our form.

1. First add a new Form Control to the Form Controls list using the Add button.
2. Name the Form Control in a way that describes its function, for example, ‘Divider One’.
3. Press Enter when finished.
4. Now change the Control Type using the dropdown menu to ‘Divider’.
5. You will now see in the Options List that there are three parameters that you can set.
6. Use ‘Style’ to set the type of Divider line you want to use: Solid, Dashed or Dotted. Click on the Settings button to select the type of line you require. Any changes you make will appear in the Contact Form in the Editor Window.
7. The ‘Size’ parameter sets the line thickness and is set to ‘1’ by default. Change the number as desired by clicking in the field, updating the number, then pressing Enter to finish.
8. The final parameter is ‘Color’. This uses hex codes to define the color, for example, #000000 represents black and @ffffff represents white. If you know the hex code you can just click on the field and enter the code.
9. Don’t forget to include the hash (#) symbol when adding in your hex code!
10. If you don’t know the colours hex code, click on the Colors button in the Toolbar.
11. Click on the Color Sliders button in the Color Picker.
12. Adjust the sliders until you have the color that you want, or click on a color swatch from your saved color swatches. You will see that the hex code field value changes as you change your selection.
13. Copy the hex code value of the color you want to the Clipboard, then paste it in to the Color field of the Divider Form Control. Alternatively, enter the value of the hex code from the Color Picker directly in to the Color field. Again, don’t forget the # symbol!
14. Press Enter to finish then close the Color Picker if you no longer need it.
15. Drag and drop the ‘Divider One’ Form Control directly after the ‘Last Name’ Form Control field. Your Divider will now be in place!

You have now created a two column section to your form with a dividing line separating these fields from the rest of the form!

Using EverWeb’s new Columns and Divider Form Controls is an easy way to add more style and flair to your contact form!

If you have any questions relating to EverWeb’s Contact Form Advanced widget, or anything to do with EverWeb, we would love to hear from you in the Comments Section below!