Gravity Forms: Exploring a Design Pattern

Image may be NSFW.
Clik here to view.
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.¹

   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.² 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.³ 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.