6 Steps to a Divi Contact Form with Convenient Populated Country and Time Zone Drop Down Lists

by | Nov 10, 2020 | WordPress | 5 comments

I once had a requirement to create a Divi contact form that collects the person’s contact information. In June of 2018, ElegantThemes.com had 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.

How to Import the Divi Form Module

If you are not familiar with how to import a Divi Builder Library module into a page, here is a tutorial.

1. Download Divi Contact Form with Pre-Populated Countries and Time Zones

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.

 Divi Builder Layout – Contact Form with Populated Country and Time Zone Drop Down Lists

2. Edit the page where you want the form imported

Open the page where you want the form imported and in the Visual Builder. Click the ellipsis icon.

6 Steps to a Divi Contact Form with Convenient Populated Country and Time Zone Drop Down Lists 1

3. Access the Portability menu

Access the Portability menu by clicking the icon with the up and down arrows.

6 Steps to a Divi Contact Form with Convenient Populated Country and Time Zone Drop Down Lists 2

4. Set up the import and options

Select the “Import” tab. Unless your page has no other content on it, you’ll want to uncheck the “Replace existing content” checkbox. If you want to download a backup before you import the form, choose that option. Then click the “Choose file” area.

6 Steps to a Divi Contact Form with Convenient Populated Country and Time Zone Drop Down Lists 3

5. Select the unzipped JSON file

In the file dialog that appears, navigate to the folder where you extracted the JSON file, select that file, and import it.

6 Steps to a Divi Contact Form with Convenient Populated Country and Time Zone Drop Down Lists 4

6. Import the Divi Builder Layout

Watch this video to see the rest of the import sequence showing what it should look like in your Divi Library once you’ve imported it.

You can save this basic import into your own Divi Library as its own module and reuse this over and over again in all of your Divi contact form layouts. Now, add your other inputs into your form and save the page.

Updating the Options List in the Form

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, import the form into a page using the instructions above. Add or change the entries. Then save the form into your Divi Library so you can then reuse it on your current site, or export and use it on other sites.

The following two tabs change content below.
Rob Watson is an online business coach and marketing consultant. Beginning in 1996 as a self-taught web designer, he has created websites for everyone from small business owners to multi-national companies. Rob now provides one-to-one coaching for digital business website owners. He is the co-organizer of the West Orlando WordPress Meetup and a WordCamp speaker.

5 Comments

  1. Ernest Burden

    Thank you for this.
    Took me a second to import correctly until I realized I had to import as a page not to the Divi library directly. (you get the can’t import in this form error.)
    Now I’ve got it in, I think I need to add country phone codes to all the entries for my clients form.
    My turn to slog. Thanks again.
    ernie

    Reply
    • Rob Watson

      You’re welcome! Glad it works for you.

      Reply
  2. Chris

    Love the idea. Can’t get the json to import into Divi Library or into new page. Using latest Divi as of 10th Nov 2020. What am I doing wrong?

    Reply
    • Rob Watson

      Hmm. Perhaps something changed between when I made this and now. I’ll do some tests later today and if I can’t get it working, I’ll make a new file.

      Reply
    • Rob Watson

      The file is still fine, but I realized that the instructions could have been clearer for performing the import, so I’ve updated the post with more detail. I hope it helps!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Shares
Share This