Forms offer website visitors the possibility to get in touch with you. In this article, we will show you how to insert forms on your website and how to use them as best as possible.
Basic knowledge
The Editor offers you a variety of powerful pre-built sections. With the form sections, you can add a fully functioning contact form within seconds. Additional form elements allow you to adjust these pre-built forms according to individual requirements. "Captcha" elements are also part of every form preset and ensure that the form is filled in by a human and not by a computer.
By default, the form entries are sent to the customer's default email address defined in the Contact Data of the website. You can specify a recipient address in the form settings in the "Recipient" field. You can also add multiple recipients using this format: email@abc.com; anothermailaddress@abc.com; thirdone@my-inbox.io.
Tip: Are you already familiar with the customer portal? Here is where you can organize all the information about your customer, such as contact data, address, and login email address. If you have not entered an email address in the form settings, the form entries will automatically be sent to the customer's login email address. As soon as a contact form has been sent, all the information entered is also made available to view as a form entry in the customer portal.
Add a form
To add a form to your website click on the category Forms in the left sidebar. This will open the content panel that shows you all pre-built form sections (marked in orange) which are fully functional contact forms that consist of different form elements. Below the form sections, you can see all individual form elements (marked in blue). You can add or remove form elements from form sections to customize them to your needs.
Once you have dragged a form section onto the website, a fully functional contact form will be available. As you can see in the breadcrumb a form section consists of three different levels:
- The overall form section
- The form container
- And the form elements
As always, you can use the settings panel on the left side to adjust the form to your needs.
Form settings
With the form settings, you define the behavior of the form.
Use the "Title" field to enter a meaningful name. The advantage of doing so is that the form entries in the customer portal are sorted according to the name of the contact form. Thus you and your customer will always know where the website visitors have made their entries.
The "Redirect" and "Webhook" fields play a role after a form is submitted: In the "Redirect" field, you enter the URL or slug of the subpage to which you want to forward the website visitors after successfully submitting their entries. These are usually Thank you pages or the like, which are used with the help of "pixels", for example, to track website visitor behavior more accurately. You can read more about pixels in the article on inserting custom HTML, CSS, and JavaScript code. In addition, the input can be forwarded to external tools such as CRM systems via a webhook URL as soon as a website visitor submits the form. See the section on webhooks for more information.
In the form settings, you also define the recipient's email address, the sender's email address, and the subject. This can be useful, for example, for automatic email filters to sort form entries into specific folders.
Form elements
As mentioned earlier, next to pre-built form sections you will also find form elements under the category "Forms" in the left sidebar. Let's have a look at the form elements and their functions in more detail.
All form elements can be marked as "Required". If an element is "Required", the website visitor is informed that this field must be filled in if it is still empty when the form submission is attempted. Some elements also offer "placeholders". These fill the text field with sample content until it is overwritten.
1. Text input field
Text elements are useful when plain text input is required. This can be used for names, titles, address lines, etc. You can add labels that are displayed above or next to the input field and use placeholders that are shown in the field to e.g. give the website visitor an example of what information should be added in that field.
2. Number field
A number field is useful when input is expected to contain numbers not text. Minimum and maximum values can be specified for this field, which is useful for orders, for example.
3. Email field
With an email field, you can make sure that the website visitor enters a correctly formatted email address. The browser detects incorrect entries (e.g. no common email format, missing "@" symbol, etc.) and alerts the website visitor when submitting so the email address can be corrected.
4. Phone number field
This works in the same way as the input fields mentioned above. Use it only for phone numbers.
5. Text area multi-input field
Text areas offer more space to write entire paragraphs. This is ideal for messages or detailed descriptions. The number of lines is useful for determining the initial height of the text field, but with modern browsers, this can often be customized by the website visitor.
6. Checkboxes
Checkboxes are great if you want to have multiple choices within the form. Add more than one option if desired. The names of the options can be changed at any time. For each option, it can be specified that it is "Required". If this field is enabled, the system checks whether the website visitor has clicked on this field when sending the form. If they have not, they will be informed accordingly.
7. Radio buttons
Radio buttons work similarly to checkboxes with the difference that only one option can be selected.
8. Dropdown lists
Selection lists or dropdown lists allow website visitors to select a specific option from a list. If the field "Multiple" is clicked, several options can be selected at the same time - similar to checkboxes. If the field is not clicked, selection lists work similarly to radio buttons: only one option can be selected. You can also specify whether a selection is required. The "Please choose" text is also customizable.
Dropdown lists can help keep the form simple and neat if there are many options.
9. Date and time fields
Date and time fields are useful for allowing website visitors to select a specific date and time.
In the "General" section, you can assign a label and placeholder text as usual and specify whether a date selection is required.
In the "Date & time" section you can specify whether the date, time, or both should be selectable. Select the desired date and time format and limit the time of day with the minimum and maximum time fields if necessary. For example, you can make reservations during the opening hours of a restaurant. The time intervals from which the website visitor can choose can also be adjusted. For example, the default "60 minutes" only allows the selection of 12:00, 13:00, 14:00, etc., while "15 minutes" allows the selection of 12:00, 12:15, 12:30, etc. Week numbers can be displayed for a better overview. "Embed" displays the entire calendar instead of an input field. If the calendar view is not embedded, the calendar is displayed below the input field when clicked.
The images show the difference between a "non-embedded" element (first image) and an "embedded" element (second image).
In the "Weekdays" section, the selectable weekdays are specified.
If you want to specify the earliest and latest possible date, enter it in the "Minimum date" and "Maximum date" sections. "Without" here means that there is no restriction. "Fix" defines a certain day. "Dynamic" allows you to set a date in the future based on the current day. So, with the default "5 days from "today" for the "minimum date" for example, website visitors can only select dates that are at least 5 days in the future. This gives you or your customer enough time to respond to a request. If you only want to plan a maximum of 2 months for the future, proceed as follows:
- Enter the number "2" next to "Maximum date"
- Click on "Days from today"
- Choose "Months from today"
10. Form button
At least one button is required for website visitors to be able to submit a form. The form button element can have a total of three functions:
- Resetting the form and deleting all entered data
- Sending the form
- No action (suitable for executing your own javascript, for example)
In addition, you can adjust the design of the button to your needs.
11. File upload element
Use this element if you want website visitors to be able to upload files themselves. In the "File formats" field, enter all file formats or types that are allowed to be uploaded. For example, you can enter ".jpg, .png" to allow JPG and PNG files. You can also specify "images/*" as the file type to allow all image file types at once.
This field can also be marked as "Required".
When submitting the form, this file will be attached to the email that's sent to the recipient's email address. Those files will not be hosted by us. Therefore the file size upload limit is based on the maximum file size that is allowed by the email service provider to receive.
12. Captcha
- Use an e-mail address managed by us and created with a domain registered through us as the recipient of the form entries
- Use third-party forms by inserting the third-party embed code into your website project, for example with an HTML element
13. Normal elements
Not only form elements but also normal elements can be used within the form container. It's even possible to use entire presets. For example, combine column, accordion, or other presets with the form container to create any desired form design.
Info: During the submission of a form entry, only the website visitor's inputs are transmitted.
Test forms
You can already test whether the form works on the preview website. The website does not have to be published yet. Just use the form as a website visitor and see if you or your customer has received the email notification or if the form entries show up in the customer portal in case you didn't enable the email notification. Usually, the notification should arrive within 5 to 10 minutes.
If you test the form several times in a row, your IP may be automatically blocked for 24 hours and you may be prevented from submitting further form entries. By this mechanism, we protect you and your customers from spam. To use the form again before the 24 hours have expired, you can simply delete your last entries in the customer portal under "Form entries" for the respective form you have tested. Afterward, you can submit form entries on the website again.
Webhooks
A webhook pushes information from a website to another server. In this case, webhooks can be used to send form entries to another server. Each time a website visitor submits the form, the data will be sent to the URL you specify.
What webhooks can be used for
By default, each form entry is sent to your customer by email and made available on the customer portal. It is also common to process the form data via other services.
Possible use cases are to:
- Create a lead in a CRM (e.g., Salesforce, Pipedrive)
- Book a slot in a calendar (e.g. Google Calendar)
- Transfer data to an instant messaging platform (e.g. slack)
- And much more
Set up a webhook
If not already done, add a form on the website. How these works has already been explained in the "Add form" section. Then, switch to the form settings by double-clicking on "Form" in the breadcrumbs.
In the settings panel, you will now see the "Webhook" field in the "Messages" section.
Depending on which service you want to associate with your form, the URL to be entered here will vary. You can find out which URL to enter here in the documentation for the selected service. As soon as you have entered the URL, confirm it with the [Enter] key and then save the project.
Request Payload
Whenever the form is filled with information and sent, the following data will be sent to the URL you've entered.
Parameter | Description | |
data | Format the specified information as a JSON object. Example:{ "Name": "John Doe", "Phone": "+1 2345 67890", "Email": "john@doe.com", "Message": "Hello World" } The names that you have entered in the "Label" field will be used.
|
|
form_id | A unique number that uniquely identifies this particular form. This will be handled for you in the background. | |
form_name | The name of the form is entered in the "Title" field.
|
|
submitted_at | The date and time when the form was sent, formatted according to ISO 8601, e.g. "Thu, 21 Dec 2000 16:01:07 +0200" | |
Use webhooks with Zapier
Zapier.com provides workflows to automate the sharing of information between web applications. For example, form entries can be sent to Zapier and processed in further steps. At Zapier.com, such automation processes are referred to as "zaps". First, create a new Zap and select "Webhooks by Zapier" as the trigger.
Once you set up the trigger and move on to "Test" you will see the individual webhook URL.
Copy this URL into the Webhook field:
Save your changes and perform the following steps:
- Move your mouse over the preview (eye) icon on the left side of the top navigation
- Click on "Open preview website" in the dropdown list that opens
- Now enter a few test values in the form on the website and submit the form
- Then go back to Zapier.com and click "Test this step"
The test values are now displayed here if you have done everything correctly. You can then configure further steps for processing the data. Depending on which third-party tool the information is transmitted to, further steps within the tool and Zapier may be necessary.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.
Comments
0 comments
Article is closed for comments.