Date picker in Divi Contact Form

Divi is one of the most used themes on WordPress and one of the latest updates introduced a ton of new features for the Contact Form module. However a simple yet useful input type missing is a date picker. Might not be used by the masses, but it’s very useful for some cases. For a recent project I needed to build a contact form that would work as a booking request form, so a date picker field would be a valuable addition to the arrival and depart date fields. I have developed a plugin that allows you to do this and also has the extra option of enabling a time picker.

With this plugin enabled, what you need to do is give a unique Field ID to your field, when editing the field you want to convert to a date picker, in the Contact Form module. For my project I used ‘date-arrival’ and ‘date-departure’.

Then you’ll use those IDs to tell the plugin which fields to convert to date pickers. Go to Settings > Date Time Picker and add the following to the ‘Selectors’ field:

input[data-original_id='date-arrival'],input[data-original_id='date-departure']

Basically you’ll need to add input[data-original_id='your_field_id'] to the selectors field and repeat that if you have more fields. If you copy/paste the code from here, make sure to re-write the ‘quote’ signs, since they might get changed in the copy/paste.

When you save these changes you should have your contact form fields converted into date pickers.

Here are some screenshots of how I implemented the date and time picker in the field.

Not so hard, right? Hopefully Divi will include a date-picker or date-time-picker option for the contact form fields at some point, but until then these workarounds are easy enough to implement.

WordPress Customization Services I can vouch for

I’ve been working with WordPress for 10 years now and although it’s a powerful tool that allows you to do almost anything, there’s always some small detail you can’t customize or a feature that you can’t find in a plugin. That’s why WordPress customization services are needed.  I did a lot of customization services and still do once in a while, but I had the chance to work with some developers that are good and reliable that I can recommend. Here’s a list of the top WordPress Customization services I recommend:

1) WPKraken Team

I worked a couple of times with WPKraken, a reliable and trustworthy team of in-house WordPress experts with years of experience that can do everything, from the smallest task to bigger projects. They charge a fair $50 flat hourly fee and have a platform that makes it easy to describe your needs and get a quote. I can vouch for this team and I strongly recommend them. Some of the things they can do for you:

  • WordPress Theme and Plugin Installation
  • CSS/Visual Fixes
  • Security Improvements
  • Website Audit
  • Website Migration
  • Plugin Customizations
  • Theme Customizations
  • Logo Design

2) Envato Studio

Envato Studio is site in the same network of Envato Market, where I exclusively sell my plugins. So it isn’t a surprise that I would also recommend this service. This platform allows hand-picked freelancers to provide their services, that range from design, to development. The platform displays the ratings of the different service providers so you know what other users think of them. Prices start at $50 and these are some of the services you can find:

  • Plugin and Theme Instalations
  • Plugin and Theme Customizations
  • Server Migration
  • WordPress Multisite/Network instalation
  • SEO Services
  • Full WordPress Website Setup

How to add a World or Country Map to Wix

There are a lot of reasons why you might want to add a map to your Wix website. You might want to display where you’ve traveled, the locations of the different offices for your business or who to contact on a certain state or region.

I developed the Interactive Maps Generator script, that allows you to create interactive maps that you can embed on your Wix website without the need to upload any file. It generates the maps using the Google Geochart API, which generates vector maps that work on all modern browsers. The generator costs $19, comes with 6 month support if something is not working and you can generate as many maps as you want for your website. You can choose to display a world map or any country map, including the US divided by states. The map code generated by the script will also work on Squarespace and other website builders that allow you to embed javascript code.

Creating your Map

After you download the zip file from codecanyon with the Interactive Maps Generator, unzip it and open the index.html file. Make sure you unzip the file, because if you open the index file from within a zipped folder, the generator won’t work properly. Once you have the generator working, follow the instructions on screen. Here’s a quick youtube video going showing you how to do it.

You’ll be able to select which map to display, if you want to colour regions or add markers, set an action for the click events and customize the map colours. You might need to generate a Google API key, depending on the type of map you’re building.

Get the Embed Code

When your map is ready, you can copy the content of the ‘Javascript Embed Code’ textarea.

Interactive Maps Generator Screen

This is the code you’ll add to your Wix website.

Paste the embed code on your Wix website

When you’re editing the page where you want to add your map, you can click theĀ ‘Add’ option on the left side of the Editor. Click on the option ‘More’ and select the ‘HTML Code’ option. When the window for the HTML settings display, select the ‘Code’ option and add the map code you previously copied to the text area.

You can read more information on how to add HTML code in the Wix support site.

Once you update the code, you should be able to see the map and interact with it when the page is published or in preview mode.

Quick Video

Map Examples

Some examples of maps that you can create with the Generator.

US Map divided by states

US Map Placeholder
US Map

World Map

All Countries Placeholder
All Countries

World Map with Markers

Map Markers Placeholder
Map Markers

Contact Me

Feel free to contact me leaving a comment below for any pre-purchase questions or write me through codecanyon, once you have the script.