Twitter LinkedIn

SITECORE WEB FORMS FOR MARKETERS A HOW TO GUIDE

  • By Bryan Archer (CTO)
Bryan Archer (CTO)

 

We shall be focussing upon Sitecore version 8.1 in this example, but many concepts and actions covered here hold true for older (and most probably future) versions of Sitecore too.

Web Forms For Marketers (WFFM) is a Sitecore module which makes it easy to capture prospect information whenever you need it.

Forms are typically used to:

  • Gate high quality content
  • Register to take part in an event
  • Sign up to a mailing list
  • Communicate directly with a company representative.

WFFM allows you to build custom forms from a list of standard form field types in the Form Designer. The form can be as long or as short as you’d like it to be, and form content can be grouped into sections to make it more organised and easier for your visitors to complete. Let’s start with a how-to guide on building a form.

How to build and insert a form using Web Forms For Marketers in Sitecore

1. Open the webpage that you want to add a web form to.

2. On the Home tab menu bar, in the New group, click Component.

3. The "Add here" buttons appear on the web page. These are only visible if you have the right permissions. In the place where you want to add your web form, click Add here.

4. In the Select a Rendering dialog box, click the Form option, and click Select.

5. In the "Create a New Form" dialog box, enter a name for the form (this must be a unique name!) and select "Create a blank form", and then click Next. It's worth mentioning that if you’d like to insert an existing form, you should select the option “Select a form to copy” and follow the instructions until you reach the next step documented here.

6. In the Analytics dialog box, you can specify goals and enable form dropout tracking.

7. In the Goal section, you can either create a new goal and specify the engagement value for it or associate an existing goal with your form. In the Dropout Tracking section, by selecting Enable Form Dropout Tracking, you make sure that all the information entered in this form is tracked. When this option is enabled all the data entered in this form is saved in the analytics database, regardless of whether the visitor completes the form or not.

8.Click Next and in the "Confirmation dialog" box that appears, verify your choices and then to create the new form, click Create.

9.The new form opens in the Form Designer.

10.In the Form Designer, edit the form and then click Save or Save/Close to close the Form Designer.

11.On the Experience Editor ribbon, click Save to save the form.

How to add fields to an existing WFFM Form in Sitecore

Each form field and section contain the following fields:

Title: The title of the field that appears in the form e.g. “First Name”
Type: The type of field that appears e.g. Text Entry field, Drop-down Field etc.
Required: Whether the visitor must fill out the field or can leave it blank.
Delete Button: This option deletes the field from the form.

You can add a field or section to a form from the Experience Editor (front-end view) or from the Sitecore Desktop (back-end view).

If you are using the Experience Editor:

1. Navigate to the webpage which holds the form you’d like to add a field to. 
2. Click on the form layout, and the Form dialog box appears. 3. Click the Edit Form button in Form Designer icon as seen in the picture below.

If you would like to use the Sitecore Desktop view:

  1. Click the Sitecore Start button.
  2. Select all applications 
  3. Choose Web Forms For Marketers and click Form Designer and select the form that you want to add the field or section to.
  4. When you’re in the form designer click "Add Field" (or "add section") – a new field is now added to the form
  5. Click on the field so that it is highlighted (if it isn’t already)
  6. Edit its title, type, and whether the field is required
  7. You can see the properties of the field in the left-hand pane of the Form Designer. Configure these properties as you please and click save

Tips:

  • Besides adding fields, you can further personalise your web forms by changing the submit button, configuring form verifications, as well as specifying save and success actions. Lets take a look at each of these options.
  • Rename the default “Submit” button to something more engaging like “Show me the Whitepaper” or “Download the Free Assessment Guide”. You don’t want to focus on the visitor “Submitting” their details, but rather, focus on what they’re going to get out of it.
  • Save to database – This saves the entry to the website database
  • Save to CRM – This functionality may need to be plumed-in to your website by your development team, but it’s handy to have because it allows your sales team instant access to red-hot information.
  • Send notification messages to both the elevant staff at your organisation, and an email to the person that completed the form, letting them know that you received their enquiry.

Edit, move or delete a Sitecore web form

To edit an existing web form in the Experience Editor:

You can open the Form Designer by opening the Sitecore Desktop and clicking on the Sitecore Start button, All Applications, Web Forms for Marketers, and click Create a New Form. In the Experience Editor, open the relevant page and click on the form that you want to edit. The Form dialog box will appear on the form.
Click Edit and when the Form Designer opens, edit your web form.

To move an existing form to another place:

1. In the Experience Editor, on the relevant page, click the form that you want to move. The Form dialog box will appear on the form.
2. Click Move Component. The "Move to here" buttons appear in all the places on the page where you can move the web form to.
3. To save the new position of the form, click Save.

Delete a Sitecore web form:

In the Experience Editor, on the relevant page, click the form on the page that you want to delete:

1. Click Delete.
2. To save the changes, in the Experience Editor, click Save.

Original author: https://doc.sitecore.net

 

scroll back to the top of the current web page