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;
I tried to hide the field title but it didn’t work. Where do I put that code if I want to hide just one field title?
I apologize, but I don’t have a way to hide only one title. It should work to add the above code to the theme customizer to hide all titles.