Published
2010-05-06 20:19
In the past many users have expressed their interest to use CiviCRM for a survey. Obvious choice for this, is to use CiviCRM profile. For this you will have to create multiple profiles with your survey questions and configure it to redirect user to next profile when one profile is saved. This behaves like a survey wizard. But if you have lot of questions / steps you will have to create that many number of profiles, which might be difficult to manage/setup survey.
Here I will demonstrate how to use single profile and then split it into wizard using FormToWizard jquery plugin. First create questions using custom data and add it to the profile. We will use "HTML Form snippet" feature of profile for creating survey form. So create new html file and copy profile html code. It will look like below image.
Now lets modify this html file:
1. We need to include FormToWizard jquery plugin, for eg:
Step 2:
Step 3:
Note that I have added css for back and next links. Check attached file for source code for above profile.
Validations for each steps can be done using simple javascript.
For more details on FormtoWizard plugin check: http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
Hope this helps...
Now lets modify this html file:
1. We need to include FormToWizard jquery plugin, for eg:
<script type="text/javascript" src="http://civicrm31/sites/civicrm31/modules/civicrm/packages/jquery/plugins/jquery.formToWizard.js"></script>
2. Now call formToWizard plugin
lt;script type="text/javascript">
cj( function( ) {
cj("#Edit").formToWizard({ submitButton: '_qf_Edit_next' })
});
it;/script>
3. Next step is to modify html code in order to split profile into multiple steps. Currently entire profile is built as a single table. So you need to split that into multiple table's or div's and enclose them into fieldsets.
<fieldset>
<legend>General Information<legend>
-- profile fields ---
</fieldset>
<fieldset>
<legend>Technical Information<legend>
-- profile fields ---
</fieldset>
....
So profile will looks like below images:
Step 1:
Step 2:
Step 3:
Note that I have added css for back and next links. Check attached file for source code for above profile.
Validations for each steps can be done using simple javascript.
For more details on FormtoWizard plugin check: http://www.jankoatwarpspeed.com/post/2009/09/28/webform-wizard-jquery.aspx
Hope this helps...
Modified profile html17.99 KB
Filed under
Comments
Wow, this really explodes what we can do with profiles
if someone can work on adding support for multiple record custom fields that would make this even more powerful
lobo
Super nice trick to display.
Are they custom fields on the contact ? (ie. a user can't fill more than a survey, you got loads of contacts with all these fields that are empty cause they didn't participate, and if you run several different surveys, got quite a lot of fields quickly).
Instead of having multiple record custom fields, wouldn't it be better to be able to have custom fields per type of activity (or have the activity linked to a new type of content "survey" ?
That'd be a nice building bloc for everything that needs custom fields per activity, eg canvassing, gotv, campaign, petition...
Still haven't found the right name for that building bloc, but seems that the custom field set needs to be defined for a couple couple (type of activity, sourceid).
X+
There will be a new 'Survey' object and a mechanism for linking a set of custom fields to an Activity Type + Survey instance.
Details here...