Field and section visibility on forms

Level up your forms with conditional questions so that users only see what's important to them.

Updated over a week ago

Note: This feature is only available on the Premium and Ultimate plans and is currently not available on portal forms.


Contents


About field and section visibility

Beacon's forms just keep getting better! Level up the experience for your form submitters by making sure they only see questions or details that are relevant to them with 'field and section visibility'.

Let's take a look at some use cases:

Enriching the details about the donations you receive:

  • "Is your donation in memory of someone?"

    • "Would you share the name and your relationship to this person?"

Streamlining your application process:

  • "Do you own or rent your property?"

    • "If you rent, do you have permission from your landlord to own a dog?"

Warning: This feature is super exciting but it does add some complexity so it's worth considering the bigger picture before adding lots of conditions. Simpler is better!

e.g. It is possible to make to questions dependant on each other such that neither question is accessible.


How it works

Short answer

  • You can set visibility criteria on sections or fields by clicking the visibility conditions button found when editing a section or field.

  • Only certain field types can be used as criteria. See here

  • Section visibility will only ever be conditional on fields found on other sections.

  • Field visibility will only ever be conditional on other fields found within the same section.

Long answer

What is it?

You may have already grasped the general concept but essentially, you can configure your form fields and sections so that they only appear under certain conditions. This is all possible thanks to this, possibly familiar, button:

A screenshot of a rounded edge button titled "Visibility conditions" followed be a zero enclosed in brackets.

Clicking this button presents us with the opportunity to add conditions in a pop out like the following:

A screenshot of a card titled "Section visibility" within which exists the following text "Only show this section when" and then a set of boxes in which a user can set conditions. In this examples the condition is as follows: Interests is Events

Where is it?

There's a couple of places you might see the 'Visibility conditions' button show up when setting up or editing a form.

  1. At the bottom of a 'General fields' form section. We call this "Section visibility"

    A form section within form settings. The section has a title of 'Other info' and contains the no 'Form items'. There is a large arrow which has been added to the screenshot which points at a 'Visibility conditions' button at the bottom of the card.
  2. When editing a form field (i.e. the question on your form). We call this, you guessed it, "Field visibility"

    A screenshot of an 'Edit form field' settings card. The chosen option from the 'field' selector is 'In memory of first name' and the question editor has the same wording. There is a large arrow which has been added to the screenshot which points at a 'Visibility conditions' button at the bottom of the card.

When is it?

The visibility conditions button will only appear when there are fields on the form that can be used as conditions for your new form section or field. The following field types are available to be used as conditions:

  • ✅ Checkboxes (In either a checkbox or button layout)

  • ⭐️ Rating fields

  • ⏬ Dropdown lists (Including point to another record fields displayed as dropdown lists)

So let's take a look at what this looks like when we don't have have one of the above on our form and what happens when we add our 'Interests' field (dropdown list) to another section in the form.

A short clip showing the form editing experience. It shows a section titled "Tell us more about your support" that is missing the 'Visibility conditions' button. The video then shows the user adding a dropdown list field titled 'Interests' to the "Your details" section of the form. Once this change is made, the 'Visibility conditions' button then appears.

In the clip above we see a section titled "Tell us more about your support" that is missing the 'Visibility conditions' button. 🤔 The video then shows the user adding a dropdown list field titled 'Interests' to the 'Your details' section of the form. Once this change is made, the 'Visibility conditions' button then appears on our earlier form section and we're now able to add some visibility conditions! 🎉

Notice that the only available field we can base our conditions on is that newly added 'Interests' field. This tells us that the only field on our form that is either a checkbox, rating, or dropdown field is the newly created 'Interests' field.

Let's chat through some other considerations to be aware of.

Why is it?

You may have noticed that in the previous example, our 'section visibility' was dependant on a field found in completely different section. It might not seem obvious initially but if you were to make a section's visibility dependent on a field held within that section, you'd quickly find yourself in a scenario where that section never appears on your form, or the section disappears as people are filling in questions on that section. As such there's some safeguards in place for what fields you can use as conditions:

  • Section visibility will only ever be conditional on fields found on other sections.

  • Field visibility will only ever be conditional on other fields found within the same section.

Let's take a look at one of our uses cases from earlier:

  1. "Do you own or rent your property?"

    1. "If you rent, do you have permission from your landlord to own a dog?"

If you wanted the visibility of your second question (a) to be dependant on your first question (1) then both of these questions would need to live in the same section like so:

A form section within form settings. The section has a title of 'Your current living status' and contains the following 2 'Form items'; 'Do you rent or own your property?' (Drop-down list), and 'Do you have permission from your landlord for a dog?' (Checkbox).

Who is it?

A gif of Keanu Reeves looking confused.

It's not a person... It's just a bit of code


Example set up

Warning: This is a more advanced feature of Beacon forms and you'll want to make sure you have a good understanding of forms in general before getting stuck in. Read our forms guides here.

Let's take one of our use cases from earlier.

  • "Is your donation in memory of someone?"

    • "Would you share the name and your relationship to this person?"

With 'Field and section' visibility on our forms, the above my look something like this:

Some pre-requisites before we dive in - only necessary if you want to follow this example exactly. You will need the following fields on the payments record type:

  • In memory? (Checkbox)

  • In memory first name (Short text)

  • In memory last name (Short text)

  • Relationship to the deceased (Dropdown list) - options like partner, parent, friend

Note: You can learn how to add new fields here or ask one of your admins to complete this for you.

First things first, let's open up a new donation form, scroll down to our form sections card, click on 'Add section' and create a new 'General fields' section.

Let's give our section an appropriate title and make sure that the record type we're referencing fields from is set to Payment. From there, let's click 'Add item' and start inserting our questions

A form section within form settings. The section has a title of 'Tell us more about your support' and contains no 'Form items'. The 'Add item' button is highlighted by a large pink arrow that has been added to the screenshot.

Each question will need to be a 'Form field' rather than a 'Form label' as we want people to be able to submit a response. From the dropdown list of fields available, let's start with our In memory? checkbox. We'll want to make our question a little more friendly and let's change the layout of the question from 'Checkbox' to 'Buttons' (This turns our checkbox into a Yes/No question and will come in handy later). Your set up should look something like this:

A screenshot of a card an 'Edit form field' settings card. The chosen option from the 'field' selector is 'In memory?' and the question editor has the wording "Is your donation in memory of someone?". There are two large arrows which have been added to the screenshot which point to the question editor, and a layout selector in which the user has selected the option of 'Buttons' as apposed to 'Checkbox'.

Finally hit 'Save form field'. This In memory? checkbox field is going to be the condition that our next few fields are based on 😃

Let's repeat steps and add another form field; This time let's select our In memory first name field. We'll end up with something like the above, but now we have access to our 'Visibility conditions' button.

A screenshot of an 'Edit form field' settings card. The chosen option from the 'field' selector is 'In memory of first name' and the question editor has the same wording. There is a large arrow which has been added to the screenshot which points at a 'Visibility conditions' button at the bottom of the card.

Tip: You can leave the 'Required field?' toggle turned on! We've put some nice things in place which means that the field will only be required if it is visible on the form 😉

Click on the 'Visibility conditions' button and let's set some criteria. We will be given the popup shown below where we'll click on 'Add condition'

A screenshot of a settings card in Beacon. It's titled 'Field visibility', has a description of 'Only show this field when...' and includes a button to 'Add condition'

We'll then follow the flow until we end up with something like this:

A screenshot of a settings card in Beacon. It's titled 'Field visibility', has a description of 'Only show this field when...' and has a condition in place that states the following: The field 'In memory?' should have the operation criteria of 'is checked'

Tip: "is checked" will correspond directly with "Yes" in our 'Buttons' layout of our question and as such "is not checked" will correspond with "No".

Hit 'Save' and then 'Save form field' until we're back to our form section. Let's repeat these steps with the extra fields we want to add until we end up with something like this:

A form section within form settings. The section has a title of 'Tell us more about your support' and contains the following 4 'Form items'; 'Is this donation in memory of someone?' (Checkbox), 'In memory of first name' (Short text), 'In memory of last name' (Short text), and 'Relationship to deceased' (Dropdown list)

Each form field above with the exception of our initial "Is this donation in mem..." checkbox should have the same 'Visibility conditions' applied; In memory? is checked.

Which means we now have a working form, in which if somebody selects "Yes" to our initial question of "Is your donation in memory of someone?", then they will be shown the following 3 fields to fill out and if not, they won't see anything.

Let's take it a step further and include a notes field for when somebody answers "No" to that initial question.

Follow the same steps for adding a new form field until you're here:

A screenshot of a card an 'Edit form field' settings card. The chosen option from the 'field' selector is 'Notes' and the question editor has the following wording "Anything else you'd like us to know about your donation?".

Then let's add the opposite condition to our previous fields:

A screenshot of a settings card in Beacon. It's titled 'Field visibility', has a description of 'Only show this field when...' and has a condition in place that states the following: The field 'In memory?' should have the operation criteria of 'is not checked'

Hit 'Save', 'Save form field', and then 'Save changes' to your form at the bottom of your page.

Success! 🎉 You've created a form which includes conditional fields using our 'Field and section visibility' feature. It should look something like the gif at the start of this example but open up your form and take a look! 😉


Closing thoughts

There's definitely some particular scenarios in which this feature really shines, particularly in Casework or Grantmaking organisations. However, don't be afraid to think outside the box and explore new ways this feature can work for you!

It's a feature that's definitely worth considering if your organisation uses forms to support any kind of application process. Whether that's for your Casework, Volunteering applications, Adoptions, or Grant applications.


Frequently asked questions

Can I include the same field (question) multiple times on the same form?

Yes! A good example is when you might want to show somebody different funds they can support based on previous answers they've given.

The only thing to note here is that you cannot duplicate a field multiple times in the same section. You'll need to create a new form section and that section will need to have some visibility conditions set in order for you to duplicate the field

Why can't I see the visibility conditions button?

It's worth having a quick recap of our 'When is it?' and 'Why is it?' sections of this guide to make sure you're not missing the necessary elements. Usually, it will be because you don't have another field to base visibility on (Checkbox, drop-down list, rating).

Here's some other scenarios where it will not show up:

  • On any form section other than a 'General fields' section

  • On label fields (i.e. fields that are just descriptive and don't allow a response)

Can I set up different acknowledgment emails based on the fields the form submitter completes?

No, it's not possible to dynamically include text based on a person's responses. You will either need to keep the email generic or always include email variables that might not always be relevant. E.g. Include the name of the 'In memory' regardless of whether the donation was in memory of someone.

If you'd like to account for these scenarios here's some other options:

  • Use separate forms instead of using field and section visibility. e.g have a donation form specifically for in memory donations

  • Use one our integrated email products like SendGrid or Mailchimp to send more personalised acknowledgments. This could be instead of, or in addition, to the Beacon form acknowledgment

  • Get a little more technical by using Beacon's smart fields as email variables 😉
    Example:

    =IF({{{c_in_memory}}}, "Thank you for your donation in memory of {{{in_memory_of_first_name}}}.", "Thank you for your kind donation.")

Can I use URL variables on hidden fields?

You can indeed! For example, you can populate the in memory name fields even while those fields are not yet visible. Try it here

Warning: Data will not be brought into Beacon unless visibility criteria has been met.

Did this answer your question?