Gravity Forms: Exploring a Design Pattern


creative commons licensed ( BY-NC-ND ) flickr photo shared by clement127

One of the things we use a lot is what I’ll call templated submissions using Gravity Forms.

It’s a solid performer across a variety of activities, disciplines, and instructor technology comfort levels.

Costs/Benefits

  1. The content is guided/scaffolded so you get consistently constructed products (core elements are there and presented in a consistent manner) in a way that never quite works out with free form entries.1

    Want to make sure students apply four lenses of analysis to a website review and end up with consistent titles and formatting? This is the type of construction where forms really help.

  2. Often this pattern is used as a way to get the advantage of creating web content without having to give students their own usernames/blogs/etc.2 It does reduce that overhead and makes good sense in situations where a full blog or authoring rights to a common blog may be overkill.

  3. One of the main advantages of this type of pattern is ending up with a visible, interactive, and useful aggregation of content. Make that matter. When these assignments have a larger purpose and audience things get far more interesting.

A Few Examples

These are live classes so please don’t submit entries at these sites.

  • PSY 323< - focused on student submission of video/presentations aligned to chapters in the textbook. The form is pretty structured with a variety of required form elements. /li>
  • Sociology – analyzing examples of greenwashing in our society. This form is pretty open and allows for a lot of student choice.
  • PSY 795 – focused on article summaries. You can see more formatting of headers etc. in the final product using the content template option in Gravity Forms. It’s an easy place to mix form entries and HTML elements.
  • Field Botany– a dichotomous key example I’ve referenced before. This example leads you through a custom interface which then populates hidden fields in the Gravity Form via the URL. I include it again because it shows how much flexibility you have in terms of building exactly the kind of experience (and getting exactly the kind of information) you want.

Dealing with Embedding

Since we’re playing in WordPress MultiSite, the old iframe embed issue often rears it’s head in this process.3 In the PSY 323 class above we had three main places students were putting their projects- YouTube, Screencast.com, and Prezi. YouTube supports oEmbed so we can embed that content via a naked URL. That’s nice and easy.

Screencast.com and Prezi are more of a pain and we’re somewhat limited by the capabilities of Gravity Forms.

I tried a variety of paths to do this in a pretty way but ended up settling for something functional but less elegant than I’d like.

Failed path one -> create multiple post body content templates and use conditional logic to display the right one for the host. Sadly, you can only have one Post Body element.

Failed path two -> create some multi-step content templates in custom fields that wrap the needed HTML around the user submitted URLs and then put the custom field in the post body. This failed entirely. The custom fields kept coming up empty. I’m not sure why and as it was still a subpar answer I moved on.

Opted out path three -> I could have created a separate form for each submission type and then either daisy chained some forms together or linked to the form directly based on user selection. This would work fine but gives me three separate forms to mess with if there are changes. It’s not a good pattern given the way that expands with each course site where it’s used.

Successful Failure One ->
I used the Screencast.com plugin to simplify things on that end.

For Prezi, I initially embedded the iframe code in the post body and just added the needed variable via the form. This works but caused problems in the Prezi embed code because it was an iframe with height and width so even if the user didn’t submit a Prezi ID the iframe box still hung out taking up space. You can see what it looked like below.


{Paste the URL for your video here:9} <!--This where the YouTube URL would go if it's entered-->
[screencast url="{Paste the URL for your video here:11}" width="650" height="365"]<!--The URL for the Screencast.com-->
<a href="{Paste the URL for your video here:12}">{Paste the URL for your video here:12}</a>

<iframe frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="550" height="400" src="http://prezi.com/embed/{Unique Prezi Identifier:14}/?bgcolor=ffffff&amp;lock_to_path=0&amp;autoplay=0&amp;autohide_ctrls=0#"></iframe> <!--The iframe code for Prezi which mixes in the unique ID of the presentation that the user submitted-->


By {Presenter (First):1.3} {Presenter (Last):1.6}<!--This is just some words mixing in the form submission pieces. Think MadLibs or mail merge.-->
{Second Presenter (leave blank only if you worked on the presentation alone) (First):2.3} {Second Presenter (leave blank only if you worked on the presentation alone) (Last):2.6}

After turning on the Prezi plugin, I could modify the content template like below. The plugin shortcodes fail better than the iframes do and so it’s ugly that they’re there and empty but it doesn’t mess things up.


{Paste the URL for your video here:9}
[screencast url="{Paste the URL for your video here:11}" width="650" height="365"]
<a href="{Paste the URL for your video here:12}">{Paste the URL for your video here:12}</a>

[prezi id="{Unique Prezi Identifier:14}"]<!--Modified to use the Prezi plugin shortcode-->

By {Presenter (First):1.3} {Presenter (Last):1.6}
{Second Presenter (leave blank only if you worked on the presentation alone) (First):2.3} {Second Presenter (leave blank only if you worked on the presentation alone) (Last):2.6}

If you want to import the form and see it with more detail, help yourself here.


1 Ask any DB admin. You cannot trust the humans to behave consistently. This is a blessing in some cases and a hassle in others.

2 This doesn’t have to be the case. You could give students the forms on their own sites and still get all the standardization/scaffolding advantages and then aggregate the content centrally mother blog style.

3 I could assign unfiltered HTML to the user tied to the form but it seems that’d open up more security issues than it’s worth.

2 thoughts on “Gravity Forms: Exploring a Design Pattern

  1. Great work Tom, you really have created an approach for giving people the ability to help build content w/o the overhead of teaching blogging mechanics.

    I’m either tired or lazy but am no familiar with the post template thing and all the short codes. That’s the stuff I typically do via mods to a theme template. Or writing a function to process the firm content after submission. I’d be glad to take a look.

    I’ve been deep in doing the form driven content w/o gravity forms because I’m making themes if like to have people use w/o paying for plugins.

    1. I’ve been watching the SPLOT progress with great interest/admiration and agree with the free for all mentality (pun intention is debatable).

      Long have I wandered the valley between programistan and nonprogramistan- a nomad with no real home. Another chunk just has to do with getting stuff done quickly (if not prettily) with my limited skill set. I’m getting better at some of the programming stuff and go back and improve things but quick and dirty hacks to get to results are my reality at the moment.

      I do appreciate the offer but I’ll let this sleeping/semi-functional dog lie for the moment. Besides I need to step up more although it’s good to know I’ve kind people like yourself to reach out to should I become desperate.

Comments are closed.