I recently had a requirement to create a Divi contact form that collects the person’s contact information. In June, ElegantThemes.com added some pretty neat conditional form handling to its flagship theme, Divi. I’m a fan of the Divi theme and its incredible drag-and-drop user interface for quickly creating sites and moving on with bigger business concerns. I knew that creating this form was going to be a breeze.
And it was.
Everything was pretty great with building the Divi contact form. Then I got to the part where I needed to allow the user to select their country name and time zone name from a drop down. The drop down was easy enough to create, but I had to populate it one option at a time. There are over 200 countries and over 400 individualized time zones (organized by continent/country/city).
I asked around, but nobody knew of an easy way to instantly populate the Divi contact form drop downs. There is no import function to grab the data from a .csv file and import the values all in one shot. The overall consensus was that I would be stuck having to do this all by brute force copy/paste.
My Work Is Your Gain
But you, my friend, need not do the same. I’m passing along the benefits to you after several hours of copying and pasting all these country and time zone values into individual option fields in Divi Builder’s contact form control.
Below is a link to the Divi Builder layout export of this Divi contact form. It’s just the country and time zone fields. But at least you’ll be able to use it as a starting point for building the rest of your Divi-based contact form.
If you are not familiar with how to import a Divi Builder Layout, here is a slick tutorial that shows you how to import a Divi Builder layout.
The file below is a .zip file. You’ll want to uncompress it to the .json file format before attempting to import it as a Divi Builder layout.
The data from which I built this Divi contact form library is found at https://timezonedb.com/download. If you ever see a need for an update, just download the data from that URL. Then, add or change the entries in your Divi Library.
Here is what it should look like in your Divi Library once you’ve imported it. You can reuse this over and over again in all of your Divi contact form layouts.
Latest posts by Rob Watson (see all)
- How to Fix Divi 4.0.6 Visual Builder Problems on Pantheon.io Hosting - November 26, 2019
- Straighten Your Priorities With the Time Management Matrix - November 5, 2019
- Website Accessibility Case Upheld By Supreme Court - October 7, 2019
- Why Local Business Listing Accuracy is Important - October 1, 2019
- Improve Your Keyword Search With These 3 Tips - September 26, 2019