Use the event element "User submits form"
This form is the link between your website and Quentn (unless you use a Quentn landing page). Although it is a powerful and flexible tool, you can easily embed your generated form into a website later on. Even if you work with landing page builders like Leadpages, Optimizepress & Co. you can use the Quentn Form Builder without running into any problems.
Info: Responsive design
The forms are "responsive" and therefore automatically adapt to smaller displays, such as smartphones.
Step-by-step: This is how you create your form
- Drag & drop the desired contact fields such as the salutation, first name, and last name into the form. Of course, you can create your own contact fields.
- Drag the structural element Horizontal Container into the form. In this container you can arrange form fields (first name, last name) next to each other.
- You can customise the headline by clicking on it. You can enter and configure your headline on the right-hand side.
- In the right-hand form you can adjust the form elements as required (text, colour, size, alignment, etc...)
Tip: Use fewer required fields
The less personal data you ask for from a potential customer, the greater the chance that they will fill out your form. If a contact field is mandatory (e.g. email), check the box under "Field Settings".
The form settings
It is here that you set where the user is directed to when they have submitted the form:
- To a thank you message which is generated by the system. Then all you have to do is enter the appropriate text,
- To a thank you page which you design yourself and place online.
In the lower section of the settings, you can determine how to proceed with users from whom you already have the confirmed e-mail address. If you leave the check mark set to "Default", the same confirmation message will be displayed to the contacts as to the unknown contacts. This could sometimes lead to confusion, as contacts are told that they will receive a confirmation email in a moment. However, as contacts do not (cannot) go through the double opt-in twice, the email will not come.
Therefore, we recommend directing contacts who have already entered data to a separate URL.
Embed form onto website
To embed the form you created onto your website, click on "Code Snippet" in your form. There are three ways to insert the created form onto your website. The easiest, and therefore recommended, option is using JavaScript. In addition, HTML and Raw HTML are also available.
Step-by-step:
- Click on the green button which says "Copy" - the code from the grey box will now be in the computer's cache.
- Switch to your website where the new form should appear. Insert the code at the appropriate place: either via right-clicking on the "Context menu" or simply using the key function [CTRL] + [V] (Windows).
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 your form will look identical to how you previously designed it. If you edit your form again, you don't have to copy the code again and embed it on your website because it runs in the "iFrame" and fetches the fields directly from our server.
HTML:
Here the form is displayed as part of your own website. However, the input is sent to Quentn when it is submitted. The style information from the form builder is used as part of the HTML. Here you will also find your form according to your design. However, if you edit your form later on, you will need to paste the code back into your web page.
Raw HTML:
This option is intended for certain third-party providers, such as Leadpages or OptimizePress. All style information from the form builder is not used here, but rather the information contained here is only used to send the form input to the correct address, i.e. your Quentn campaigns.