Update Your Contact Form: Linked GDPR checkbox, Columns for Options, Success Message Styling – Divi Tuts

The Divi contact module is much more extendable than people give it credit for, but documentation is spread across several posts and support threads. Here are a few lesser known configurations and some of our own simple customizations that can enhance your contact form.

Full Width Contact Fields

This question rears its ugly head on the regular in the support thread. By default, most field types are 50% width. Converting them to full-width so that they span the length of the column is an easy change in the field’s design tab.

Link to Privacy Policy (checkbox)

This nifty trick may help you achieve compliance with the GDPR. Here’s the big caveat. YOU MUST USE THE VISUAL BUILDER. I have never used the visual builder to create or update a page, so this was a learning moment.

So, if you need a link to your privacy policy, simply add a checkbox field type, add one option and enter the text you want. Then add the text you want linked by selecting the link icon and adding the text and hyperlink.

Style Success Message (div.et-pb-Contact-message)

We can personalize our success message content, but not the background, font family, etc. To do so, open up your theme customizer and add something like this:

div.et-pb-Contact-message {
background: #000;
color: #fff;
text-size: 24px;
}

Style or Hide Field Titles

By default, checkbox and radio fields must display the title or label. If you don’t enter anything in the title field, it will simply display “New Field”. Here’s a way to hide the title in the theme customizer. You could also modify the css below to increase the font size or weight.

.et_pb_contact_field_options_title {
display: none;
}

Columns for Radio / Checkbox Options

Do you have checkbox or radio field with a long list of options? They display single file by default, which can lead to a lot of white space, especially if you have four or more options. You can create columns by adding the code below. Go to the checkbox/radio field settings, select the advanced tab and insert the css into the main element checkbox. Adjust the column-count to increase the number of columns. Adjust the column gap to get your desired spacing.

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;