Elements - Forms

Creating forms in Sitejet is pretty straightforward: create a form container and put the form fields and textareas you need inside. You can also make use of our form presets, which create a small base form with the most common input fields, a captcha and a submit button. Let's do just that and go into more detail about all the elements and a couple tipps and tricks to get your forms to the next level.

In this article

Creating form by using the form preset
Basic settings

Form elements
Text input
Number input
Email input
Phone number input
Textarea
Checkboxes
Radio buttons
Dropdowns
Date & Time Picker
Form button
File upload button
Captcha

Including regular elements
Conclusion

Creating a form

You can find the form element by right clicking inside the editor, choosing Add Element in the context menu and browsing to Form, to paste it after the currently selected element. Another way is being shown in the image above:

  1. Select Add content
  2. Go to the Elements tab
  3. Find the form icon and double click or drag it onto the canvas where you want it

  1. This will create an empty container, that is necessary to contain all the necessary form elements.
  2. Note this Form entry in the breadcrumbs. By clicking you will always get access to the basic settings of the form.

Creating form by using a preset

This works similar to importing the regular form element. For presets this is the only way of accessing them, though.

  1. Again, click Add content to open the overview panel to the left.
  2. Browse to the Presets tab, if not already active.
  3. Choose Forms from the accordions. This currently presents two variations of the same basic form to you. Choose the one you prefer.

Now we already have a basic form ready to go!

  1. This preset automatically sets up a form containing an input field for the name, phone number, email address and a text area as well as a Captcha and a submit button.
  2. Note that with a preset there come additional options to customize it further, e.g. background colors and input stylings. So styling the form requires no CSS knowledge when using the form preset. You can also switch variants here.

You can still enter the basic form settings when going further down the element hierarchy:

  1. The puzzle icon will always open up the according preset settings in the left panel
  2. Clicking Form opens the form settings panel

Basic Settings

Here you can enter custom texts and formulate a message to the recipient.

  1. Give your form a nice title.
  2. Enter messages for successful submission or an error text in case something went wrong. You can also enter a redirect page that opens once the form has been submitted.
  3. Here you can set a custom recipient email-address, e.g. for testing purposes you can enter your own email and see the result in your inbox. If recipient is empty it will send to the primary email address connected with the project. In the email text you can type whatever you like, this will be followed by all the inputted data in the email later on.
  4. These settings are standard settings that all elements have in common. You can determine visibility on mobile devices, animate elements and distribute classes in Markup & Style etc.

Form elements

Using the following elements you can put together a form for almost any purpose.

a. Text input

Text elements are useful when entering plain text is required. This can be used for names, titles, address lines and so on. You can choose to use labels, which are displayed above the input field or stick to placeholders that show the placeholder text inside the input field, until it is overwritten. You could also use both if needed. Check Required if the input needs to be filled in before submission, otherwise the form cannot be submitted.

b. Number input

A number input is useful when entering digits but no text. The browser automatically enables you to increment or decrement the amount by 1. You can set minimum and maximum values and a step size for this, too. Check  Required if the input needs to be filled in before submission, otherwise the form cannot be submitted.

c. Email input

Email inputs allow for only one input type: emails. The browser already recognizes false inputs (e.g. no usual email format, missing @, etc.). The label and placeholder work the same as text and other inputs. Check  Required if the input needs to be filled in before submission, otherwise the form cannot be submitted. 

d. Phone number input

This works the same as the inputs mentioned before. Use it for phone numbers only.

e. Textarea

Text areas offer more space to write entire texts. This is perfect for messages or detailed descriptions. The amount of Lines is useful when determining the height of the textarea field, but usually it's being overwritten by CSS styles, e.g. when used by a preset. Check Required if the input needs to be filled in before submission, otherwise the form cannot be submitted.

f. Checkboxes

Checkboxes are great when using multiple choices within the form. This also means, other than radio buttons or dropdowns, that you can select more than one option. Highlighted to the right you can see the result.

  1. Enter a label to give a short summary what this checkbox is about. You can omit the label if you like to display only the selectable options.
  2. In this line you can enter new options for the list below. You can create new options by simply hitting [ENTER] to quickly create your list of options.
  3. Here are the options you entered. You can rename them, change the order or determine whether they are required or not. This is useful when creating agreements before submitting the form, i.e. when asking to check the privacy declaration first.

g. Radio buttons

Radio buttons work similar to checkboxes, but you can only choose one option at a time and you are unable to deselect an option, only switch to another one. You can also quickly enter your options when hitting [ENTER] in the Create new option input.

h. Dropdowns

Dropdowns also allow for choosing a certain option from a list. Similar to radio buttons you can only choose one option, but in this case you can choose whether picking an option is required. Also deselecting is possible by setting the dropdown to its standard value. You can also quickly enter your options when hitting [ENTER] in the Create new option input.

Dropdowns can help keeping the form simple and tidy, in case there are a lot of options to choose from.

i. Date & Time picker

Usually a date-time-picker requires external JS libraries but Sitejet got you covered! Everything you need is already included in our Date & Time picker element.

As usual you are able to use labels or placeholders for this input and also whether it is required to fill out or not.

In the Date & Time accordion you can choose whether you want to pick the date, the time or both. Choose a date format that suits you and narrow the time of day if necessary, to make only certain hours choosable, e.g. opening hours for a reservation. You can also enter the time intervals from which your user can choose, e.g. 60 Minutes only allows to choose 12:00 AM, 13:00 AM, 14:00 AM etc. whereas 15 Minutes allows to choose from 12:00 AM, 12:15 AM, 12:30 AM etc.

Week numbers give additional information on your calendar.

Embed displays the whole calendar instead of an input field that triggers the calendar as a popup when clicked.

In the Weekdays accordion you can choose which weekdays your user will be able to pick a date from.

You can also limit the choosable dates within a certain time span by using Minimum date and Maximum date.

In this image you can see how an embedded date & time picker looks with a couple restrictions: note how some fields are lighter in color; those options cannot be picked by the user. In this example we specified that we can only pick a time between 1:00 PM (13:00) and 3:00 PM (15:00) with a 60 Minute time interval, thus giving us 3 options to choose from. In the calendar we made Mondays, Thursdays and Sundays unavailable.

Minimum date and maximum date work the same as Minimum time and Maximum time, but grants a couple more options. You can either set a fixed date to restrict a certain timespan or you can use a dynamic method which takes days before or from today into account. In the example above we set Maximum date to 0 days from today, which is why there are no days available to pick after "today", that is the 17th of September.

j. Form button

To submit your form a button is required. The form button element can have three functions: 

  1. Reset the form and delete all inputted data
  2. Submit the form
  3. No action (for whatever reason)

k. File upload button

You can enable your user to upload files on his own, e.g. for application references. Enter the file formats you allow to be uploaded and whether it is required or not. When submitting the form this file will be an attachment to the email. You may want to specifiy a maximum file size in case your mail server doesn't allow files larger than a certain size.

l. Captcha

A Captcha is required in your form to prevent spam mails. Set a label or placeholder as needed and choose a text color and background color for your captcha image. A transparent background can be useful when having an image background or background texture in your form container, but it can also improve readability when non transparent.

Note that you cannot save your form unless there is a captcha element present. Use the form preset to always have your basic form already set up.

Include regular elements!

You can not only use form elements inside your form container. Sitejet also enables you to implement all its other elements as well, even whole presets. In the example above we included a two column preset with text in the left and an image in the right column, as well as an entire accordion with image triggers beneath. This way you can built any form you desire and give your users every information they need to submit the most valuable data for you.

Note that any element inside the form will not be part of the message your customer receives! Only inputted data in the form fields will be transmitted, along with each label or placeholder.

Conclusion

Sitejet offers you powerful features to make almost any form you desire. These can be complemented by using JavaScript to built complex order forms or calculators. By using presets even inexperienced creators will be able to built useful forms and even adjust some stylings without any coding knowledge. Experienced webdesigners can do the same, but expand as desired or get really creative with the possibilities. We hope you have a better understanding of our form features now!

What is a webhook?

A webhook is a push notification from a form on one of your websites to another server. Every time someone submits this form, the data will be pushed to your specified URL.

What can I use a webhook for?

By default every form entry is sent via e-mail to your customer. But it's also very common to process the form data through other services. 

Possible use cases might be:

  • Create a lead in a CRM (e.g. Salesforce, Pipedrive)
  • Book a slot in a calendar (e.g. Google Calendar)
  • Push the data to an instant messenger (e.g. Slack)
  • and many more

How to configure a webhook

If not yet done, add a form to your website, either by adding a form preset or a form element.

Open the edit mode for your form by double-clicking the form (not one of the form input elements) or by clicking somewhere into the form and double-click Form on the breadcrumb.

Now you see the editpanel for your form on the left side:

Provide your webhook URL behind Webhook and save the page (e.g. using [Ctrl]+[S] or [Cmd]+[S] on Mac). The next form submission will be pushed to the provided URL.

Request Payload

Every time someone makes a new form submission on the website, the following data will be sent to your specified URL.

Parameter Description
data
The submitted form data in JSON format. For example:

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

form_id
The identifier used to uniquely identify the submitted form. This is a simple number, for example "12345".

form_name
The name/title of the submitted form.

submitted_at
The submission date and time, formatted in ISO 8601, for example Thu, 21 Dec 2000 16:01:07 +0200

Using the form webhook with Zapier

Zapier provides workflows to automate the use of web applications together. You can push form submissions to Zapier and configure further steps to be made with that data. 

First create a new zap and choose Webhooks as a trigger.

Choose Catch Hook. Now Zapier provides you a webhook URL.

Copy this URL into your websites form settings as described above:

Save the website, open the public version of the website and make a test submission. After doing that go back to Zapier and Continue to Test this Step. Now your form submission appears here and you can configure Zapier to do further actions with your data.

Still need help? Contact Us Contact Us