Elements - Forms

Forms offer website visitors the opportunity to get in touch with you. In this article, we'll show you how to use Sitejet to add forms to your website and make the most of them.

Table of contents

Basic knowledge

Add a form

Form settings

Form elements

Webhooks


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 add 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. You can specify a recipient address in the form settings in the "Recipient" field. 

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

All it takes to add a new form to your website is just a few clicks:

  1. Move your mouse over "+ Add content"
  2. Click on "Preset"
  3. Open the section "Forms" or search for "form"
  4. Select one of the available forms and drag it to the desired location on the website

Once you have dragged the preset onto the website, a fully functional contact form will be available. A contact form consists of three levels:

  • The preset
  • The form container
  • And the form elements

In the example below, an email form element is selected to show the structure in more detail in the breadcrumbs. You can use the preset settings on the left side of the screen to set design preferences for colors and display modes of the form. Font appearance the website is organized in the Theme settings.


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, Sitejet provides several form elements. In the following, we will go into these and their functions in more detail.

You can add more form elements by performing the following steps:

  1. Hover your mouse over "+ Add content"
  2. Click on "Form elements"
  3. Select the desired element and drag it to the desired position within the form on the website

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 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 upper picture shows, besides the setting options, the visual difference between an "embedded" element and a "non-embedded" element.

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 or to the form entries in the customer portal.

12. Captcha

A captcha ensures that the contact form is not misused for spam. 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. It is not possible to save the project without the 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 when using an image background or a background texture 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.

During the submission of a form entry, only the website visitor's inputs are transmitted.


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.

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

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" menu item in the upper right corner of the Website Builder (CMS)
  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.

Back to the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us