Form Builder - (Contact and application forms)

“Form” is the module you use to add contact or application forms to a webpage. This module offers many different options and can become quite complex. Once created, it can easily be re-used for various pages.

I. Steps

To create a form, you have to

1. Open the Form Builder in Contentstack

2. Select the Contact Form Content Type

3. Click + New Entry in the top right

4. Define an internal name and save

5. Define the details from steps 1 to 6

6. Save

Afterward, go to the web page and the content block where you want to include the form. Click the content module “[A] Form”, select the form you created, and “Choose existing entry”.

Step 1: Form Activity Type

For now we offer the following activities:

• ContactForm - the regular form 💡 set as Default, if you don’t choose from the selection.

• Download - e.g. for Whitepaper downloads

• Event registration - to be used for forms, e.g. from the event calendar

Step 2: Fieldset

In “Fieldset” you define the actual fields of the form.

Please follow the detailed instructions in part II of this manual.

Step 3: Submit Button Label

Here you can define the label for the submit button. If you provide no text in here, the text will be “Submit” (or the respective translation).

Step 4: Lead Generation notification settings

💡 This section has been updated in June 2023 to reflect the changes made in connection with the lead outbound to C4C. We renamed the item “3: Lead generation notofication settings” and put the internal Recipient information at the end of this section. With “Subject list” we also added a new feature.

1. Create a Subject list for an individual contact form

Using the "Subject list" will create a drop-down in the web contact form from which the user can select the topic of interest.

Subject list label

Here you can label the dropdown in the frontend. If you leave it empty you will see “Topic”.

Example:

Subject list

Here you provide the Subjects shown in the dropdown in the frontend and provide the additional identifiers for C4C.

To create a list, click “Add a group entry” to open the Instances.

Click “ + “ to create more instances.

1. Subject name in local language

The subject name will be displayed in the frontend as a dropdown in the contact form.

2. Subject code in English

The subject code will be used as an additional identifier in C4C. It will be added to the lead “Name” and will be inbounded together with the url (which visible in “Touchpoint Info”).

💡 Shorten the subject name, if you provided a long text for the customer.

Contentstack

C4C

Recipients (email)

1. Create or select one or multiple recipients for the internal notification. To do so, please create or select an Entry of the Content Type “Form Notification Contact”.

2. Set a subject → This will be used for all internal notifications. A notification will be sent to all recipients on each form submit.
💡 If you e.g. have a form for generating leads, it might help if the notification subject contains the name of the campaign.

3. Set a static body text → Optionally, you can provide some static body text, e.g. an internal instruction on how to process form submits → The submitted field values will be displayed below the body text in a table.

Recipients of notifications

To add recipients to a notification, you have to create an Entry in the Content Type “Form Notification Contact” or choose an existing one. You can create one entry with multiple email addresses.

Step 5: Autoreply Email to the Submitter

1. Set a subject → This will be used for all autoreply emails. A notification will be sent to all recipients on each form submit.

2. Set a static body text → The text in here will be used in the autoreply email. The email will be sent using a branded, common template. Also, this is an option to add marketing related information or e.g. a link to a download.

Step 6: Instant Feedback

Instant feedback appears on the web page after a form has been submitted. Use this feedback, for example, to ask the submitter to check the inbox or a “Thank you”.

We recommend not keeping it too short. This helps the user to better recognize the text, especially if you have much text above and/or below the form on the web page.

Documents

In addition, here you have the option to add a document for direct download after submitting the contact form, e.g. for Whtitepaper download.

You can offer more than one document for download. If you do, don't forget to label the dropdown which would appear in the contact for in the frontend (Documents Field Label).

C4C

In C4C, you can identify the downloaded document in the Lead name. For that reason it is recommended to keep the document name short and meaningful.

II. Fieldsets

The fieldset contains the displayed form fields. In many forms, you will need a quite similar or even identical combination of fields. Using the same fieldset (e.g. all fields for a training application) in many forms, keeps the appearance of the forms harmonized and saves a lot of work. To easily find the correct fieldset in the list, provide meaningful Internal Names for the fieldsets you are creating.

1. Provide an Internal Name for the fieldset.

💡 It is recommended to find a consistent naming convention to identify your fieldsets easily, e.g. put your local website indication (e.g. DE, PL, GB, TR, … etc.) on top.

2. Add Fields of different types. (Please see “Available Field Types” below.)

3. Check all fields to adjust the field width (one-half or full width), align the order of fields with drag and drop, and finally set the correct fields to mandatory (“Set the field to mandatory?”).

4. Save and publish.

Available Field Types

Creating a new fieldset, you can choose from three main options:

• [A] Fieldset: Choose from the existing fieldsets to ensure a consistent look-and-feel in your website.

• Default Field: Create a new fieldset from scratch

• Freetext/checkbox: Use for any individual field not offered as “Default field”

• Content: Use this module to add any text, e.g. headlines of some body text between the fields to better structure the form.

• Select: This option you can use to provide selections in the form with predefined values.

[A] Fieldset

If you select Fieldset, you have to refer to a fieldset that you created beforehand.

1. Set the label

2. Create or choose the fieldset you want to embed into the form
   You should avoid embedding a fieldset which again embeds a fieldset.

3. Decide, if the website user should be allowed to add multiple entries.

4. If the user should be allowed to add multiple entries, define the minimum and a maximum number of entries that should be possible.

Example: in a training application form, you want to allow the application for up to five participants in one go. Create a fieldset with first name, last name, and job role. Now you return to your application form fieldset. There you add a Fieldset and reference to the priorly created fieldset with the participant information. Set the options to “multiple” and define a minimum of 1 (because the application to a training does not make sense without at least one participant) and a maximum of 5 (because you do not want to accept more than five participants in one application).

Default Field

Click on “Default Field” to define the field and choose from 18 pre-defined fields that are available in website contact forms and in C4C accordingly. You can add as many default fields as you need.

1. Reference - Choose existing entry

In Contentstack, all entries are shown in English. On the website, they will appear with their local translations automatically. You can choose any field you need and put them into any order.

💡 Choose also “E-mail address”, “Surname”, and “Company” actively, if you don’t want to have them put at the top of the fieldset and form on the website.

💡 For regular forms, you do not need to use the “Country” Default Field. If you choose it for dedicated purposes, it will display the localized country selection in the frontend.

For example: In the Irish website, the selection offers "Ireland" while in the German website, the user can choose from Germany, Austria, Switzerland.

2. Custom Label

You can still customize any label, i.e. you can always overwrite the pre-defined local translation. This works for any field, but may be applicable mainly for the rather unspecific “Note” field which normally says “What can we do for you?”.

💡 Use this option to adapt the wording, for example of the “Note” field to better adapt the label to the purpose of your local landing page.

3. Required

Use “Required”, If you need to set more fields as “mandatory” in the frontend. Please select “mandatory” fields carefully to avoid new customers to stop filling the form at all. Please also observe local GDPR regulations.

💡 The fields “E-mail address”, “Surname”, and “Company” are always required and set as such by the system, even if you don’t put them on “Required” here. They will always be shown as “mandatory” fields in the frontend.

4. Width

Choose from full or one-half to design your fieldset.

Freetext/checkbox

Use this module for any individual field which is not offered as “Default Field”.

• Text: Single line text field

• Textarea: Multi line text field

• Checkbox: A checkbox

Select

This option you can use to provide selections in the form with predefined values. You can decide if the user can select more than one provided option.

The single selection will be displayed as a dropdown, a multiple selection as a list of checkboxes.

💡 If you offer a multiple selection, please be aware that users have to choose one option minimum before they can submit the form.

To define the options, add pairs of key and value.

Submit Value: will be submitted with the form → This is the value, you find in the notification email with the submitted data.

Display Label: will be displayed in the form → This is what the website user sees in the list.

Screen Recording 2022-10-25 at 12.30.41.mov