A little trick for grouping address fields in prefilled forms

Fields that collect a participant’s address are an essential part of many forms. In this tutorial, we’ll show you how to group the address fields together to make your prefilled forms easier to fill out. A common use case is to hide the optional “box” field when you already know the rest of a participant’s address. Conversely, the other use case is to display all of the address fields when at least one of them is empty.

Prefilling forms allows Qualifio to prepopulate fields with the information from a contact’s record in your database. Learn more about prefilling forms.

When they get prefilled, form fields use one of three behaviours: show, lock or hide. These are found in a field’s Options. Learn more about how to customise this behaviour: Hide or lock prefilled fields and opt-ins on forms.

So what's this all about?

In Qualifio, the participant’s address consists out of six fields:

• Street (required)
• House number (required)
• Box (optional)
• Postal / Zip code (required)
• City (required)
• Country (required)

Imagine the following scenario:

Let’s say you have a form in Qualifio with a number of fields, including the address fields listed above.

First, you prefill these form fields using the prefilled link or Single Sign-On (SSO). Then, you hide them from the participants whose addresses you already know.

Now, hiding prefilled address fields on your form works perfectly when you know the whole address of a participant, that is, including their box number. However, this field isn’t used every time – hence the fact that it's usually optional. When the participant has not previously provided a value in the box field, things can get tricky.

Participants could end up with a screen that looks similar to this:

The box field is still being displayed, though the rest of the address fields are not, which is weird and will definitely lead to confusion.

Fear not! There is a solution

In the scenario above, you’d want the box field to be hidden if the other address fields are hidden. Similarly, you’d want the box field to be shown if the other address fields are shown. Simply put, the display of the box field should depend on other address fields on the form, as they are logically related.

While it is not the standard option, address fields can be grouped together, providing a group-level behaviour that allows for the dynamic display of the optional box field.

We’ll use the below logic to restrict its display:

Grouping the address fields

To group address fields on a campaign’s form:

• In the navigation, click Campaigns and then click the name of a campaign to open it.
• In the Channels step, click Tags.
• Click Additional HTML code and add the little code snippet below.
• Click Save.

To group address fields at the website level:

• In the navigation, click Settings.
• Click Websites.
• Click Tags.
• Click Additional HTML code and add the little code snippet below.
• Click Save.

CODE SNIPPET:

<script type="text/javascript" src="https://player.qualifio.com/demos/innovation/lib/showHideFields.js"></script>

<script type="text/javascript">
// simplify prefix
var fields = _qlf_fields;

// defined your rules
var applyRules = function() { 
    // design rules defined on the graph
    if ( fields.getValue('country') == '') { 
         // hide nothing 
    } else if ( fields.getValue('locality') == '') { 
        // hide nothing 
    } else if ( fields.getValue('zipcode') == '') { 
        // hide nothing 
    } else if ( fields.getValue('address') == '') { 
       // hide nothing 
    } else if ( fields.getValue('number') == '') {
       // hide nothing 
    } else { 
       fields.hideFields('country,locality,zipcode,address,number,box'); 
    } 
} 

// apply rules when form is displayed 
if (qlfDataLayer[0]['step'] == 'identityset') { 
    applyRules(); 
} 
</script>

That’s it. You’re now able to conditionally show or hide the box field!

Expected result

• You already know a participant's full address → you use this information to prefill the form → all required fields are prefilled and hidden – only the optional box field is still empty → we'll hide the box field.
• You already know part of a participant's address → you use this information to prefill the form → at least one required field is still empty, and so is the optional box field → we'll show* all fields, including the box field.

*Note: For the sake of consistency, we highly recommend having all fields set to "show". Otherwise, depending on your configuration, you could have locked (read-only) fields on your form, whereas the “box” field will still be editable if the participant did not previously provide a value for it.

Take a look at what we get now:

The box field’s visibility is now conditioned by the visibility of the other address fields. It can thus be hidden when all the other fields are prefilled and hidden. It is shown only if needed, like in the example above.

That’s how grouping address fields makes forms more understandable for participants and allows them to interact with the form more quickly and effectively.

Related Qualifio resources:

• Qualifio forms now feature progressive profiling