Forms

Forms offer website visitors the possibility to get in touch with you. In this article, we will show you how to use Sitejet to insert forms on your website and how to use them optimally.

Table of contents

Basic knowledge

Sitejet offers you a variety of powerful presets. With form presets, you can add a working contact form within seconds. Additional form elements allow you to adjust presets according to the individual requirements of your customers. "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, Sitejet will automatically send form entries 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" on the left sidebar. This will open the content panel that shows you all form presets (marked in orange) which are fully functional contact forms that consist of different form elements. Below the presets you can see all individual form elements (in blue). You can add more form elements to form presets to customize them to your needs. 

Once you have dragged the preset onto the website, a fully functional contact form will be available. As you can see in the breadcrumb a form preset consists of three different levels:

• The preset
• 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 email address, the sender 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 form presets 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 assign labels that are displayed above or next to the input field. Placeholders are also possible.

2. Number field

A number field is useful when input is expected to contain numbers but 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 height of the text field. This can be customized by the website visitor using a modern browser.

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. However, only one option can be selected at a time. After a selection has been made, exactly one option remains selected. Further options can be added by pressing the [Enter] key or by clicking on the checkmark icon on the right side.

8. Dropdown lists

Selection lists or dropdown lists allow you 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 setting a possible date and usually have to be created with Javascript. In Sitejet, it is sufficient to add this element and customize it according to your wishes. Sitejet offers you many settings for this.

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 faded in and out for better clarity. "Embed" displays the entire calendar instead of an input field. If the calendar view is not embedded, the calendar is displayed as a popup 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 select only dates that lie 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:

1. Enter the number "2" next to "Maximum date"
2. Click on "Days from today"
3. 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:

1. Resetting the form and deleting all entered data
2. Sending the form
3. No action (suitable for executing your own javascript, for example)

In addition, you can specify specific designs independently of other buttons.

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. Sitejet does not host those files. 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

1. Use an e-mail address managed by Sitejet and created with a domain registered through Sitejet as the recipient of the form entries
2. 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.

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.

Webhooks

A webhook pushes information from a website to another server. In Sitejet, 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 this works has already been explained in the "Add form" section. Then, switch to the form settings by double-clicking on "Form" in the breadcrumbs.

Alternatively, you can click on "Show form settings" in the currently selected form element (here using the input field as an example).

In the settings window, 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.

{
  "Name": "John Doe",
  "Phone": "+1 2345 67890",
  "Email": "john@doe.com",
  "Message": "Hello World"
}
		

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.

Click on "View Webhook" to display your individual webhook URL.

Copy this URL into the "Webhook" field:

Save your changes and perform the following steps:

1. Move your mouse over the preview icon on the left side of the top navigation
2. Click on "Open preview website" in the dropdown list that opens
3. Now enter a few test values in the form on the website and submit the form
4. 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.

Back to the top