Biology Field Journal – Gravity Forms + Google Maps for WordPress

Turns out this won’t work for what I originally planned but the pattern is sound. You can see the form here and examples of the form submissions here.

You’ll need Gravity Forms (pay but well worth it) and Google Maps for WordPress but the idea should work for all kinds things.

The original goal was to have structured posts from students and the ability to associate those posts with a point on Google Maps.

After turning on the plugins, all the work is done in Gravity Forms.

Initially, make a text entry fields for latitude and separate text field for longitude. Add all the other fields you want in the mix. In this case we added some categories to do with the environment, plant descriptions etc.

Gravity Forms is fairly unique in that it has post elements for WP built in. I added the Post Body and Post Title fields at the bottom. Now we just need to create the content template that’ll mix our variables into the body of the post.

Screen Shot 2014-04-03 at 8.51.24 PM


You’ll notice in the image above that when  you mouse over an element it displays the Field ID – in this case 2. That’s important as to add this field you’ll need to reference both the title and the field ID like so {Latitude:2}.

The image below blends the form entries and the shortcode for the Google Map plugin in a way that’s transparent to the user.

Screen Shot 2014-04-03 at 8.51.53 PM


It’s important to then flip over to the advanced properties of the post form entry and change the visibility to Admin Only. That will keep users from seeing this element in the form.

Screen Shot 2014-04-03 at 8.52.15 PM

Oh yeah, the cheaters way to get latitude/longitude is to go to Google maps and either enter the address or move the map until the place you want is about in the middle. In the URL, highlighted in blue below, you’ll see the lat/long for the Hebrides ( between the @ and the first comma – 56.97835,-7.4873145).

Also, here’s the export of my  Gravity Form if you want to use it as a starting point. gravityforms-export-2014-04-04.xml


Comments on this post

  1. Noodles said on May 23, 2014 at 12:07 am

    You are going about it the wrong way. What you need to do is overload a field type that you are not using (total for example) and instead of that field you bring in an iframe of a wordpress page thats a template , so on it you can have your own php code from top to bottom. And that page thats added with the iframe into the spot on the form will contain the google map along with whatever else you want it to have.

    This way you can have dynamic interaction with the map. I just did a project where you can freehand draw shapes on a google map inside a form field, and I added a save button, so once you are happy with the shape, you save it right there and continue filling out the form. Its more complex than you are doing, go here , signup and login, then on top menu click public registry > add project. and on page 4 or 5 , at the very top you will see radio button to draw map, click it, and map will appear so you can see what I mean. good luck!

  2. Tom Woodward said on May 23, 2014 at 10:32 pm

    Noodles –

    Wrong might be a bit much. Maybe “there are more powerful options you might pursue . . . ”

    I checked it out and your project is certainly slick and far more powerful than what I did.

    I’m guessing you’re doing something with the Google map API to do the saving? I’ll look into it at some point if I have that level of need but if you have or do document how you did what you did somewhere throw a link my way.