Creating custom fields in Frog forms

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.

About these ads

8 Responses to Creating custom fields in Frog forms

  1. @sfrench21 says:

    Brilliant tip! Thanks so much-will definitely be having a go.

  2. daibarnes says:

    I love the concept of jailbreaking the Frog code to make the functionality do what you want. However, I don’t understand your problem with Google Forms. The results of any Frog form are less than good. And Google summarise responses for you. The ease of setting questions, as well as copying questions and changing some text, makes Google Forms much better to use.

    The Frog forms have strengths connected to working in a school community and multiple people having access to the results of important forms, say for the options process. And for scored formative tests or rote learning checkers. But I don’t understand why you’re hating on Google which, with all respect to Frog, are a better product.

    • Graham Quince says:

      Hi,

      I think my attempt at humour has missed the mark. I have nothing against Google forms at all. I think there is an argument for “horses for courses” and sometimes Frog forms are better suited to the task at hand than Google ones. The overly aggressive and unnecessary “Google can suck it” comments were meant to be just that.

      Graham

  3. you seem to have a pretty good knowledge of this kinda thing. Im having an issue with the ‘Teacher Assigned Work’ brick. Is there a way to change it so that when a teacher is setting a ‘Quick work’ and click the Resources tab, it allows them to choose files from our schools system and not the frog files?

    Ambitious I know but worth a try.

    • Graham Quince says:

      Yeah that would be cool. As far as I know what you’re hoping to do isn’t currently possible. Having said that the new FrogOS and its assessment system will solve this sort of thing for us.

  4. Andy says:

    Is it therefore also possible to amend the code so that a radio button field is required? Sorry I’m not that up on my html.

  5. George says:

    We have asked frog about this seeing them at BETT 2013 and at 2 events. With the respoce being ‘i don’t know’ about including these in FrogOS. Seems like they’re missing some tricks?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 311 other followers

%d bloggers like this: