+1-757-461-3022 x124

Creating Webforms with xTupleCommerce

With xTupleCommerce you are able to create webforms, which are forms that your users can fill out to engage with you. A simple example is a Contact Us form. The user fills out a few fields and clicks Submit. The information is saved to the web portal's database and you (and anyone else you require) are sent an email with a customized summary of the form. Additionally, the user filling out the form can receive a notification. You can configure the system to redirect the user to a specific page or a confirmation page after they submit the form. 

The webform tool is easy for you to customize and it offers you the opportunity to create a variety of forms to engage with your users. The contact us form is a simple example, but you can also use the tool to create applications, surveys, product registration forms, signing up for a free PDF or resource, customer feedback, and many others. 

In this article we’ll give a brief introduction to how the tool is used to build these forms and the various steps that must be completed to ensure the form works correctly.

Creating the Form

To create a new form, go to Admin > Content > Add Content > Form

To initialize the form, you have to fill out the basic information which includes the: 

  • Title - The title of the form.
  • Body - The content that is displayed above the form.
  • Slug - The URL, or path, in which users will find your form.

You can choose to include a menu item for this form or not. 

Click Save

Once you save the form you will be redirected to the form where you will see multiple administration tabs. 

  • View - Click this to view the form.
  • Edit - Click this to edit the basic areas of the form - Title, Body, Slug.
  • Webform - This is where the majority of work will be done. This is where you add fields and configure the form.
  • Results - Here you can see the results of previous forms which have been submitted. 

Adding Fields

To begin adding fields, first, click on the Webform tab. You need to be on the Form Components page.

Once you are in the webform area, notice that the black admin menu at the top now includes the four tabs (View, Edit, Webform, Results). Take note that when you hover over Webform you will see a drop down with multiple subpages for additional configuration. This will be important later.

From the Webform page you are able to begin entering fields of information.

There are a variety of types of fields that you can add. Below are just some of the types most often used:

  • Date - Allow the user to select a date.
  • Email - Allow the user to enter an email address. This address can be selected to receive notifications.
  • File - Allow the user to upload a file. Control which file types are allowed and size.
  • Number - Only an integer can be entered by the user.
  • Selection - A tool to offer the user a selection, like a multiple choice question or a choosing a State from a list. Can be configured to allow one or multiple selections.
  • Text Area - A large area for entering a body of text. 
  • Text Field - One field for entering text (like a Name). 
  • Time - Allow the user to enter a time.

When creating a field, you must enter a label for the field, choose the field type, check whether it should be required or not and click Add.

On the following page there will be additional fields of information for configuring the field. For most (such as Email, Text Area and Text Field) you can simply progress without modification. But for others (such as Selection) you have to configure the field. For example, the Selection type requires that you enter all the options that the user can choose from and configure if the user can only select one option, a specified number or multiple selections.

Once you are done creating the fields, you can use the crosshairs to the left of the fields to drag and drop them into the desired order. 

Be sure to click Save once you are done.

Email Notifications

After your form is created, you need to configure what will happen after a user submits the form. In some cases, you don’t have to do anything, but it’s likely that you or another team member will require an email notification. 

Click on Webform in the black admin menu, then hover over Webform and click on Emails. This page will allow you to configure one or many emails that are sent as a result of a form submission. 

Each row represents an email address that will receive a notification. Either enter an email address or click the Component Value radio button and choose the field that represents the user’s email address.

Then click Add.

On the next page you can configure the information that is used to send the notification.

The email header details area manages how the email notification is constructed. You can use the default settings for the Subject, From Address, From Name or you can enter custom information.

You can also choose to use components from the original form. This is certainly possible and I can see how it would be beneficial, but from previous experience I’ve seen negative outcomes. Typically, the recipients email client’s spam filter will see the “mixed signals” in the email header and the message will get lost in the ether. For example, an email coming from an email address that doesn’t match the website address of the sending server can lead to an email being caught by the spam filter.  To avoid this, I do not suggest using the form components.

In the Email Template field you can either rely on the default message utilizing tokens from the form or you can write a custom message. You can also write a custom message in the log which includes tokens referencing fields from the original form. Click on the Browse available tokens link to see which ones can be used.

Hint: the email confirmation message is a great place to include strategic marketing calls to action (CTA). It’s been shown that confirmation emails have a very high open rate. Knowing that, perhaps you should include a brief message that says, “Thanks for reaching out. We will be in touch soon. In the mean time, sign up for our email newsletter here” or something similar.

Once you are done, click Save e-mail settings.

Confirmation Page

After a user submits the form you want to redirect them to a useful page. Perhaps this is simply a confirmation page letting them know that the form was submitted along with a “Thank You” or maybe you need to hold up your end of the deal. For example, if the user was filling out a form in order to gain access to a free resource like a PDF or Excel Spreadsheet Template. It’s important that you have a confirmation page ready.

There are two ways to handle the confirmation page:

  1. Build a unique page and point the user to it.
  2. Modify the webforms confirmation page with content.

In the first case, you could build one universal confirmation page that includes multiple marketing CTAs or information. Perhaps it’s a simple page that says “Thank You” and lists out all the places where the user can learn more about you, sign up for resources or engage with you on social media. By building and maintaining one page like this, you can then point all webforms to that one page. Then, in the future as information changes or new promotions surface, you only have one confirmation page to modify.

However, if your confirmation page needs to be more unique (perhaps a like to a very specific PDF or resource) then you could include that unique content on the confirmation page.

To modify the Confirmation page, hover over the Webform link in the black admin bar and click on Form Settings.

From here you can either enter a message in the Confirmation Message field, or point to a particular path and have the user redirected to that location. There is also an option for No redirect (reload current page) but I imagine that will be confusing for the user. I’ve never found a good use case for that setting.

There are other things that can be configured on this page such as the total number of submissions one user can send (by default it’s set to Unlimited) and the total number of submissions all users can submit (by default it’s set to Unlimited). Limiting the number of submissions from all users comes in handy when you only want a limited number of inquires. For example, “The first 100 people that fill out this form will get a free shirt!” If you like, you could limit that to 100 submissions and all users are only allowed one submission. Then, after the limit is reached, the page will display a custom message referring to the limit being reached.

There are submission access levels which allow the manager to control what kinds of users can submit the form and various other advanced settings.

Results Page

In the black admin menu you will see another menu item for Results. This is where you can see all the submissions of the form. From this table you can click on the View, Edit or Delete links to modify the submissions.

Additionally, once you are on the Results page, you can hover over the results link again and see multiple subpages. These pages include:

  • Analysis -  This show data regarding the submissions. This is very helpful for surveys.
  • Table - This shows a spreadsheet like result of all the submissions. Good for quick analysis.
  • Download - From here you can download an Excel spreadsheet or CSV of the data from the submissions.
  • Clear - This page will give you the opportunity to clear out all the submissions.

Wrapping Up

Once you have built and configured your form, I highly recommend that you test it out and ask at least one other team member to test it out. You want to ensure that the user experience is optimal and that the emails are flowing after the submission is submitted.

Once you become accustomed to this tool, spend a little time digging into the advanced features. You’ll find that you can create multi-page forms and even conditional questions within the form. It’s a very powerful tool and one that can come in very handy for getting to know your customers.

up
58 users have voted.