# Use Cases
# Form Personalization
Novti Form Personalization empowers you to create dynamic and tailored forms on your website, enhancing engagement and conversion rates. With this feature, you can customize forms based on various parameters, providing visitors with personalized experiences that cater to their unique needs and preferences.
Novti Form Personalization allows you to go beyond static forms and create dynamic interactions that adapt to your audience in real-time. Whether you want to adjust form fields based on visitor behavior, segment your audience for targeted messaging, or personalize forms based on geographical location, Novti CMS offers the flexibility and tools to achieve your goals.
# Segment-Based Personalization
Segmentation enables you to categorize your audience into groups with similar characteristics or behaviors. Utilize Novti's Form Personalization to display custom forms tailored to specific segments. By passing segment data through URL parameters, you can dynamically adjust form elements.
Example URLs
- https://novti.com/donate?segment=loyal_donors
- https://novti.com/donate?segment=new_donors
# Implementation
- Create or open an existing form
- Drag-and-drop a new
HTML Element
hidden component at the end of your form builder - Edit the HTML Element component and click on the
Logic
tab - Click on
- Type your logic name, e.g. Segment Personalization and select
JavaScript
trigger type - In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
result = !!data.segment && !window.formPersonalizationActionExecuted
- Click , type an action name, e.g. Segment Personalization, and select
Custom Action
type to start creating the advanced logic. - Inside the Custom Action (JavaScript) text area, add the following code:
// Get the segment value from the URL const segment = data.segment // Get the current form instance const formKey = Object.keys(Formio.forms)[0] const currentInstance = Formio.forms[formKey] // Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given segment const frequencyamounts = currentInstance.getComponent('frequencyamounts') // Only execute this action if the Frequency & Amounts form component exists if (frequencyamounts === null) { return } // Now, define conditionally which amounts belong to which frequency based on the given segment. This varies per use case, so adjust accordingly switch (segment) { // Define the amounts for your organization's `loyal donors` case 'loyal_donors': // Amounts for frequency `once` frequencyamounts.component.amounts_once = [{ label: '€ 32', // Multiply the amount by 100 to get cents value: 32*100, }, { label: '€ 64', // Or, use cents directly value: 6400, }, { label: '€ 128', value: 128*100, }] // Amounts for frequency `monthly` frequencyamounts.component.amounts_monthly = [{ label: '€ 8', value: 8*100, }, { label: '€ 16', value: 16*100, }, { label: '€ 24', value: 24*100, }] // Amounts for frequency `yearly` frequencyamounts.component.amounts_yearly = [{ label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }, { label: '€ 200', value: 200*100, }] // Set the default amount (in cents) for frequency `once` frequencyamounts.component.amounts_once_default_amount = 64*100 // Set the default amount (in cents) for frequency `monthly` frequencyamounts.component.amounts_monthly_default_amount = 8*100 // Set the default amount (in cents) for frequency `yearly` frequencyamounts.component.amounts_yearly_default_amount = 35*100 // Set the general default frequency with its corresponding default amount (in cents). In this example we use `once` as the default frequency frequencyamounts.setValue({ frequency: 'once', amount: 64*100 }) // Finish this condition break; // Define the amounts for your organization's `new donors` case 'new_donors': frequencyamounts.component.amounts_once = [{ label: '€ 10', value: 10*100, }, { label: '€ 20', value: 20*100 }, { label: '€ 30', value: 30*100, }] frequencyamounts.component.amounts_monthly = [{ label: '€ 5', value: 5*100, }, { label: '€ 10', value: 10*100, }, { label: '€ 15', value: 15*100, }] // You might not want to show a certain frequency for a specific segment. To exclude a frequency, simply don't define it here, e.g., exclude 'yearly': // frequencyamounts.component.amounts_yearly = [] frequencyamounts.component.amounts_once_default_amount = 10*100 frequencyamounts.component.amounts_monthly_default_amount = 15*100 frequencyamounts.setValue({ frequency: 'once', amount: 10*100 }) break; } // Redraw the current form instance to reflect the dynamically added amounts & frequencies currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)
# Geolocation-Based Personalization
Geolocation-based personalization allows you to customize content based on the geographic location of your visitors. Leverage Novti's capabilities to adjust form elements based on visitor location. By passing geolocation data through URL parameters, you can tailor forms to regional preferences.
Example URLs:
- https://novti.com/donate?geolocation=eu
- https://novti.com/donate?geolocation=uk
# Implementation
- Create or open an existing form
- Drag-and-drop a new
HTML Element
hidden component at the end of your form builder - Edit the HTML Element component and click on the
Logic
tab - Click on
- Type your logic name, e.g. Geolocation Personalization and select
JavaScript
trigger type - In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
result = !!data.geolocation && !window.formPersonalizationActionExecuted
- Click , type an action name, e.g. Geolocation Personalization, and select
Custom Action
type to start creating the advanced logic. - Inside the Custom Action (JavaScript) text area, add the following code:
// Get the geolocation value from the URL const geolocation = data.geolocation // Get the current form instance const formKey = Object.keys(Formio.forms)[0] const currentInstance = Formio.forms[formKey] // Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given geolocation const frequencyamounts = currentInstance.getComponent('frequencyamounts') // Only execute this action if the Frequency & Amounts form component exists if (frequencyamounts === null) { return } // Now, define conditionally which amounts belong to which frequency based on the given geolocation. This varies per use case, so adjust accordingly switch (geolocation) { // Define the amounts for `eu` based donors case 'eu': // Amounts for frequency `once` frequencyamounts.component.amounts_once = [{ label: '€ 32', // Multiply the amount by 100 to get cents value: 32*100, }, { label: '€ 64', // Or, use cents directly value: 6400, }, { label: '€ 128', value: 128*100, }] // Amounts for frequency `monthly` frequencyamounts.component.amounts_monthly = [{ label: '€ 8', value: 8*100, }, { label: '€ 16', value: 16*100, }, { label: '€ 24', value: 24*100, }] // Amounts for frequency `yearly` frequencyamounts.component.amounts_yearly = [{ label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }, { label: '€ 200', value: 200*100, }] // Set the default amount (in cents) for frequency `once` frequencyamounts.component.amounts_once_default_amount = 64*100 // Set the default amount (in cents) for frequency `monthly` frequencyamounts.component.amounts_monthly_default_amount = 8*100 // Set the default amount (in cents) for frequency `yearly` frequencyamounts.component.amounts_yearly_default_amount = 35*100 // Set the general default frequency with its corresponding default amount (in cents). In this example we use `once` as the default frequency frequencyamounts.setValue({ frequency: 'once', amount: 64*100 }) // Finish this condition break; // Define the amounts for `uk` based donors case 'uk': frequencyamounts.component.amounts_once = [{ // Change the currency symbol label: '£ 10', value: 10*100, }, { label: '£ 20', value: 20*100 }, { label: '£ 30', value: 30*100, }] frequencyamounts.component.amounts_monthly = [{ label: '£ 5', value: 5*100, }, { label: '£ 10', value: 10*100, }, { label: '£ 15', value: 15*100, }] // You might not want to show a certain frequency for a specific geolocation. To exclude a frequency, simply don't define it here, e.g., exclude 'yearly': // frequencyamounts.component.amounts_yearly = [] frequencyamounts.component.amounts_once_default_amount = 10*100 frequencyamounts.component.amounts_monthly_default_amount = 15*100 frequencyamounts.setValue({ frequency: 'once', amount: 10*100 }) break; } // Redraw the current form instance to reflect the dynamically added amounts & frequencies currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)
# Behavioral Personalization
Behavioral personalization involves customizing forms based on visitor interactions and engagement. Use Novti CMS to use the visitor behavior to dynamically modify form elements accordingly. By passing behavioral data through URL parameters, you can create personalized forms that resonate with visitors.
Example URLs:
- https://novti.com/donate?behavior=clicked_action_button
- https://novti.com/donate?behavior=visited_action_page
# Implementation
- Create or open an existing form
- Drag-and-drop a new
HTML Element
hidden component at the end of your form builder - Edit the HTML Element component and click on the
Logic
tab - Click on
- Type your logic name, e.g. Behavioral Personalization and select
JavaScript
trigger type - In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
result = !!data.behavior && !window.formPersonalizationActionExecuted
- Click , type an action name, e.g. Behavioral Personalization, and select
Custom Action
type to start creating the advanced logic. - Inside the Custom Action (JavaScript) text area, add the following code:
// Get the behavior value from the URL const behavior = data.behavior // Get the current form instance const formKey = Object.keys(Formio.forms)[0] const currentInstance = Formio.forms[formKey] // Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given behavior const frequencyamounts = currentInstance.getComponent('frequencyamounts') // Only execute this action if the Frequency & Amounts form component exists if (frequencyamounts === null) { return } // Now, define conditionally which amounts belong to which frequency based on the given behavior. This varies per use case, so adjust accordingly switch (behavior) { // Define the amounts for `clicked action button` case 'loyal_donors': // Amounts for frequency `once` frequencyamounts.component.amounts_once = [{ label: '€ 32', // Multiply the amount by 100 to get cents value: 32*100, }, { label: '€ 64', // Or, use cents directly value: 6400, }, { label: '€ 128', value: 128*100, }] // Amounts for frequency `monthly` frequencyamounts.component.amounts_monthly = [{ label: '€ 8', value: 8*100, }, { label: '€ 16', value: 16*100, }, { label: '€ 24', value: 24*100, }] // Amounts for frequency `yearly` frequencyamounts.component.amounts_yearly = [{ label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }, { label: '€ 200', value: 200*100, }] // Set the default amount (in cents) for frequency `once` frequencyamounts.component.amounts_once_default_amount = 64*100 // Set the default amount (in cents) for frequency `monthly` frequencyamounts.component.amounts_monthly_default_amount = 8*100 // Set the default amount (in cents) for frequency `yearly` frequencyamounts.component.amounts_yearly_default_amount = 35*100 // Set the general default frequency with its corresponding default amount (in cents). In this example we use `once` as the default frequency frequencyamounts.setValue({ frequency: 'once', amount: 64*100 }) // Finish this condition break; // Define the amounts for `visited action page` case 'new_donors': frequencyamounts.component.amounts_once = [{ label: '€ 10', value: 10*100, }, { label: '€ 20', value: 20*100 }, { label: '€ 30', value: 30*100, }] frequencyamounts.component.amounts_monthly = [{ label: '€ 5', value: 5*100, }, { label: '€ 10', value: 10*100, }, { label: '€ 15', value: 15*100, }] // You might not want to show a certain frequency for a specific behavior. To exclude a frequency, simply don't define it here, e.g., exclude 'yearly': // frequencyamounts.component.amounts_yearly = [] frequencyamounts.component.amounts_once_default_amount = 10*100 frequencyamounts.component.amounts_monthly_default_amount = 15*100 frequencyamounts.setValue({ frequency: 'once', amount: 10*100 }) break; } // Redraw the current form instance to reflect the dynamically added amounts & frequencies currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)
# RFM (Recency, Frequency, Monetary Value) Personalization
RFM analysis is a marketing framework used to segment and analyze customer behavior based on recency, frequency, and monetary value. With Novti, you can leverage RFM values passed as parameters in the URL to dynamically compose forms for visitors. Adjust form elements based on RFM scores to create personalized experiences.
Components
Here's what each component of RFM represents:
Recency (R):
This measures how recently a customer has made a purchase or engaged with the business. Customers who have interacted more recently are often considered more valuable, as their behavior is seen as more indicative of their current interests and needs.
Frequency (F):
This measures how often a customer makes a purchase or engages with the business over a specific period. Customers who make frequent purchases or interact with the business more often are considered valuable due to their loyalty.
Monetary Value (M):
This represents the total monetary value of a customer's purchases or transactions with the business. Customers who have spent more money are often considered more valuable.
Score
In order to get an overall score, we have to assign scores on a scale of 1 to 3 for each component:
Recency (R):
- 3: Week ago
- 2: Month ago
- 1: 3+ months ago
Frequency (F):
- 3: Weekly
- 2: Monthly
- 1: Quarterly or less
Monetary Value (M):
- 3: High spender
- 2: Average spender
- 1: Average spender or less
In this example, we'll only focus on a simplified score of f
(frequency) and m
(monetary value), but users can extend their implementation with their organization data:
Frequency (F):
- 3: Weekly
- 2: Monthly
- 1: Quarterly or less
Monetary Value (M):
- 3: High spender
- 2: Average spender
- 1: Average spender or less
For an overall RFM score, we can combine those values. E.g. 33, 32, 31, 23, 22, 21, etc.
In Novti, we can use RFM values to dynamically compose forms for visitors. For instance, we can determine the frequencies that should be enabled, along with the corresponding amounts. One way to leverage the RFM framework in Novti is by passing the RFM values as parameters in the URL. For this example we'll be using the following URL's:
- https://novti.com/donate?rfm=333
- https://novti.com/donate?rfm=222
- https://novti.com/donate?rfm=111
# Implementation
- Create or open an existing form
- Drag-and-drop a new
HTML Element
hidden component at the end of your form builder - Edit the HTML Element component and click on the
Logic
tab - Click on
- Type your logic name, e.g. RFM Personalization and select
JavaScript
trigger type - In the Text Area, add the following code, which represents the condition the page should meet to trigger the personalization action:
result = !!data.rfm && !window.formPersonalizationActionExecuted
- Click , type an action name, e.g. RFM Personalization, and select
Custom Action
type to start creating the advanced logic. - Inside the Custom Action (JavaScript) text area, add the following code:
// Get the RFM value from the URL const rfm = data.rfm // Get the current form instance const formKey = Object.keys(Formio.forms)[0] const currentInstance = Formio.forms[formKey] // Get the Frequency & Amounts form component, which we will need to dynamically indicate the amounts and frequencies based on the given RFM const frequencyamounts = currentInstance.getComponent('frequencyamounts') // Only execute this action if the Frequency & Amounts form component exists if (frequencyamounts === null) { return } // Get the RFM scores const [r, f, m] = rfm.split('') // Now, define conditionally which amounts belong to which frequency based on the given RFM. This varies per use case, so adjust accordingly. switch (f) { // Define the amounts for donors that donates weekly case '3': switch (m) { // High spenders case '3': // Amounts for frequency `once` frequencyamounts.component.amounts_once = [{ label: '€ 500', // Multiply the amount by 100 to get cents value: 500*100, }, { label: '€ 1000', // Or, use cents directly value: 100000 }, { label: '€ 2000', value: 2000*100 }] frequencyamounts.component.amounts_monthly = [{ label: '€ 250', value: 250*100, }, { label: '€ 500', value: 500*100, }, { label: '€ 1000', value: 1000*100, }] // Set the default amount (in cents) for frequency `once` frequencyamounts.component.amounts_once_default_amount = 1000*100 // Set the default amount (in cents) for frequency `monthly` frequencyamounts.component.amounts_monthly_default_amount = 1000*100 // Set the general default frequency with its corresponding default amount (in cents). In this example we use `monthly` as the default frequency frequencyamounts.setValue({ frequency: 'monthly', amount: 1000*100 }) // Finish this (m) condition break // Spend above average case '2': frequencyamounts.component.amounts_once = [{ label: '€ 250', value: 250*100, }, { label: '€ 500', value: 500*100, }, { label: '€ 1000', value: 1000*100, }] frequencyamounts.component.amounts_monthly = [{ label: '€ 125', value: 125*100, }, { label: '€ 250', value: 250*100, }, { label: '€ 500', value: 500*100, }] frequencyamounts.component.amounts_once_default_amount = 1000*100 frequencyamounts.component.amounts_monthly_default_amount = 500*100 frequencyamounts.setValue({ frequency: 'monthly', amount: 500*100 }) break // Spend average or less case '1': frequencyamounts.component.amounts_once = [{ label: '€ 100', value: 100*100, }, { label: '€ 200', value: 200*100, }, { label: '€ 300', value: 300*100, }] frequencyamounts.component.amounts_monthly = [{ label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }, { label: '€ 150', value: 150*100, }] frequencyamounts.component.amounts_once_default_amount = 200*100 frequencyamounts.component.amounts_monthly_default_amount = 150*100 frequencyamounts.setValue({ frequency: 'monthly', amount: 150*100 }) break } // Finish this (f) condition break // Define the amounts for donors that donates monthly case '2': switch (m) { // Spends highly case '3': frequencyamounts.component.amounts_monthly = [{ label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }, { label: '€ 150', value: 150*100, }] frequencyamounts.component.amounts_quarterly = [{ label: '€ 100', value: 100*100, }, { label: '€ 200', value: 200*100, }, { label: '€ 300', value: 300*100, }] frequencyamounts.component.amounts_monthly_default_amount = 150*100 frequencyamounts.component.amounts_quarterly_default_amount = 200*100 frequencyamounts.setValue({ frequency: 'quarterly', amount: 200*100 }) break // Spends above average case '2': frequencyamounts.component.amounts_monthly = [{ label: '€ 25', value: 25*100, }, { label: '€ 50', value: 50*100, }, { label: '€ 75', value: 75*100, }] frequencyamounts.component.amounts_quarterly = [{ label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }, { label: '€ 150', value: 150*100, }] frequencyamounts.component.amounts_monthly_default_amount = 50*100 frequencyamounts.component.amounts_quarterly_default_amount = 100*100 frequencyamounts.setValue({ frequency: 'quarterly', amount: 100*100 }) break // Spends average or less case '1': frequencyamounts.component.amounts_monthly = [{ label: '€ 10', value: 10*100, }, { label: '€ 20', value: 20*100, }, { label: '€ 30', value: 30*100, }] frequencyamounts.component.amounts_quarterly = [{ label: '€ 25', value: 25*100, }, { label: '€ 50', value: 50*100, }, { label: '€ 100', value: 100*100, }] frequencyamounts.component.amounts_monthly_default_amount = 10*100 frequencyamounts.component.amounts_quarterly_default_amount = 25*100 frequencyamounts.setValue({ frequency: 'quarterly', amount: 25*100 }) break } break // Define the amounts for donors that donates quarterly or less case '1': switch (m) { // Spends highly case '3': frequencyamounts.component.amounts_once = [{ label: '€ 60', value: 60*100, }, { label: '€ 120', value: 120*100 }, { label: '€ 240', value: 240*100 }] frequencyamounts.component.amounts_once_default_amount =240*100 frequencyamounts.setValue({ frequency: 'once', amount: 240*100 }) break // Spends above average case '2': frequencyamounts.component.amounts_once = [{ label: '€ 15', value: 15*100, }, { label: '€ 30', value: 30*100 }, { label: '€ 60', value: 60*100 }] frequencyamounts.component.amounts_once_default_amount = 30*100 frequencyamounts.setValue({ frequency: 'once', amount: 30*100 }) break // Spends average or less case '1': frequencyamounts.component.amounts_once = [{ label: '€ 3', value: 3*100, }, { label: '€ 7', value: 7*100 }, { label: '€ 12', value: 12*100 }] frequencyamounts.component.amounts_once_default_amount = 7*100 frequencyamounts.setValue({ frequency: 'once', amount: 7*100 }) break } break } // Redraw the current form instance to reflect the dynamically added amounts & frequencies currentInstance.redraw().then(() => window.formPersonalizationActionExecuted = true)
Conclusion
These use cases illustrate the versatility of Novti CMS Form Personalization in creating personalized experiences for your website visitors. By leveraging segmentation, geolocation, behavioral data, and RFM analysis, you can optimize forms to drive engagement, and conversions.
For further assistance or inquiries, please reach out to our support team through https://admin.novti.io/support/request.
Start personalizing your forms with Novti CMS today and elevate your user experience!
← Support