The creation of a form is an easy part. Within a few clicks i will you show how to create your a form and how to set the details.
The first step is to add a new form at the Forms Overview page. When you havn't any forms yet, the page should look like this:
At this point you must type a name of you form like 'Contact Form' in the input field and click on the 'Create' button. By clicking on this button, a new form will be created. In case you have sub configurations, the form will be created in this sub configuration. When the form is successful created the form builder will be opened automatically and you should see this page:
The next step is to create fields to get informations about the customer who is contacting us. We need an email and a text field.
At first we add an email field. On the left sidebar, we are moving the 'Text' field into the upper 'Drag and Drop' area. This will add the field and opens the field settings popup.
The 'Field Settings' provides two different sections. The 'General' and the 'Validation' settings. This can differ by field type. In 'General' we must set an 'Internal Name' to the field. This will be used as identifier to post processing submissions. For our contact form we will enter 'email' as internal name.
For displaying a name for this field we have the possibility to set a 'Label' or a 'Placeholder'. The difference is, that the labels are placed on top of the field. And the placeholder within the input field. In our case we will set a label and we will name it 'Your E-Mail'.
An important feature is to validate the e-mail that is entered in the form by customers. By clicking on the 'Validation' section on the left, we can see validation settings. To validate an e-mail address, we will choose 'E-Mail' at the 'Regex Presets' dropdown. Additionally we check the 'Required' checkbox. The customer is not able to submit the form unless an valid e-mail address is entered.
After finishing the field settings we click on apply and we see the field is set in the designer.
The next field will be a 'Text Area' to show a multiline input field. We want to use this field for a message. Like the 'Text' field for the e-mail, we will moved the 'Text Area' to the 'Drag and Drop' area at the bottom.
For the 'Internal Name' we will use 'message' and the 'Label' will be 'Message'. Further we set this field as required in the 'Validation' section on the left.
The last step in adding fields is the 'Submit' button. This button must the added to submit the form. We add the 'Submit' button from the fields sidebar and place it below the message field. The 'Internal Name' is at this button not important, but it must be set. The important setting is the 'Placeholder'. This placeholder is used as the text within the button. We will set it to 'Send'.
Your form should look like this:
On the left sidebar is the section for 'Submit Actions'.
The last step is to set the behaviour, what happens when the form is submitted. There are two different type of actions. The first one is the action on customer side. We have two options. A: Show a message; B: Redirect to another page. For your contact form we are using the 'Message' options and set the text to 'Thanks for contacting us.'
The customer submit action is done. The next step is that we want to receive an email when a customer send us a message. To archive this, we add a submit action in the settings below.
We are choosing the 'Send Mail' submit action in the dropdown. At this point, the submit action is added and we can start to configure the settings. By default the submit action will not used, because the 'Run on version states' are not enabled.
HINT: The version states are important for websites that have different submit actions in preview and live environment.
In our contact form, we are enabling both checkboxes for the 'Non approved' and 'Approved' versions. The mandatory fields are 'From', 'To', 'Subject' and 'Template'.
HINT: To send an email to the customer, you could use the 'To - Value from field' field to set the receiver to a field input like 'E-Mail'.
Our settings are:
Save the form and we are finished. :)