Using conditional form fields

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, click 'webform' > 'conditionals' in the menu at the top of the page. If you can't access this you may not have been granted permission to do so. You can read more about permissions here. 

You can also access the conditional fields interface by adding /webform/conditionals to the url, after the node number.

For example:

yourImpactStackURL.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

Bear in mind that if you change the properties of a field, then any conditions associated with that field may no longer work. So always review any conditions if you make changes to fields after setting them up.

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:

yourImpactStackURL.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:

yourImpactStackURL.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 clearly so you can tell what they do just by reading the name. 

The hidden fields should be added to your first form step.

If your hidden form field was added to your page before 21st February 2018 it may not work like this by default. Click here to see how to make it editable through the URL parameters.

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 the first step of your form and call it 'onlist' (you can use whatever value you like)
  3. Visit yourImpactStackURL.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. yourImpactStackURL.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.

Using hidden fields added to the form before 21 February 2018

On the 21st February we rolled out an update making all new hidden fields editable through a URL parameter by default. But if you added your hidden field to the page before this date, you will need to follow these steps to make it work as described above.

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

yourImpactStackURL.org/node/11/webform/components (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. 

Have more questions? Submit a request