Forms Setup and Troubleshooting

Convertri Tutorial – Forms Setup and Troubleshooting © Architech Labs 2020

Forms Setup and

Troubleshooting

Convertri Tutorial – Forms Setup and Troubleshooting © Architech Labs 2020

Before We Start…

Convertri uses an Atomic Forms system, which means forms are built of individual

components rather than a single form block.

This means you’ve got a lot more flexibility than you have with most page-builder systems

– but on the flip side, they can take a bit more wiring up.

This walkthrough will take you through setting up a form, as well as how to fix common

issues. But, just in case you need a quick fix, here’s the two most common reasons your

form may not be submitting your data:

• Your submit button is set to the wrong mode. If you set your submit button to Link

or Download, this will override the submit function.

• You’ve not assigned types to field inputs in your form. This means Convertri won’t

know which field matches up with the data your autoresponder is expecting.

You’ll discover how to fix both of these in this guide.

How to Build a Form

Now: building a form, soup to nuts.

There are two elements to every form: form inputs, which are the elements you drag onto

your page for your prospects to enter their details, and the behind-the-scenes Forms

configuration.

Configuring the Form

It is a good idea to configure your forms before you add input elements to your page. There

are three ways to do it: API, HTML, or Email.

• Form API’s let you connect to popular services for easy integration (e.g. Mailchimp)

• HTML lets you embed your own form code

• Email lets you send submitted form information to your email

When a form is successfully connected to your page, a red check will appear on the Forms

button in the top toolbar.

TIP: You can also add Google Forms to your pages. Find out how to do that here.

Convertri Tutorial – Forms Setup and Troubleshooting © Architech Labs 2020

To set up an API form:

API’s are the third-party services Convertri integrates with, e.g. Mailchimp or Aweber. To

connect an API service and add a form:

1. Click the Forms button in the top toolbar.

2. In the Configure Forms dialog, click the type of service you want to integrate:

Autoresponder, or Webinar. Then, choose your service from the menu.

3. If you haven’t integrated your service already, you’ll be prompted to open

Integrations in a new tab. You can integrate your services (or remove them) at any

time by heading to the Dashboard, and clicking Integrations in the left hand menu.

4. Depending on the service you connect, you’ll be prompted to choose the list you

want your form to add prospects to.

5. Connect the form fields in your service to the form inputs you’ll add to your

Convertri page. When you select a field type here, that’s the field the information

will be entered into in the autoresponder or webinar service. If you want to collect

information that doesn’t have a corresponding field type, you can use any one that

isn’t already mapped and match it using the Properties panel when your Form Input

elements are selected. Some form fields are fixed, so they cannot be changed.

6. When you’re done, click Thank You Page URL to enter the URL of the page you

want your prospects taken to after they click Submit.

7. Click Done.

Convertri Tutorial – Forms Setup and Troubleshooting © Architech Labs 2020

You can connect both autoresponder and webinar services to one form, to sign up

prospects to both lists at once: simply repeat steps 2-5 to add another service.

Your form is connected to your page, and you can now add form inputs.

To set up an HTML form:

You can use HTML for any service that provides an HTML form embed, which includes 99%

of autoresponders. You can find your HTML form embed code in your autoresponder. It

should look something like this:

The specific service used in this example is Mailchimp, but it will work the same way for any

service. Some services offer both an HTML and (usually much shorter) Javascript version –

only copy the HTML version! Convertri cannot get the data it needs from the Javascript

code.

NOTE: With HTML forms, Convertri is simply hosting code provided by your

autoresponder. This means the redirection (thank you page) step will be set in the

autoresponder rather than Convertri.

1. Click the Forms button in the top toolbar.

2. In the Configure Forms dialog, click HTML Forms, New Form, and then Form from

HTML Code.

3. Give your form a name, and enter the HTML code for your form. Click Create.

4. Click the small arrow to the right of your form name to connect it to the page.

5. Click Done.

Your form is connected to your page, and you can now add form inputs.

Convertri Tutorial – Forms Setup and Troubleshooting © Architech Labs 2020

To set up email form notifications:

You don’t need an autoresponder service to collect form data. You can get form

information sent directly to the main email address on your account. Here’s how:

1. In the Page Builder, click Forms in the top toolbar.

2. Click Email in the left hand menu, and toggle email notifications to On.

3. Edit the subject line if you need. Email notifications will be sent from

[email protected], so be sure to add that to your VIP or

contacts list.

4. When you’re done, click Thank You Page URL to enter the URL of the page you

want your prospects taken to after they click Submit.

5. Click Done.

Your form notifications are all set up, and you can now add form inputs.

Adding Form Inputs

Once you’ve connected a form service, HTML form or an email form, it’s time to add the

form inputs. These are the elements your prospects will interact with on the page.

You can find form inputs in the Form Elements menu on the Elements tray.

Convertri Tutorial – Forms Setup and Troubleshooting © Architech Labs 2020

Convertri currently has the following form

inputs available:

• First Name – a text input automatically

assigned to the “first name” field type

• Last Name – a text input automatically

assigned to the “last name” field type

• Email – a text input automatically

assigned to the “email” field type

• Text Input – a text input with no

automatically assigned type

• Submit – a submit button

• Multiline Textbox – for longer messages

and responses

• Checkbox –for multiple choice questions

• Radio Button – for single choice

questions

• Dropdown – dropdown menus, e.g.

countries or states

• Credit Card Input – automatically

assigned to “credit card” field types

• Bump Sale – a checkbox you can

connect to an additional product

Each one needs to be “mapped” to a form field type, which you will have seen when you

configured your form. Put simply, Convertri needs to know what kind of data to expect, so

it shows up correctly on the other side.

NOTE: Some form input elements are mapped automatically with their corresponding

types. For example, First Name, Last Name, and Email. Credit card input form elements are

already mapped to your payment processor’s settings, so they don’t need to be configured.

Here’s how to add form inputs:

1. In the Page Builder, click the Form Elements button in the Elements tray. Choose

the input you want to add first, and drag it onto your page.

2. In the Properties panel, click Form Field settings to map your form fields to the

values you assigned when you configured your form service. Choose your field type

to make sure the input is sent to the form service correctly. If you want to collect

information that doesn’t have a corresponding field type, you can use any one that

isn’t already mapped and match it using the Forms dialog.

3. Choose whether this field is Required, and whether you want the field validated, i.e.

as a real email address.

IMPORTANT: If you’ve got more than one form entry field on your page with the same

type, Convertri will send the one that has the most data in it. So if you’re using an API, you

can have multiple forms on your page all attached to the same list, and Convertri will

always send the data from the one that’s been filled in.

Submit Buttons

Finally, to complete your form, you'll need a Submit button.

1. Click on Form Elements in the Elements tray, and drag a Submit button onto your

page.

2. With your Submit button selected, in the Button Settings section of the Properties

panel, choose Sign Up from the Mode dropdown menu.

3. You can also change the button’s colour, font and style in the Properties panel.

IMPORTANT: Only the Sign Up mode will submit a form. Other modes such as Purchase or

Download will trigger different outcomes, so if your viewer has added form data this will

not be sent.

Forms Troubleshooting

So you’ve followed the instructions above, but something’s not quite right. Let’s find out

what’s happening.

My form isn’t submitting data!

You’ve set up a test form, filled it out and hit Submit – but nothing’s come of it. Here are

some common reasons:

• Your Submit button is set to the wrong mode. Head to the Properties panel, and

make sure your Submit button is set to Sign Up mode.

• You’re in Preview mode. Try submitting your form on the published page instead.

• You’re checking the wrong place. When you have a third party API such as

Mailchimp, you need to check there for form responses. Email form notifications

will be sent to your Convertri account email. HTML form responses will be sent to

wherever is specified in the code: either a third-party service, your own email, or

anywhere else.

My form data is all mixed up!

Are you collecting first names as if they’re last names? Are you asking them their favourite

colour, only for their response to show up under “shipping address” in your autoresponder?

• Your form fields are mapped incorrectly. Form fields must be set up in your

autoresponder, and they must correspond with the form inputs you put on your

Convertri page. For example, in Mailchimp, you need to create a new form and add

fields for Name, Email, or any other data you want to collect. Then, in Convertri, you

need to map the form inputs to those fields to make sure the right data goes to the

right place.

I have an HTML error!

Adding HTML forms can be tricky, which is why we say go with a third-party service if you

can. These are some common HTML form errors, as well as what they mean. There are too

many possible solutions to fit in this guide, but these should give you a lead:

• There is no “action” attribute. Without one, the form just sits there, because you

haven’t specified a next step.

• You’ve only copied and pasted some of the code. Check you haven’t missed out

the opening and closing <form> tag.

TIP: If you’re still having issues, pop over to the Knowledgebase or email support at

[email protected].