How to create and use custom forms in your flow

Using a form in your flow is a great way to generate leads. When you use a form in Qonfi, all entered information, including the answers given by your user, are sent to the connected external app (e.g. e-mail, Klaviyo, Active Campaigns etc.). This way you have a complete overview of your user's needs when following up a lead and lead data can be automatically followed up within your connected external app.

Let's discuss the following steps on how to create and use custom forms in your flow. 

1. Connect with your external app 
2. Edit your default form settings 
3. Add custom form fields 
4. Connect your form to your flow 

1. Connect with your external app 

We currently support app integrations with: Klaviyo, ActiveCampaign, Copernica, DotDigital, Mailchimp. You can also connect with your own e-mail or send lead information to any external app using webhooks.

Go to Settings -> Apps and click on the preferred app to connect. 

2. Edit your default form settings 

Once you've connected your preferred external app, you can customize the default form settings. 

Go to Settings -> Forms. This is where you can manage your forms.

Customizing general text

In the ‘text’ overview, you can edit and customize the general text fields of your form.

• Form title: The title of your form.
• Form text: Shown below the form title. You can add additional context to your users.
• Form submit text: Text which is shown in the button which a user can click to submit the form.
• Form success text: Text shown after a user submitted a form.
• Form email results newsletter optin text: Text shown to make users aware to subscribe to your newsletter.

Adding multiple forms

You can use different forms in your flow. For example, you can show a different form given a specific answer combination of your users. In the ‘General’ overview, you can add multiple forms by clicking on ‘add form’. You can connect a specific form to your flow in step 4 ('Connect your form to your flow').

3. Add and edit form fields

You can further add and customize your form fields. A default form is already added to your account. At the ‘forms’ tab, you can click on ‘default form’ to add and edit the form fields. Once clicked, a popup appears. 

Adding custom form fields

By default, the following form fields are added to your flow: ‘First name’, ‘Last name’, ‘Email address’ and ‘Phone number’. You can add additional form fields bij clicking on the blue ‘+ add form field’ button.

Editing form fields

To edit a form field, you can click on the ‘pencil icon’ of the particular field you like to edit. Once clicked, a pop-up appears where you can edit the fields.

Choosing the right form type

You can choose 7 different form field types:

• Text: A single-line input field for entering text.
• Textarea: A multi-line input field for longer text.
• Number: An input field for numeric values only.
• Phone: An input field for entering phone numbers.
• Email: An input field that validates email addresses.
• Dropdown: A selection menu that lets users choose one option from a list.
• Spacer: An empty space used to add extra spacing between or beside inputs

Moreover, you can edit the following within a form field

• Name: text shown above the form field.
• Placeholder: a placeholder which you can use within the form field. 
• Width: choose wether the form field must be shown in full width or half width. 
• Visible: disable toggle to hide the form field in your form.
• Required: enable toggle to make the form field mandatory to fill. 

Mapping your form fields 

Submitted form data, including the custom form fields you’ve added, can be send to any third-party app (Klaviyo, ActiveCampaign, Dotdigital etc.). The added custom form fields can be mapped to existing properties within your connected app or can be added as new properties.

To ensure that the connected third-party app receives the added custom form fields in an existing property, you must first map them.

For example, we've added a custom form field 'job title' to our form and are using Klaviyo. Within Klaviyo we already have an existing property called 'job title'. We can map the Qonfi Form Field "Job title" to the "Job Title " field of the third-party app (Klaviyo) so that it receives the job title input correctly. 

4. Connecting your form to your flow

Once you've setup your form, you can connect it to your flow. You can either use a form at the end of your flow or in the middle of your flow. Lets discuss both options. 

Option 1: Using a form at the end of your flow

1. Go to "Configure" and locate your last question(s).

2. For each last question, click the "finish flag" icon on each answer to edit the follow-up.

3. Choose "Show a form" as the follow-up type.

If you have multiple forms, select the one you want to show here.

4. Choose where you want to push the submitted form data to by enabling the toggle of the connected app. In our example, we can send the data to our own e-mail and Klaviyo by enabling the toggles "Send answers and contact data to an e-mail address" and "Send answers and contact data to Klaviyo".

Option 2: Using a form in the middle of your flow

1. Go to "Configure" and drag & drop the "Form" step into your flow (click advanced on the right side, see example below).

2. Edit the step by clicking the pencil icon.

3. If you have multiple forms, select the one you want to use here by using the dropdown.

4. Choose where you want to push the submitted form data to by enabling the toggle of the connected app. In our example, we can send the data to our own e-mail and Klaviyo by enabling the toggles "Send answers and contact data to an e-mail address" and "Send answers and contact data to Klaviyo".

5. To ask a follow-up question after the form is submitted, simply add an answer to your "form step" and connect it to the follow-up question.