Gravity Forms Black Magic

The results of the 4 quadrant form submission

Gravity Forms makes my list of Non-Programistan tools. I haven’t seen quite enough posts celebrating the fact that Gravity Forms can do magic.

The key feature at the moment that is kind of blowing my mind is the ability to use modifiers on the submissions fields— the ability to have the label (what the user sees/answers) be one thing and the value be something entirely different. It has the potential to enable some SPLOT like activities without the coding on the tool maker end1 . . .

I know that sounds like nonsense but just follow me a bit . . .

show_values
It’s easy to miss the checkbox that turns on the values. You can see it in the fairly annoying GIF above. The cool thing is you can put virtually anything in the value field- images, HTML chunks etc. This plus the ability to create content templates2 gives you the ability to have user form interactions create some fairly sophisticated content.3

In this example the user selects “Awesome” as the answer to a question and the form would record that AND the following HTML (stored as the value for that answer)

<div class="qone" id="awesomeq1"><img src="http://augmenting.me/gridface/awesome.png"></div>

The part where this starts to come together is in the construction of a post using the content template option. You get options detailed in the image below.
Gravity Forms Post Body

I want to use the value from the “Awesome” selection in my post field. If you add the field like normal you’ll just get the word “Awesome” in your post. That’s fine but not that exciting. If you append :value to the merge tag you’ll get the result of the value field and that opens up all of your magical chakras.
Gravity Forms modifiers

The point of all this being, that you can have users answer simple questions and build pretty complex HTML/CSS combinations. It’s not perfect for everything but it opens up a wide range of interesting possibilities because it requires little actual coding knowledge on the part of the tool constructor. You can get by with the HTML/CSS.

The following example might help a bit. It plots the answers to four questions over a user selected background image. We’re looking to use it as a large crowd survey tool in the near future. The prompt will be something like- Take a selfie representing how you feel about technology in education. They’ll answer the questions and we’ll have a fairly light hearted grid view of the audience responses which has some depth but is easy to see as a whole. Feel free to submit some responses.

I also tacked on a pie chart construction tool using the charts.brace.io service. It lets you build charts via URL parameters like Google Charts used to do. It’s pretty handy for simple things like this.

This example form plots the four different visual elements over a background image. It’s just divs and CSS4 stuff. Quick and dirty. POC5 stuff.

.qone, .qtwo, .qthree, .qfour {
	width: 180px;
	height: 180px;
	float: left;
	padding-left: 15px;
	padding-top: 15px;
}

#awesomeq1 {
	background-color: green;
	opacity: .3;
	filter: Alpha(opacity=30);
/* IE8 and earlier */
}

#mehq1 {
	background-color: yellow;
	opacity: .3;
	filter: Alpha(opacity=30);
/* IE8 and earlier */
}

#awfulq1 {
	background-color: red;
	opacity: .3;
	filter: Alpha(opacity=30);
/* IE8 and earlier */
}

.main {
	width: 400px;
	height: 400px;
	overflow: hidden;
}

1 I know Alan Levine. Alan Levine is a friend of mine. I am no Alan Levine.

2 Think mail merge . . .

3 You can also chain forms and use variables from the forms in the URLs which would enable some wild options with Choose Your Own Adventure style progressions.

4 Disregard the names as I made them more complex than they needed to be and I could simplify the CSS in general. Remember I really am making most of this stuff up.

5 Not POC

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pingbacks on this post

  1. Faster Faster NMC Notes | said on June 10, 2015 at 6:50 am

    […] around more with forms to HTML (details here)/example form gridface is below/uses chartspree.io to make the charts on the fly via url (which is […]

TrackBack URL