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 your admin.

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 below 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

A captcha ensures that the contact form is not misused for spam mails. If you deactivate the "Send mail" option in the form settings, you can also remove the captcha field from the form. In this case the form entries will be listed in the customer portal. If you leave the "Send mail" option activated, the captcha is mandatory unless one of the following two alternatives is used:

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

Without these alternatives, it is not possible to save the project without a captcha element. Labels and/or placeholders can also be assigned to the captcha. Additionally, you have the possibility to set text and background colors for the captcha image. A transparent background can be useful if an image background or background texture is used in the form container. Keep in mind that the readability of the captcha is preserved.

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 should test your forms before making them available to website visitors. To do this, simply fill in all form fields, send the form entry, and check if it arrives at the email address you specified. This allows you to identify any possible errors before publishing.

Webhooks

With webhooks, you can trigger external actions by submitting a form. For example, you can automatically create a contact entry in your CRM system when a website visitor submits a form entry on your website. This allows you to automate your processes and save time.

Sitejet provides you with a webhook URL for each form in the form settings. In the form settings, enter the webhook URL of the external tool or service where you want to forward the form entry. Many CRM systems and other tools provide such webhook URLs.

Use webhooks with Zapier

Zapier is a service that allows you to connect different apps and automate workflows. With Zapier, you can also use the form entries on your Sitejet website to trigger actions in other tools. For example, you can automatically create a new task in your project management tool or add a contact entry in your CRM system when a form entry is submitted.

To do this, follow these steps:

1. Go to zapier.com and create a free account.
2. Click on "Make a Zap".
3. Choose "Webhook" as the trigger app and select "Catch Hook".
4. Copy the webhook URL provided by Zapier.
5. In Sitejet, go to the form settings and enter the copied webhook URL in the "Webhook" field.
6. In Zapier, continue configuring your Zap and select the desired action app and action (e.g. create a new task in your project management tool).
7. Test the integration and activate your Zap.

Now, every time a website visitor submits a form entry, the specified action will be triggered automatically.