Creating custom fields in Frog forms

October 7, 2012

Frog’s forms are great.  They might not be as simple to use as their Google counterparts, but the results are always user tagged for easy reference and they come with an export button.

Export a database as a CSV

Google can suck it

Alright, maybe I’m over playing their usefulness, but while it is possible to get usernames to automatically pass into Google, it’s a lot easier in Frog.

The only real issue with Frog forms though is that you’re limited to the bricks in the toolkit and the formatting they offer.

The Form Bricks

It’s like they want you to fail

You get everything you need to make a survey or question set, but sometimes you want a different layout for a question than the ones available.

Example

Recently, I wanted to have a survey where users could rate along a line.  You’ve all seen the sort of thing, 1 – 6 strongly agree to strongly disagree.  This would normally be achieved using a radio set:

A Frog Radio Set brick

You can recreate the functionality of this question type, but not the look, as the options can only appear vertically.  That’s when I remembered a trick I employed with Frog forms a few years ago before the hidden field brick was available.

The Trick

Frog bricks are essentially packets of html pre-coded that you can drop in and a page will build.   I know this because if you view the source of any Frog page, you can find the html behind each brick.

Code example

The relevant section of the source code for the radio set example. CTRL + F will be your best friend here.

If you view the full size version of the picture, you’ll see the HTML code which creates the radio set.  This is the relevant bit:

<table border=0><TR><TD align=right valign=top>Radio Set Example</TD><TD width=250>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’1′>&nbsp; option 1<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’2′>&nbsp; option 2<BR>&nbsp; 

<input type=radio name=’frg_Radio_Set_Example’   value=’3′>&nbsp; option 3<BR></TD></TR></TABLE>

Those of you familiar with HTML will recognise this is standard radio but code, although, note the name of the radio options:

name=’frg_Radio_Set_Example’ 

Frog’s bricks place frg_ in front of any option name you create.  All of this is leading up to the actual trick, which is that you can use an HTML brick inside a Frog form as long as your field name starts with frg_

The catch

Actually, no you can’t. If you drop in a form field inside an HTML brick with frg_ on the front and test the form, your field isn’t passed into the results.  Which is strange because I swear it used to be.

The Fix

Studying the source code again, I did spot another line of code, just underneath the end of table tag:

<input type=hidden name=form_details[] value=’frg_Radio_Set_Example’>

The field name frg_Radio_Set_Example matches the radio set name, so I tried adding it to the HTML brick and tested the form.   Success!  I’ve no idea what it does, but clearly it’s important (at least for the radio set brick).

So my final code for the HTML brick looks like:

<table border=”0″ width=”500″>
<tr>
<td valign=”bottom” rowspan=”2″>
Strongly agree
</td>
<td align=”center”>1</td>
<td align=”center”>2</td>
<td align=”center”>3</td>
<td align=”center”>4</td>
<td align=”center”>5</td>
<td align=”center”>6</td>
<td valign=”bottom” align=”right” rowspan=”2″>
Strongly disagree
</td>
</tr>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’1′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’2′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’3′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’4′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’5′>
</td>
<td align=”center”>
<input type=radio name=’frg_rating_example’   value=’6′>
</td>
</tr>
</table>
<input type=hidden name=form_details[] value=’frg_rating_example’>

And what it looks like:

Radio buttons in Frog created with an HTML brick

And once again Google can suck it

I like to imagine Larry Page reading my blog just asking “why?”.

Hey we can all dream.

Of course in reality, if Larry Page even did read this blog, I’ve probably blown any chance of ever working for Google all for a really, really weak joke.

Advertisements