Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Blog
  • Support
  • Login
  • Get Formidable Forms

Steph Wells / Last Updated June 23, 2022

How to Create Maps from Form Entries with MapPress

MapPress is a free WordPress plugin that creates Google maps. You may have a form that collects address information that you want to use to create WordPress maps.

How To Create Maps from Form Entries with MapPress

This is handy with business listings, real estate listings, and many others. Special thanks to Chris at MapPress for providing this tutorial (current as of June, 2022).

1. Install Plugins

This guide uses two plugins:

  • MapPress
  • Formidable Forms Pro

2. Create your WordPress Form

First, you need a WordPress form to collect the addresses you want to use in your maps. You can use any number of fields for your address that you would like. One field for the whole address, or multiple fields to separate out the city and state.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

Do you want to embed a map to list business locations, showcase online directories, or display club members? Using Formidable Forms and MapPress, it’s easy to map multiple locations and display form submissions as markers on a map.

3. Setup a custom post type for your Map Markers

MapPress pulls data from posts to display them on a map. Because your main post types may be used by different features of your theme, it’s sometimes best to create a completely new custom post type. I’m using the Custom Post Type UI plugin to add a post type called “Map Locations”. Notice the post type slug “location” – we’ll need this in Step 5.

4. Create your form with address data

Now swtich back to Formidable and Create a new form for adding markers to the map. Include all the form fields needed to build a beautiful business listing. For example, include an image upload field, fields for phone numbers, business hours, and links to social media accounts.

Most importantly, include address fields which will be used to place a map pin.

5. Set your form to create posts with custom fields

This is the critical step! In your form actions, add an action to create a new post. In the Post Type dropdown, select the Map Locations post type you created earlier.

Select the field for the post title and set the post status field to “Create Draft”. Set the other options as best suits your form.

Now match (or ‘map’) the custom address fields used in the form to the standard MapPress map fields. This will pass the form fields to MapPress and create a map when the form is submitted. For example, here the fields ‘city’, ‘state’ and ‘zip’ are mapped to ‘Address line 1’, ‘Address line 2’ and ‘Address line 3’ in MapPress, along with a ‘Title’ field so users can enter a title for the map marker:

6. Setup post moderation

Your 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. This email should inform site admin when a new map marker has been submitted. Administrators can check the submission and either publish the post or trash it as appropriate.

7. Set up a MapPress Mashup

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 ‘mashup’ map. The mashup will combine all the markers into a single searchable and filterable map.

Create a new post titled “Mashup Map”. If you’re using the Gutenberg editor, add a MapPress Mashup block to the post, and select the “Map Locations” post type we created earlier, in the ‘query’ section of the mashup block settings:

If you’re using the Classic editor, just enter the shortcode below in the post body. Notice that the query attribute is telling MapPress to show only the post type ‘location’ – that’s the post type slug we created in step 3:

[mashup query="post_type=location"] 

8. Submit forms to map multiple locations

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 5. You should see the new map markers (don’t forget to refresh the page in your browser).

Bonus: Add Filters, Styled Maps, 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!

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. deeluuxe says

    January 24, 2012 at 10:21 am

    Thanks a lot for this post!
    I´ve tried to display more than one marker and already extended the functions.php.

    Unfortunately only one marker is being displayed. On the individual display I placed the following:

    Before the content:
    [form_to_mappress

    Content:
    address1= "[81] [82],[84], [85]" title="[83]" body="testing 1-2-3 id=[id]"

    After the content:
    width=600 directions="google"]

    Questions:
    - What am I doing wrong? Maybe add a counter so variables address1, address2, address3 are being generated independent from [id], because when deleting an entry this display might be lost?
    - can I set individual titles and bodys for every entry?
    - I´d like to have different icons for some entries... 😉

    Hope this can be done with this solution - it´s my goal to display up to 100 entries on one map. Also contacted Chris (developer of MapPress) for extending the plugin.

    • Lynn Rasmussen says

      February 7, 2012 at 11:25 am

      Deeluxe and others wanting a global/or map mashup,
      Here is the link for my feature request with Chris Richardson, the developer of MapPress. http://wphostreviews.com/forums/topic/mappress-and-formidableforms-pro-pre-purchase-question.
      Maybe if we all ask nicely and promise to support his premium plugin, he'll move it to the top of the 'to do' list? Add your request to my forum request at the link above.

  2. lynnr321 says

    January 25, 2012 at 7:01 am

    Stephanie,
    The Pro version of MapPress includes a Map Mashup. Yeah! Just what I've been waiting/looking for! Do you see any reason why the mashup feature wouldn't work with FormidablePro? Would it be possible to get a demo of how to do that? Is the plugin code any different than shown above?
    I am currently using GoogleShortcode with my forms, as previously suggested, as the mashup/global feature is not nearly as straighforward as this one, I'd like to change it. Any tips, shortcuts or things to watch out for when making the switch?

    • Stephanie Wells says

      January 25, 2012 at 7:34 am

      @lynn, We are not MapPress experts and have not used their pro version. You're welcome to try it out and let us know how it goes.

      • lynnr321 says

        January 25, 2012 at 1:58 pm

        @Stephanie- Working on it with Christopher (MapPress), but as you know my coding skills, although gaining daily, are still at a novice stage. If I can get it to work, I will post it back here. Stubborn is a quality, right?
        Wouldn't this be an awesome 'Add-on' for FormidablePro? 🙂 Thanks and stay tuned...

    • Rebecca Stevens says

      March 13, 2012 at 8:26 pm

      is there anyone who has a demo on how the mash-up will work with mapress?

  3. Jeff Smith says

    February 7, 2012 at 12:37 am

    Where exactly do you put the shortcode for this feature? (see below) How do you copy the code into a new plugin? And/or where exactly does it go inside the functions.php file (between what brackets, etc.). Tiny HTML experience here...

    Add a new shortcode. Copy and paste the following code into a new plugin or your theme functions.php file. This doesn’t need any modification or changes.

    Thanks!

    • Stephanie Wells says

      February 7, 2012 at 4:44 pm

      Instructions updated above with a little more detail.

      • Jeff Smith says

        February 9, 2012 at 12:43 am

        OK, great thanks. It looks like I got it, but now it's not reading the addresses from the form and I'm getting a blank blue google map. 350=address, 349=city, 348=state, 351=zip.

        [form_to_mappress address1="[350], [349], [348], [351]“]

        I also tried just doing one field for the whole address but got the same blue google map.
        [form_to_mappress address1="[344]“]

        I have this is in the Dynamic Content of the Custom Display. Am I missing a connection somehow?

        Thanks!

        • Jeff Smith says

          February 9, 2012 at 8:52 am

          I took out the brackets from the code but it still did not work.

        • Stephanie Wells says

          February 10, 2012 at 11:23 am

          Please try adding the shortcode directly on a page without the custom display for starters. Some addresses may not be recognized without the exact formatting that MapPress is expecting.
          [form_to_mappress address1="500 chestnut st, phildelphia“]
          (Replace the address with the one you are trying to create a map for.)

        • Rebecca Stevens says

          March 13, 2012 at 8:53 pm

          After less than an hour I found this plugin "Walk Score" http://wordpress.org/extend/plugins/walk-score/ and it's working great with the formidable pro, It has a mash-up functionality.

  4. alexd816 says

    March 4, 2012 at 8:50 pm

    Hi Stephanie,

    The shortcode appears to work for me on a page without the custom display (ie using the format [form_to_mappress address1="500 chestnut st, phildelphia“]), but if I copy and paste the same shortcode with the hardcoded address (or address made from shorcodes of my form address fields) in the custom display.

    Am I doing something wrong?

    Thanks!

    • alexd816 says

      March 4, 2012 at 8:51 pm

      *but it does not work if I copy and paste the same shortcode with the hardcoded address (or address made from shorcodes of my form address fields) in the custom display.

      • alexd816 says

        March 4, 2012 at 8:52 pm

        It just shows the form_to_mapress shortcode on the post using the dynamic display

        • Steve says

          March 5, 2012 at 8:55 am

          Please add filter=1 to your custom display shortcode (not the form_to_mapress shortcode). This should tell your custom display to interpret [ ] as a shortcode rather than just text. For example: [display-frm-data id=x filter=1]

  5. dazmaster9 says

    April 13, 2012 at 3:53 am

    i bought F.Pro yesterday, great product, bought mappress pro last night, seems good (although not got it working yet.

    ok, so in my CF of my CT i have:

    id 96 = address (street), 97 = town, 98 = region, 99= country and 100 = postcode.

    i have set Mappress settings to include my CT, BUT, in the mappress settings it says "which field to use for address, well, i have 5, but can only select one, do i need to create a new field that contains a merge of the address fields for mappress to use then in its sidebar widget? thoughts? (also not sure how to create a merged hidden field, ideas?

    also, i then have this shortcode in my post (hard coded for now):

    [form_to_mappress address1="[99]" title="Nice map"] - just get blue map of death

    also tried

    [form_to_mappress address1="[96],[97],[99][100]" title="Nice map"]

    no joy, and that isnt working as when i see the map title it shows the ids so the comma is screwing around with it.

    i am really stumped now. I just want a dynamic shortocde on my posts that a user creates front end 🙂

    boo hoo

    anyone got this working

    Thanks
    Darren

    • Stephanie Wells says

      April 13, 2012 at 7:17 am

      When using the shortcode with ids, it MUST be inside a custom display, not on a post page.

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a Calculator in WordPress: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How to Require Email to Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • Blog

Copyright © 2022 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews