There has always been this ultimate challenge when creating forms: How can you ask your website visitors as many questions as possible, while at the same time, keep the form really short and sweet? On one hand, the need to ask about so many things, and on the other hand, the need to stay friendly, decent, and not be too time-consuming for a visitor.
What have you been doing for the last hour? Checking your email inbox, social networks, news, press releases, attending meetings, brainstorming, scheduling your next meeting, researching, or just having lunch?
So, what do you really want when you click a link, scroll down a landing page, and are prompted to submit a form? I can hear you… the form must be as short as possible! You are not keen on filling in long forms. You simply don’t have time for it!
Well, I get it. We’re all super busy these days. Thanks to our digital world, it seems that there is always just one more news item waiting for us around the corner.
But what about the opposite side of the marketing coin? As a marketer, you want to know as much as possible about your visitors (and potential leads). The more fields the form has, the more information you can gather.
So here we are: One side of the coin wants as few form fields as possible, and the other side as many as possible. Can this be even solved? Yes, with progressive forms!
A progressive form is a form that tries to be as short as possible while gathering as much data as possible. It dynamically chooses which field should be shown to a visitor, so that missing data can be captured instead of the already known ones.
Let me show you how this can be achieved in Kentico 10.
Let’s assume you have a form with the following fields:
- First name
- Last name
- Phone number
- Company
- Job title
As you want to keep your visitors (and future leads) as happy as possible, you decide to show only the first four fields: Email, First name, Last name, and Phone number.
However, if the visitor (contact) has already provided you with that information, you would like to display the Company field instead. The same applies to the Job title field: If the contact (visitor) has provided you with their phone number and company details in the past, you would like to display the Job title, instead.
This can be easily achieved using Kentico macros. I will explain each of them in more detail, so you can use them in your forms.
Each form’s field in Kentico has the Visibility condition property. It can be set per every form in the Forms application to ensure that a form’s fields are displayed only when appropriate, as you can see in this screenshot:
And that’s the exact moment where the macros come into play. As long as the macro condition that is entered there is met, the form’s field will be displayed to a contact (visitor) on the page.
Therefore, you need to enter a macro that checks if the current contact (visitor) has already provided you with the relevant information and if so, do not display the field. Below is a list of macro conditions that would be used per each field:
- Phone number: OnlineMarketingContext.CurrentContact.ContactBusinessPhone == ""
- Company: PhoneNumber.Visible == false && OnlineMarketingContext.CurrentContact.ContactCompanyName == ""
- Job title: PhoneNumber.Visible == false && Company.Visible == false && OnlineMarketingContext.CurrentContact.ContactJobTitle == ""
If you click the Edit button next to the Visibility condition property and switch to Code tab, you can enter those macros even more conveniently:
Just so you understand what the macros really mean, let me dive into their meaning a little bit more. First of all, Kentico uses the following macro whenever you need to get information about a current contact (visitor) of the live site:
OnlineMarketingContext.CurrentContact
This macro is then followed by any contact’s attribute that you need to get. For example, the contact’s first name would be retrieved like this:
OnlineMarketingContext.CurrentContact.ContactFirstName
So, if you closely check the macros used for the fields Phone number, Company, and Job title, you can see that we just check whether those contact attributes are empty or not: == ""
If they are empty, meaning the macro condition has been met, they will return true and, therefore, the field will be displayed on a page of the current contact.
Furthermore, you may notice that the fields Company and Job title have additional macros like:
PhoneNumber.Visible == false
These macros check whether the specified fields are visible or not. This means the macro above checks if the field with the codename PhoneNumber is NOT visible (as we don’t want to display the Company field if the Phone number field is displayed). And what is that funny looking “&&”? This is used to combine macro conditions together and basically means “AND”.
OK, enough of macro talking and let’s see the final result!
Once you have saved the macros per each form’s field and ensured the form was correctly mapped to the contact attributes, it will start working like magic:
You’ve just created an intelligent (progressive) form!
As I am sure you have noticed in the title of this blog post, it is the first part of a blog series on progressive forms in Kentico. So, you may wonder if there is any other way of creating progressive forms in Kentico. And the answer is yes! But you will have to wait for the second part ☺
Have you used progressive forms on your Kentico website? Let us know in the comments below!