Introduction

Use the "Form submit" event element.

This form is the link between your website and Quentn (if you are not using a Quentn landing page).

You can design it yourself and then integrate it conveniently on your website, even if you work with landing page builders such as OptimizePress & Co.

Info: Responsive design

The forms are created in responsive design and automatically adapt to smaller displays, such as that of a smartphone.

General information

Open the element with a double-click. It is recommended to work in full screen mode.
On the left-hand side you will find all your contact fields: blue are the standard fields, orange are the contact fields you have created yourself
Drag & drop the desired fields such as first name, surname and above all: e-mail into the form. You cannot save the form without this field.
To be able to position fields next to each other, click on Layout. Drag the Columns field into the form. Only 2 fields can be next to each other!
The button for registration is always at the bottom.

Tip: Use fewer required fields

The less personal data you request from a potential customer, the greater the chance that they will complete your form. If a contact field absolutely has to be filled in (e.g. email), check the "required" box under field settings.

Please note: The form can only be saved if either the e-mail address or the full address are mandatory fields.

Options & Design

Customize the headline and your form as well as the fields by clicking on the corresponding area. The highlighted area is highlighted in yellow.
Two tabs will then appear on the right-hand side: Options and Design
- Under Options, you can make all settings relating to text and content.
- Under Design, you can set the font type and size, colors, font alignment, etc.

Heading of the form

Click on the text "<Headline>". You can then enter the text under Options on the right-hand side.

Contact fields

Click on the corresponding contact field. For example, determine whether the name of your contact field should be above the field (then enter the text under "Label") or in the field (then enter the text under "Placeholder").

If you wish, you can also enter a help text for interested parties.

You also determine here whether the contact field should be required.

Button

To customize the button, click on it. Here you can also specify the text that should appear on the button under Options.

es_Button Options.png

Under Design, you determine the appearance of the button: Shape and color, whether it should be on the left, center or right, size, etc.

en_Button design.png

Preview

Under "Preview" you can see how your landing page looks on the PC and also on mobile. Click on the button to go to the preview or leave it again.

Save design

You can save your form design by clicking on the button.

en_Design speichern.png

Please note: Only the design settings are saved, not the contact fields. This means that as soon as you load the design, the font, color, size, style, etc. are adopted. However, you must always create the contact fields again in the form.

When saving, you can select whether a design should be overwritten or whether you want to save a new design. Click on "Save".

en_speichern auswählen.png

Now name your design so that you can find it again later under "Load Design".

Multi-level form

A multi-step form is particularly useful when it comes to higher-priced offers or if you need more data from your prospective customers but don't want to scare them off with a long form with lots of contact fields.

First, the contact enters their e-mail address, for example, and clicks on "Next". Then they enter their address details, and so on.

With Quentn, you can create multiple pages for your form.

To do this, click on "Add page" and configure the pages as you wish.

You can create a maximum of 5 pages!

To remove pages, click on the red cross and confirm that you really want to delete the page.

en_seite löschen.png

Fill out form automatically

If you send known visitors - i.e. contacts who are already in your Quentn system and have completed the double opt-in in the past - to your form via a campaign email or newsletter, you can automatically fill out the form so that the contact only needs to add information if necessary.

To pre-fill a form, you first need the link to the page on which the form is located. Insert this link into your campaign email.

Now you need to add the URL parameters to the link:

Insert a question mark at the end of the URL and determine which fields should contain which information. Use the placeholders to copy the exact names. To specify multiple fields, place an "&" between the parameters. Do not use spaces!

For example, we ask for the first name, surname and email in our form. This data should also be created in Quentn. The URL to the form with the preset data will look like this:

https://mywebsite.com/?first_name={{contact.first_name}}&family_name={{contact.family_name}}&mail={{contact.mail}}

When you send the link, the form is pre-filled with the existing data for known visitors.

Hide prefilled contact fields

If the form is to be pre-filled, you can specify under the "Options" tab whether the completed field should be visible to the interested party or not.

This means: The known data is written into the field, but it is not displayed to the user and only the open fields are visible.

en_versteckte Felder.png

However, sometimes the data records are not always complete, for example you want to pre-fill the first and last name, but the first name is missing for a contact. The contact will still see the field (because it is empty) and can therefore add the missing data.

Example: Affiliate ID

You can of course also transfer an affiliate ID and store it with the contact.

You should also make the following settings:

Drag your own contact field into the form in which the affiliate ID is to be entered
- Under "Options", check the box next to
- Pre-fill (you can also rename the name of the GET parameter here)
  Always hide

For everything to work, the affiliate ID must be present as a GET parameter in the URL that points to the website with the form.

It could look like this: https://mywebsite.com/?first_name={{contact.first_name}}&family_name={{contact.family_name}}&mail={{contact.mail}}&aff_ID={{contact.aff_ID}}

The form settings

Flood Protection

If this function is activated, the form can be sent up to 20 times within 60 minutes from the same IP address. All further attempts are blocked.

If the option is deactivated, the form can be sent as often as required from the same IP address. This is useful, for example, if many participants at an event use the same Internet connection.

We strongly recommend activating this function to prevent spam attacks.

en_Flood protection.png

Redirection (default)

Here you can set where the unconfirmed contact will be directed once they have sent the form:

on a confirmation message generated by the system
- All you have to do here is enter the appropriate text. The text provided is only optional.
to a web address that you design yourself and put online.
- Here you have to enter the URL

Redirection (already confirmed)

Here you can determine how to proceed with users for whom you already have the confirmed e-mail address (i.e. they have already completed the double opt-in).

If you leave the box ticked "Standard", the contacts will be shown the same confirmation message or web address as the unknown users. This could sometimes lead to confusion, as the contacts are told that they will receive a confirmation email straight away. However, as contacts do not (cannot) go through the double opt-in twice, the email will not arrive.

We therefore recommend redirecting contacts who have already entered their data to a separate URL.

en_Weiterleitung bestätigte.png

Integrate form on your website

To embed your created form on your website, click on Embed in your form.

Javascript (recommended)

Step by step:

First, copy the header script and paste it into the header area of your website.
Then copy the code from step 2 of the form and enter it on your website where you want the form to appear.

code snippet.png

Raw HTML

First create the code by clicking on the green "Generate HTML" button. Then copy the code and paste it into the appropriate place on your website.

The different embed codes

Javascript:

With this recommended variant, the form is displayed in an iframe. All style information is taken from the form builder so that your form looks exactly as you have previously designed it. If you edit your form again, you do not have to copy the code again and embed it on the website, as it runs in the iframe and fetches the fields directly from our server.

Raw HTML (coming soon):

This variant is intended for certain third-party providers, e.g. Leadpages or OptimizePress. All style information from the form builder is not transferred here. The information contained here is only used to send the form entries to the correct address, i.e. your Quentn campaigns.

Create form

Contents

Introduction

General information