Using conditional form fields

Within Campaignion it is possible to set up conditional form fields. This piece of functionality is really new, so it's not yet in the main interface. We will be adding this to the interface in the future, but for now, here's how you can use this feature. 

What are conditional fields and why would I use them?

There are loads of things you can use conditional fields for. Here are a few ideas:

  • Using the same form for single and regular donations, hiding and revealing fields depending on whether the user chooses to give a one-off or regular gift.
  • Hiding or changing opt in boxes for people already on your list.
  • Running surveys or other flexible forms where answers to some questions determine which other questions you ask, and how.

How to use them

First, set up your form and include all fields that you might need. Once all of these fields are available, add "/webform/conditionals" to the end of your form URL. If you can't access this page you may not have been granted permission to do so. You can read more about permissions here

For example:

yourCampaignionURL.org/node/11/webform/conditionals

(You need to change the purple bits)

On this page click 'Add new condition' and use the plus buttons and drop down options to set how you'd like your form to behave. Here's an example of what this looks like where elements are hidden depending on whether the user chooses a single or regular donation interval at the first form step.

Conditional_2.png

Here's the list of conditions available:

Options.png

Submitting values in the URL string

In addition to using values submitted by the user in the form, you can also make form fields conditional on values submitted in the supporter's URL. This can be used for changing the opt in language or content for people already on your list. 

To submit a value in the URL string, you need to use this format:

yourCampaignionURL.org/node/11/webform/conditionals#p:formFieldKey=value

You find the form field key on the form page of the action builder, and the value can be whatever you like. If you want to use more than one parameter, you can separate these with an &. For example:

yourCampaignionURL.org/node/11/webform/conditionals#p:formFieldKey=value&p:otherFormFieldKey=value2

(you only need the # once).

URL string pre-population can be used really well with hidden fields to make changes without the user being able to see it happening. 

Using hidden or private fields

You can use as many private or hidden fields as you need. Hidden and private fields allow you to control what values are on the form without needing to have a visible field with a certain value. This allows you to adapt the forms to the user without them knowing you're doing so. It's entirely up to you whether you use private or hidden fields. 

Private fields

Private fields are fields that are only visible to logged in users, i.e. staff. Most fields can be turned into private fields simply by toggling 'private' to on in the form editor. 

private.PNG

Hidden fields

You can see them in the form fields palette on the right hand side in the form builder:

Fields.PNG

Each hidden field will need a unique key. Try to label these something clear so you can tell what they do just by reading the name. 

Once the fields are on the form, save the form and visit:

yourCampaignionURL.org/node/11/webform-ui (again, the purple bits need changing to match the form in question. 

Scroll to the hidden form field you have just set and click 'edit'. Finally scroll down and change the type to "Hidden element (less secure, changeable via JavaScript)". This makes the field available to be edited through the URL.

Conditional_hidden_type.PNG

The content, or lack thereof, of these fields can be used as a condition. 

Example

A common usage for hidden or private fields is to indicate whether the user is already on your list and then to change or hide the opt in and data protection statements shown. Here's how you could achieve this using a hidden field:

  1. Make sure all possible variations of the statement/optin boxes are on your form
  2. Add a hidden field to your form and call it 'onlist' (you can use whatever value you like)
  3. Visit yourCampaignionURL.org/node/99/webform/conditionals and set it so that the contents of the onlist field will determine which form fields are hidden. 

    LConlist.PNG

  4. When sending out emails add the parameter onlist=yes to their URL to make sure that the correct fields are hidden for people already on your list. e.g. yourCampaignionURL.org/node/99#p:onlist=yes.

If you're using tracking parameters in the URL they go before the #

When using hidden fields remember to think through every scenario. For example a supporter could forward their email to a friend, complete with the parameters you've personalised for the person on your list. Therefore make sure you don't use the parameters to check an opt in and then hide it as then you could accidentally opt in the friends without their consent.

Have more questions? Submit a request

Comments

Powered by Zendesk