Written by Jase Clamp Friday, 26 August 2011 15:35
RS Forms is a great component. Its got all the hooks in the admin to be able to add any kind of advanced dynamic functionality that you want. A recent version of RS Form introduced the concept of 'pagination' or - breaking your form onto seperate pages. This can be a handy feature if you feel that your form is too ominous in it's entireity.
What we wanted to do however was build special logic into the sequencing of the pages. So based on how the user answers a question in RS Form, we direct them to the next question we want them to see. In the form builder world, this is sometimes refered to as branching logic. Understandably, the makers of RS Forms have not added this feature because it's possibly hard to administer. However by adding some jquery to the form, we can add the functionality we need.
Here's how you do it...
First you have to add the fields to your form.
Here's a picture of how our form looks:
Use RS Form's pagination to add your page breaks. Our JS uses them to control the form. You have to name then 1,2,3 etc as our form uses that to control everything. Don't forget to add a submit button on the final page.
Next add your layout:
It's helpful if you are 100% sure that you've got all your fields before you start customizing your layout. We've done a custom layout that uses a special design controlled by CSS. The different field elements are placed around the page.
Here's the layout for our sample form:
It's pretty obvious what is going on. The field names that you chose in the first step are reused in the layout. One thing to note especially however is rsform_7_page_4 you need to change the "7" to the ID of your actual form. Also note that the "4" is the name of the next paginator name.
Next put in your custom script
Note at the top there is an include for a CSS script. You'll need to put this folder in your web-root for that to work: jqueryui.zip
This is the trickiest part. You can't just copy and paste this part. Check out the code below:
Again, note the include at the beginning, you'll want to put the above Zip folder in your webroot.
Here's how the script works. You have to make a perfect JSON object. Its a variable that holds the instructions for the whole form.
At the beginning, be sure to set your base_id. Be sure to use your actual RS Form ID.
Bracket 1 corresponds to the page prior to pagebreak 1.
Type can be radio, checkboxes or select.
Options indicate what happen if a choice is made.
Cost allows you to add things to the cost table.
Cost items with spaces in the name need to be put in quotes.
Prices with non-numerics need to be put in quotes.
If you add the same item twice it will not add it to the cost table twice.
Next designates what the next question is based on if they chose the given answer.
If this form implementation does not work for you, it is probably because of a misformatted JSON object. Be very aware of quotes and commas. You need a comma after repeating elements - all but the last. See the example.
Final Step: Set emails and thankyou messages
The rest of the steps for setting up a branching logic tree form in RS Form are the same as normal form setups. Don't forget to set your thankyou page text, your user and admin emails. Be sure to test a lot and do your own custom styling. This type of form setup can take some hours but once you have it in place, this framework is versitile because it lets you easily change things.
For those of you who have a recent version of RS Form, I have loaded an export of an example form in the following zip. If you don't have the same version, this import won't work however. Try and understand how everything is working so you can really get the most out of this form.
Download here: rsform_instant_quote.zip