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:Take special note of your field names. You will need to manually reference every one of those names in your layout. We've built logic into our JavaScript to handle checkboxes, radios and pulldowns. These are the only fields you can use to affect logic that guides the form. You can add other fields but they'll just be used to store information.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:{codecitation class="brush:php" height="300px"}{error}<div id="cost"><table><thead><tr><th colspan="3">Cost</th></tr></thead><tfoot><tr class="footer"><td>Total Cost</td><td colspan="2"><span class="currency">$</span><span class="value">0</span></td></tr></tfoot><tbody></tbody></table></div><div class="formHeader">{global:formtitle}</div><div id="formWrapper"><!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly --><div id="rsform_7_page_0" class="questionParts"><div class="paginator"><div class="heading">Question 1 of X</div><div class="nextPrev">{1:body}</div><div class="clr"></div></div><div class="questionWrapper"><div class="question">{question1:caption} (*)</div><div class="radioOptions">{question1:body}{question1:validation}</div><div class="clr"></div></div><div class="description">{question1:description}</div></div><!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly --><div id="rsform_7_page_1" class="questionParts"><div class="paginator"><div class="heading">Question 2 of X</div><div class="nextPrev">{2:body}</div><div class="clr"></div></div><div class="questionWrapper"><div class="question">{question2:caption} (*)</div><div class="radioOptions">{question2:body}{question2:validation}</div><div class="clr"></div></div><div class="description">{question2:description}</div></div><!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly --><div id="rsform_7_page_2" class="questionParts"><div class="paginator"><div class="heading">Question 3 of X</div><div class="nextPrev">{3:body}</div><div class="clr"></div></div><div class="questionWrapper"><div class="question">{question3:caption}</div><div class="radioOptions">{question3:body}{question3:validation}</div><div class="clr"></div></div><div class="description">{question3:description}</div></div><!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly --><div id="rsform_7_page_3" class="questionParts"><div class="paginator"><div class="heading">Question 4 of X</div><div class="nextPrev">{4:body}</div><div class="clr"></div></div><div class="questionWrapper"><div class="question">{question4:caption}</div><div class="radioOptions">{question4:body}{question4:validation}</div><div class="clr"></div></div><div class="description">{question4:description}</div></div><!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly --><div id="rsform_7_page_4" class="questionParts"><div class="paginator"><div class="heading">Conclusion</div><div class="nextPrev">{submit:body}</div><div class="clr"></div></div><div class="questionWrapper">{conclusion:body}<table><tr><td>{Name:caption} *</td><td>{Name:body}{Name:validation}</td></tr><tr><td>{Email:caption} *</td><td>{Email:body}{Email:validation}</td></tr><tr><td>{Notes:caption}</td><td>{Notes:body}{Notes:validation}</td></tr><tr><td>{Contact:caption}</td><td>{Contact:body}{Contact:validation}</td></tr><tr><td>{Number:caption}</td><td>{Number:body}{Number:validation}</td></tr><tr><td>{Company:caption}</td><td>{Company:body}{Company:validation}</td></tr></table>{submit:body}<!--div class="question">{xxx:caption}</div><div class="radioOptions">{xxx:body}{xxx:validation}</div--><div class="clr"></div></div><div class="description">{conclusion_info:body}</div></div>{cost_table:body}</div>{/codecitation} 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 scriptThe first thing you want to do is jump over to the css/JavaScript tab in RS Form and style your form. Please do not (NOT) use our styling. We're making this all available for free but we'd really appreciate it if you dream up your own quote layout.{codecitation class="brush:css"}<link rel="stylesheet" rev="stylesheet" type="text/css" href="http://winworld.cc/jqueryui/jquery-ui-1.8.14.custom.css" /><style type="text/css">#formWrapper {float:left; width:75%;margin-bottom:10px;}.questionParts {}.paginator {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; border:1px solid #ECF0F3; margin-bottom:17px;}.paginator input {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; border:1px solid #ECF0F3; background-color:white; color:#7793A9; font-weight:bold; text-transform:lowercase; font-family:Arial,sans; font-size:11px; padding:5px; margin:7px;}.paginator input:hover {border:1px solid #ECF0F3; background-color:#7793A9; color:white; cursor:pointer;}.paginator .heading {float:left; height:100%; background:url(/templates/winworld/images/right-triangle.png) no-repeat center right #F0F4F7; color:#7894A9; font-size:18px; padding: 10px 33px 10px 10px; font-weight:bold;}.questionWrapper {-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px; border:1px solid #ECF0F3; }.description {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; border:1px solid #ECF0F3; border-top:none; padding:10px 17px; color:#7793A9; font-size:12px; text-indent:15px; background:url(/templates/winworld/images/info-icon.png) no-repeat 17px 10px;}.nextPrev {float:right;}.question {float:left; font-weight:bold;color:#506270;font-size:14px; padding:17px;}.radioOptions {float:right; padding:17px;}.checkboxOptions { clear:both; }.checkboxOptions input { clear:left; float:left; margin:3px 10px 3px 15px; }.checkboxOptions label { clear:right; display:block; line-height:17px; margin:0 15px 15px 0;}.formHeader {font-size:20px; color:#7894aa; font-family:District,DistrictDemi,Myriad Pro,Helvetica,Arial,sans;font-weight:bold; margin:40px 0 30px; padding: 0 0 0 40px; background:url(/templates/winworld/images/clip-board.png) no-repeat center left; float:left; clear:left;}span.pathway {display:none !important;}#cost {margin:30px 0 10px; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; border:1px solid #bbc9d4; background-color:#e4e9ed; padding:3px; float:right;width:23%;}#cost table {-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; border:1px solid #839eb1; border-collapse:collapse; width:100%;}#cost th {background-image:none; background-color:#92a9bb; color:white; padding:15px 20px; font-size:15px; text-align:left;}#cost td {padding:10px 0 10px 20px; color:#7994a9; font-size:9px; border-bottom:1px solid #e5eaee;background-color:white;}#cost .number {font-weight:bold;}#cost tr.footer td {background-color:#dde4ea; color:#92a9bb; padding:15px 20px; font-size:15px; font-weight:bold;}#cost td.x {padding-right:5px;}.radios label { clear: right; float: left; width: 90%;}.radios input { float:left; clear:left;}</style>{/codecitation}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 Next put in the actual JavaScriptThis is the trickiest part. You can't just copy and paste this part. Check out the code below:{codecitation class="brush:javascript"}<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://winworld.cc/jqueryui/jquery-ui-1.8.14.custom.min.js"></script><script type="text/javascript">jQuery.noConflict();(function($) {$(function() {var quest = "0",exclude = {},base_id = "#rsform_7_page_",cost;var questions ={1:{type:"radio",options:{"yes":{cost:{},next:2},"no":{cost:{},next:3}}},2:{type:"radio",options:{"Less than 50":{cost:{"Base":500,"Small Addon":1000,Option:"150/yr",Option2:"2/mo"},message:"It sounds like you said yes and then picked your options. That's great! Now on to the next question.",next:3},"More than 50":{cost:{"Big Version":3000,Option:"150/yr",Option2:"2/mo"},message:"You chose the larger option so we added more money to your estimate. Give us your money.",next:3}}},3:{type:"checkboxes",options:{'No':{cost:{},next:4},'Yes':{cost:{"Base":500,"This Thing":500}},'Y
