Using Formidable Forms and MapPress, it’s easy to map multiple locations and display form submissions as markers on a map.
Before You Begin
If you’re using Google geocoding, you’ll need a second API key just for the WordPress admin. This key can be optionally secured by IP address, and it won’t be visible to site visitors. You may also need to enable Google’s Geocoding API for your new key. Please see Google’s frequently asked questions for information about how to enable/disable specific APIs. Create your new key and enter it in the MapPress settings in the ‘geocoding’ section.
If you’re not using Google for geocoding, you can skip this step.
Step 1 – Create a custom post type for map locations
MapPress pulls data from posts to display them on a map. So we’ll need a form that can create posts each time it’s submitted. Because your main post types may be used for other purposes, it’s often best to create a completely new custom post type.
Here’s an example post type “Map locations”, created using the Custom Post Type UI plugin. Notice the post type slug “location” – we’ll need this later.
Tip: enable custom fields in the “Supports” section. This will let you see the custom fields created by Formidable.
Step 2 – Create a form
Now switch back to Formidable and Create a new form for adding markers to the map. Include at least the following fields:
- Title
A title is needed for each form submission. - Address fields
Enter one or more address fields using Formidable text fields. Note: the Formidable “advanced address” field will not work because it is unable to save its data to a custom field.
Here’s an example form to let customers enter their address. It includes a “Name” field and a single “address” field:
Step 3 – Set form to create posts and add custom fields
This is a critical step: in the form actions, add an action to create a new post:
Make the following settings:
- Post Type
In the Post Type dropdown, select the “locations” post type you created earlier. - Post Title
Select the “Name” field your created earlier for the post title. - Post Status
Set the post status field to “Create Draft”. - Custom Fields
All map-related fields (such as address, city and state) must be saved into custom fields. For our example, we’ll save our Formidable “Address” field into a custom field named “fulladdress”.
Step 4 – Set up form moderation
The form action sets the post status to draft, so now we need a method to approve the draft submissions. The simplest method is to setup an email notification to request moderation. Administrators can check the submission and either publish the post or trash it as appropriate.
Add a “Send Email” form action to the form, and set the recipient, subject and message. Here’s an example:
Step 5 – Set up MapPress
Now that we have a Formidable form created, we need to set up MapPress to generate a map whenever a form submission creates a new post.
In the MapPress settings, go to the “Generate Maps from Custom Fields” section and make the following settings:
- Field mapping
Here we match up all of the address-related custom fields with one of the standard MapPress fields. MapPress includes fields for multiple address lines, city, state, etc. For our example, we only have one custom field (“fulladdress”) so we’ll match that to the MapPress field “Address line 1”. - Post types
This setting tells MapPress which post types to watch for. We need to select the “location” post type created earlier. - Overwrite
MapPress will normally re-generate the map for a post whenever the post is published or saved. If you plan on manually editing the maps after they’re created, uncheck it.
Step 6- Create a mashup map
When a form is submitted, Formidable will create a post for the form, and MapPress will automatically create a map attached to that post. You can see the attached map in any post, by bringing up the MapPress map picker and looking for a map named ‘automatic’.
We’d like to combine all of these individual maps into one big ‘mashup’ map. The mashup will combine all the markers into a single searchable and filterable map. Create a new post titled “Mashup Map” for this purpose.
If you’re using the Gutenberg editor, add a MapPress Mashup block to the post. in the ‘query’ section of the mashup block settings, select the “locations” post type we created earlier :
If you’re using the Classic editor, enter the shortcode below in the post body. The query attribute is telling MapPress to show only the post type “location”, the post type slug we created in step 3:
[mashup query="post_type=location"]Step 7 – Try it out
Now it’s time submit a test location to see if your hard work has paid off. Remember that your form submissions will not add a marker to the map immediately. First the site admin will receive an email and the post will need to be approved.
As you approve the posts, check the Mashup Map post we created in step 6. You should see the new map markers (don’t forget to refresh the page in your browser).
If you don’t see your locations, here’s some things to check:
- Go to a post created by Formidable and check that it is writing the form fields into custom fields in the post. If you don’t see the custom fields panel in the post, check the custom post type allows them (it’s a separate setting in the CPT UI plugin). Also, if you’re using Gutenberg you may need to enable the custom fields panel (three dots menu -> preferences -> panels -> custom fields).
- Try entering a post manually, without Formidable. Enter a value in the custom field you configured in MapPress (“fulladdress” in our example) and see if MapPress creates a map for the post.
Bonus step – Add filters, map styles, custom Markers and more
Using the MapPress settings, it’s easy to add filters by categories, tags, taxonomies, or post type. You can also make your maps look professional by adding map styles, custom markers, and thumbnails for featured images. See the MapPress Documentation for details!