In this section you will see the bulk of tutorial content on how to make a Slider Survey with part 1 of a working example. The example contains 4 parts added merely to show a fully realized Slider Survey. The structure of the tutorial will follow steps to making a Slider Survey will relevant detail and explanations.
*The tutorial will follow below with the working example at the end. Feel free to view the page in the editor as I will make points to do so when explaining certain functionality.
Create A Post
By now you are an expert at creating posts so make a new one in which we will embed the Slider Survey you will make in a moment.
Create A Slider Survey
For the sake of brevity this tutorial will instruct you on how to make your own Slider Survey by duplicating an existing one. The reason for this being that there is a lot of structure, formatting and complicated scripting involved with creating a new Slider form from scratch. By duplicating an existing one and modifying what you need you can save time and make life easy.
So, go to ” Dashboard > Formidable > Forms “. Then hover your cursor over a Slider Survey form (not all forms are sliders) and click duplicate. This will open a new form with a unique id. I would suggest duplicating the slider form embedded in this page. This can be done by searching for the form with the same id as the one used in this tutorial page.
Now you have a fully operational Slider Survey (albeit not with the content you want). However, this is a good starting point. To embed your new form into your post include the ‘formidable’ shortcode in your post content with the id set to the id of your new form. Then wrap the shortcode in the ‘raw’ shortcode. To help see the code featured in this page as an example. If all goes to plan you now have a working Slider Survey in your post. Success!
The ‘raw’ tag is needed to make the form display correctly. This shortcode suppresses any default formatting and settings WordPress might try to apply to your form.
Edit Your Slider Survey
Before we begin modifying your new slider it is important to note that extreme care should be taken when changing the scripts within the form items. Accidentally deleting something or changing code you should not will most likely result in the slider breaking, and finding the error may be difficult.
Now, the first thing to change are the variables containing the text for each slider. To do this open the form in the editor, click on the ‘Variables’ field and then click on the ‘Field Options’ drop down box to reveal the code needed. In here you will see arrays containing strings named “slider1, slider2, etc…” which are the values you need to change. The values are broken down as follows (left to right):
- The leading statement above the slider.
- The left end of the slider.
- The right end of the slider.
- The value range of the slider. This can either be ‘PositiveToNegative‘ or ‘NegativeToPositive‘ and must be typed exactly as written. This determine the value of the slider and the possible answer. For further explanation look over how the value is handled in the form embedded on this page.
- The unique key of the “Question1Value, Question2Value, etc…” fields you can also see in the form. The important thing to remember here is that when you create/duplicate a field it is given a unique key. However, the code within the fields does not change to therefore you must modify all references of field keys to match their current value. If this is not done then you will find that parts of your new slider are still the same as the original it was copied from even though you have changed it in the new code. A quick tip is that the new key will probably be the old key with an additional letter or number at the end. To view the field’s key just click on it and the field option drop down box.
Now that you have the slider survey question you want it is time to create the answers – so lets dive straight to it! In the same ‘Variable’ field as before you should be able to find 5 variables holding strings (text) e.g. “var neutralOuput=”You scored average…”. These are the variables that hold the conditional responses to your survey. When changing them remember to put the response in the correct variable i.e. the neuttral response goes in the variable ‘neutralOutput’ and so on.
Linking Survey Sections
When finished with the above you pretty much have a working slider survey – or at least part 1 of one. The idea now is that the user clicks a button and gets taken to part 2 and so on until you run out of questions and then direct them to a summary page. The reason for splitting the sliders 4 to a page is to make sure the user doesn’t get bored. Of course you should feel free to end here with a small, but working, slider survey. And to those who want more – read on!
Firstly, look to the top of the page and click on the ‘Settings’ option next to the ‘Build’ option we’ve been working on thus far. The only important thing here is that you change the URL under “Action After Form Submission” to the address of the post containing the next part of your Slider Survey. Also you need to change the 4 digit number to the field ID of the “Part1CalculatedField” field. This allows the results of the slider survey to be passed on via the URL to the next section; whether it be the next part or the final summary page. As it is important that the URL be correct for the site to work I have placed the URL for this page below with the sections to be changed in bold.
As well as moving forward, you will want to give your user the chance to go back! To do this a button is inserted with the destination address set to the URL of the previous part. In this example, the URL is set to the introductory landing page. You will want to make sure you set this correctly on each part you make. If you don’t want a back button just delete the field which creates it – simple!
Tips When Adding and Deleting
Above all be careful when adding and deleting sliders. Making sure that any changes to the amount of fields are reflected in the code inside the field ‘Variables’, and visa versa. For example, when adding a new slider, you would first create a new field, followed by a new slider array and a new ‘push’ method call. This tutorial’s example has 4 sliders per part as an example of best practice for keeping user attention, it is up to you to decide what is best for your needs.
Have a go and see what all the fuss is about: