Creating a simple Web Form

First, you’ll need to navigate to the Web Forms module by heading to the Main Menu -> Marketing -> Web Forms.

Here you’ll see the collection of Web Forms that have been created in your system. To create a new one, click the New Web Form button in the top right.

First, give the Web Form a name. Add as much detail as required, the name will help you easily identify the correct Web Form if you set up more than one.

For this example, we’ll create a simple web form for acquiring customer details. In this case we’ll leave the type as Default, however you also have the ability to create donation or booking Web Form (widgets) that differ in their inclusion of a payment portal.

To ensure the web form can be used and functions as intended, make sure the box beside Is Active is checked. When a web form is no longer in use, you’re able to deactivate it easily using this field.

If the Web Form relates to a certain marketing campaign you are running, you’re also able to link them using the Campaign field.

The Thankyou Page field is where the customer will be redirected once the form has been filled. This will typically be a dedicated page on your site outlining that the form submission has been successful. The Thankyou Page, however, is not mandatory.

You’ll need to ensure the Web Form relates to the correct data type.

Depending on your selection here, different fields will be available for use within the form itself. Since we’re creating a simple form for customer acquisition only, we’ll leave the related to as None.

However, if I were to relate a Web Form to an Opportunity, I can then access fields from Contact, Company and Opportunity to use on my form i.e. if I create an Opportunity it will be linked to either a Contact, Company, or both.

Relating a form to Opportunities

If I related the form to Projects, I would I can then access fields from Contact, Company and Project to use on my form i.e. if I create a Project it will be linked to either a Contact, Company, or both.

Relating a form to Projects

So you can see how the data type you choose influences the fields that you have available to use on your form.

Down below, in the field selector, you’ll be able to define the fields that are displayed on the form. If you don’t see the options you want, you may need to revisit the data type that your form is linked to – see the previous step for more details.

Click to expand each section and drag and drop the desired fields into the form. For this example, we’ll use First Name, Last Name, Mobile Phone, Email Address and Postcode – all related to the Contact.

Once you’ve set the fields as required, click Save and Close at the top of the screen. You’ll be taken to the Web Form record.

Note that when creating your form there are required fields you must add:

Fields shown with an asterisk (*) against them are required fields and must be added to the form. In the following example, you can see that the fields for Contact First Name, Company Name and Opportunity Subject all have an asterisk next to them – CRM cannot create a Contact without a First Name or a Company without a Company Name or an Opportunity without a Subject as this is key information required to create each type of record.

You need to ensure that you are giving CRM enough information to create the desired records and outcomes.

If I tried to create an Opportunity without having the Subject field on my form, I will receive an error message when I try to save the form, as per the following example.

The same would happen if I tried to create a Contact without having the First Name field on the form or create a Company without having the Company Name field on the form.

Once you have dragged and dropped a field onto your form, you can click on the field to reveal a pop-up box with further options.

In this example I want to rename the Contact field Email so it is called “Best Contact Email” instead. To do this, I type my desired value into the Display Name field to update the label this field will have on my site.

This is a handy feature that allows you to customise your field labels so that they use your terminology.

When the form is previewed in HTML you will be able to see that the new label has been applied.

Once you have dragged and dropped a field onto your form, you can click on the field to reveal a pop-up box with further options.

In this example I’m going to specify which fields MUST be filled in on my form – I want an email address to be added so I’ll click on the Email field and then check the Required box in the pop-up box and click Save.

The field will now show with an asterisk (*) meaning that it is a required field that MUST be filled in before the form can be submitted – if the field does not have a value, it cannot be submitted.

When the form is previewed in HTML you will be able to see that as asterisk now shows to signify the field is required.

If the end user tries to submit a form without adding an email address, an error will display.

Required fields are an excellent way of ensuring that you capture key data in your form submissions.

There may be instances where you want to fill in a field in CRM with certain information each time without end user input.

In the following example, I want CRM to put a note on the Contact that is created using the Description box so that I can quickly see where the record originated:

• I add the Contact Description field to the form and then click on it to reveal a pop-up window.
• I check the boxes next to Is Hidden and Server Only – these choices mean that the field will not be visible to the end user on my web form.
• I then add a new value to the Default Value field by typing in “came from web enquiry”.
• Click Save.

You’ll then see that the field shows on your form with the choices you have made i.e. Hidden, Server Only and the default value text am adding (“came from web enquiry”).

When CRM creates the Contact, it will automatically fill in the Description box with the Default Value – all of this takes place in the background, without the field being visible to the end user.

This is a really easy way to pre-program CRM records with data that you may require, but do not necessarily need the end user to input.

Please see the following section on Adding default field values for more detail on how this works.

Following on from the previous section on how to Hide fields from the customer facing form, there may be times where you want to pre-program CRM records with data that you may require, but do not necessarily need the end user to input.

To apply a default value to a field, just click on it to reveal a pop-up box and then input the desired information into the Default Value field.

There are a couple of very important points to note when using this feature:

Depending on the type of field you are adding a Default Value for, you may need to make sure the value first exists in CRM. For example:

• If we have text fields or boxes in CRM we can type in any value we want (subject to the maximum number of characters allowed).
• If you have lookup or drop-down fields where a choice must be made, you need to select from an existing value and cannot choose a value that doesn’t exist yet.

The same applies if we are giving a field a Default Value – if the field is a lookup or dropdown type, the value you are applying needs to exist first. If it does not, the form will not submit and you will see error messages on the Completed Forms tab in saved mode because CRM can’t find the value you are trying to input.

If you receive this type of error, you need to go and check the field settings and make sure the drop-down option you are trying to apply exists for use.

In the error above, the problem is that I am trying to apply a Default Value for the field Opportunity Stage and that value doesn’t exist in CRM. To resolve this, I go to Admin > Settings > Opportunity Settings and add the value I want to apply so that my form will work correctly.

To remove a field from a form, just click on the red cross icon at the right hand end of the field.

By clicking the Embed Code heading you’ll be able to view the required code for adding the webform to your site. Simply copy (by clicking the Copy to Clipboard button) and paste the code into your website and the form will be available to use right away.

If you’d like to view or save the form as a HTML file, click the HTML button and then either View or Save depending on your needs.

The When Filled In tab lets you define basic workflows that occur after the form has been completed.

If you’d like the respondent to be added to a specific marketing list after form completion, click Add beside the correct list in the sectioned outlined below. Then click Update.

Further down you’ll see a notification section. If you’d like to notify a member of staff when a form is filled in, select their user from the left-hand list, then click Add, then click Update. They’ll then receive an email every time the form is completed.

You can use reCAPTCHA v3 on your Web Forms – click here to learn how to enable this feature in CRM.

Once the feature has been enabled in your CRM, reCAPTCHA will automatically be applied to all new Web Forms that you create after that point. You can also apply it to any existing forms you have.