Forms are an ideal way to get zero-party data from your customers (read more about the importance of zero-party data in our blog). On one hand, you can use simple forms to get contact details and information about your customers; on the other hand, you can use a form to directly start a campaign, e.g. as a registration for a webinar with automated reminder emails and participation confirmations.

In this tutorial, you'll learn how to create a simple first form in Friendly Automate and embed the code into your website.

Configure your Form

As an example, let's create a simple contact form that asks for the first name, an email address and a message. The entered data should be forwarded by email to a preset contact address. In the preview, the form would look like this:

To get started, click on "Components" on the left side of Friendly Automate, then " Forms" and then "New" in the upper right corner.

A popup appears that allows you to choose whether you want to start a campaign with the form or whether your form should stand alone. For a first simple contact form you choose the "Standalone Form".

Overview

To set up your form successfully, it takes three steps, which you can see in the three tabs above:

• Details: Here you can choose the name of your form and what will be displayed to the user after the input.
• Fields: Set up the input fields for your form here.
• Actions: Specify here how the data will be processed after input.

For your first form, you don't have to worry about the settings on the right side (category, published, etc.).

At the top right you can save your progress at any time.

Step one: Details

In the "Name" field, enter what you want your form to be called, for example, "Contact Form". This is an internal name that is only visible in Friendly Automate.

The "Successful Submit Action" determines what the user sees after they click the submit button. You have three options:

• Remain at form: The data is sent, but the user does not see a confirmation.
• Redirect URL: You can enter the link to a thank you page if you have set one up.
• Display message: A thank you text is displayed above the form.

The simplest useful option for a first form is "Show text". In the field "Redirect URL/Text" you enter the appropriate text. In the preview it looks like this after submitting the form:

If you want, you can save your progress in the upper right corner before moving on.

Step two: Fields

Now select the second tab "Fields". Use the dropdown menu to add a new field. The most important simple fields are:

• Text: For single-line text entries such as names or addresses.
• Text area: For multi-line text input like a contact request.
• Email: For email addresses.

For the name input, select a text field first.

Overview

A popup will appear with five tabs where you can configure the following settings:

• General: Here you set up the label (text above the input field) and the placeholder (text in the input field).
• Contact field: Here you can set up a link to a field in the Friendly Automate CRM, so that the corresponding fields in the CRM are automatically filled in or updated.
• Validation: Here you determine whether input of this field is required.
• Attributes: For your first form, we'll skip these settings.
• Behavior: For your first form, we'll skip these settings as well.

General

So stay in the "General" tab first. As the "Label" enter the description for the field, for example "First name".

Another option is to not show the label (select on the right) and enter a placeholder text, for example "First name", in the "Placeholder" field at the bottom.

This is what the form looks like with labels:

And with placeholders:

Contact field

Now go to the next tab called "Contact Field". In this important step you set which field in the Friendly Automate CRM this field will be linked to. This will automatically fill in or update the corresponding field in the CRM.

For the first name, select the "Contact First Name" field.

Validation

Now go to the next tab called "Validation". Here you indicate whether the field is required. If so, be sure to fill in the "Validation message". This is the text that will be displayed if the field is not filled in.

This is what the "Validation message" looks like in the form preview when the form is submitted without this field:

Attributes and Behavior

For your first form, we recommend skipping these settings.

Add field

Now click "Add" to create the field.

You will be taken back to the overview page, where you can see a preview of your new field. You can also see which contact field the field is linked to:

Create more fields

You can now create more fields in the same way. Again, in the "Fields" tab, select the respective field from the dropdown menu and proceed as described just now. Some examples:

• Last name: You could, of course, add a field for the last name identical to the first name (text field, link to "Contact Last Name").
• Email address: For this, select the "Email" option from the dropdown menu. This field is already automatically linked to the email field in the CRM.
• Text Input: For a message field, select "Textarea" from the dropdown menu. You should not link this field to a field in the CRM, as you probably don't want to save the entered message in the CRM.

Check form and adjust input button

Once you have created all the fields, you can check them in the overview. You can edit or delete the fields using the buttons on the right side.

You can easily change the order of the fields by drag-and-drop.

You can also see the input button at the bottom of the preview. You can edit the text of the button by clicking on the edit icon on the right.

If you want, you can again click "Save" at the top right to save your progress before moving on.

Step three: Actions

Finally, in the "Actions" tab, you define what happens to the data after it is sent. You can specify one or more actions. For a simple contact form, we will create only one action: the values of the form should be sent by email to an employee, so that the request can be processed.

To do this, open the drop-down menu and select "Send form results".

(The similar "Send email to user" action would simply inform the employee that the form has been submitted, without submitting the contents of the form).

A popup will open. Here you can enter the following:

• Name: Name the action here, for example "Send contact form to employee".
• Description: Optionally describe what the action does. This is only displayed in the actions overview and serves your own orientation.
• Subject: This is the subject of the email that will be sent to the employee.

💡
Fields like {formfield=firstname} can be inserted by using the buttons in the popup a bit further down on the right.
• Message: This is the content of the email that will be sent to the employee. You can customize the default message as you like.

• To: Enter the email address of the employee here.

You can skip the other fields and settings for your first form. Create the action by clicking the "Add" button.

In the overview you can now see the action you have created. You can edit or delete the action using the buttons on the right.

If you want, you can create more actions. Some simple possibilities:

• Send email to contact: The contact will receive a confirmation email for their request.
• Adjust contact's points: The contact receives points for making contact.
• Modify contact's segments: The contact is added to a segment.
• Double opt-in (DOI): The contact will receive an email to confirm their email address.

Once you have created your actions, your form is ready. Click "Save & Close" in the upper right corner to save your form.

Show & customize form preview

You will be taken back to the overview page of your form. You can now preview the form by clicking on the small arrow in the upper right corner and then on "Preview":

You can choose from a few simple design templates to customize the appearance of your form. To do so, click "Edit" at the top right, scroll all the way down and select a "Theme" at the bottom right.

Some theme examples:

no theme

Sunday

Neopolitan

Skyline

Embed the form into your website

Now you are ready to insert the form into your website. For your first form, select the auto-insert option. You can find the button on the overview page of your form:

A popup with two code options will open. Copy the Javascript code.

On your website you can now insert the Javascript code at the desired place. In Wordpress, select the "Shortcode" block and insert the code:

This is how the contact form would then look on the example website:

Evaluate the submitted data

The data that your customers send in via the form can be evaluated and used in several ways:

• Data in form fields linked to your Friendly-Automate-CRM will be automatically entered or updated in the CRM.
• You have planned further next steps via your entered actions. You will receive an email with the contact request or your contact will be assigned points.
• In Friendly Automate you can also see an overview of all form submissions. To access this, you have two options:

On the form overview page you will find a red button to the right of the corresponding form, which will take you to the submitted results:

Or you click on the form, then on the small arrow in the upper right corner and on "Results":

This is how an example result list looks like. You also have the option to export the data via the buttons in the upper right corner.

With this you know everything to successfully create a first simple form!

Do you have any questions? We are happy to help you via 📧 email, ☎️ phone and 👩‍💻 video calls.

Click here to go back to the main help page:

Friendly Automate