Create and Customize Web Forms

Creating a Web Form

To create a web form, go to Site Manager -> Web Forms -> Add Web Form. Enter a descriptive Name for your web form that describes its function. If you'd like to associate a business process to your web form, select the appropriate Workflow. If you would like to automatically subscribe customers to one of your affiliate programs, select the affiliate program from the list.  When a customer is subscribed to an affiliate program, they'll receive an email with their affiliate link which they can then place on their website so they refer leads to you. You can also choose to create a sales opportunity as part of the form.

If you want to bring the Web Form details box up after it has been closed, click on the Edit Properties button. 

Adding System Fields

System fields allow you to collect basic information from an item that either creates a customer record in your contact database or appends to it. After selecting one or more system fields, click on Preview option in Action Box to see how your item looks. Simply click on the relevant tab to select the fields you would like to add, Contacts, Ecommerce (depending on your site plan, this tab may not be available), Marketing, Miscellaneous and Campaign List you want your customer to subscribe to. You will see that these fields are then added to the preview of the form on the right hand side:

Note: All web forms must contain either the Firstname/Lastname and Email Address fields. If you remove both these from your web form, then customers can no longer use it.

Adding CRM Form Fields

CRM Form fields allow you to extend your CRM database by creating and collecting customer information from your customers. For further details on CRM Forms, refer to this article.

To add CRM Form field to your Web Form, click on the CRM Forms tab as shown below:

In the list below, you will see all the CRM Forms you have previously created (to create a new CRM Form, refer to this article), click on the CRM Form you would like to add to your Web Form. You will see this populate on the Form builder to the right.

Adding Custom Fields

In addition to the system fields, you can also create custom fields to add to your web form. Custom fields allow you to add your own fields to your items. You can create fields specific to your business or for the type of leads you want to capture on your website. You can create any type of field and choose whether they are mandatory or not. To add a custom field, follow the below steps:

1. Click on the field type you would like to add, the options are as below:
   
   Date. For this field type, the customer will be presented a date picker to allow them to choose a date
   Checkbox List. The customer can choose from a list. They can choose multiple options from the list.
   ListboxList. The customer can choose from a list. They can choose multiple options from the list.
   DropdownList. The customer can choose from a list. They can choose only one option from the list.
   RadioList. The customer can choose from a list. They can choose only one option from the list
   Number. A text box that must have a number entered in it
   Text (Multi-line). A text box that accepts multiple lines of text
   Text (String). A text box that accepts only one line of text
   True/False. A check box for yes/no answers. 
    
2. Enter a field name, this will appear on the web form above the input field and specify whether this field is mandatory (required)
3. If a list type field was selected, enter in the options for that list under the 'items' section as below:

Deleting Fields

To delete a field from a Web Form in the Web From builder, simply hover over the appropriate field and click on the red delete button as below:

Adding an Image Verification (CAPTCHA) field

CAPTCHA (an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart), is an image of random letters. The system dynamically generates the image as the page loads in a browser. CAPTCHA reduces spam submissions, because the interface requires that a person (not a computer) must read the characters in the image file and then enter the matching characters into a form field. Watch the video below for details on how you can add a CAPTCHA field to your Web Form:

Changing the background color, text color and width of the CAPTCHA image

If you've inserted the form with the CAPTCHA field as HTML in a page, you can specify the width for the new CAPTCHA by typing in the module parameters like this (with no spaces):

{module_captchav2,[named background color],[named text color],[width in pixels]}

The elements in the syntax are described below:

Named Background color (optional) - The background color of the text; the default color is DimGray.

Named TextColor (optional) - The color of the characters in the image; the default color is White.

Width (optional) - Specifies the width (in pixels). This setting affects both the size of the Captcha image and the input textbox provided to the visitor to enter the letters. The default setting is 160px wide. You can use a value between 150px and 220px wide.

The table below lists the other color values you can use when setting the colors of the CAPTCHA image:

The example below illustrates the colors rendered using this syntax: 

{module_captchav2,LightBlue,Indigo,220} 

The dynamic characters generated by CAPTCHA include six randomly generated characters, based on a special set that has been defined to create minimal confusion

Setting up the Notification Email

Notification emails are mandatory for every web form. They allow you to automatically send an email to the customer that submitted the web form, thanking them for their submission. To create a Notification email , click on the 'Setup Auto Responder' button from the top menu.

Under this option you can set up the details of this email according to your needs, then click Save. Refer to the Tag manager on the WYSIWYG editors toolbar for a list of tags that allow you to personalize this email for every customer. You can include the customer's web form submission in your email by adding the tag {tag_webformresults}. 

Customizing an Auto Responder

You can customize the way that auto-responder emails are sent to people filling in your web forms.

Within the Site Manager options you need to go to Web Forms, click on the relevant Web Form and click on Setup Auto Responder.

Fill in the following fields:

• Email From Address - Use the following format: "John Smith" johnsmith@yourdomain.com
• Email Subject
• Email Format - HTML or Text (Text emails are less likely to be blocked by a spam filter)
• Template - You can choose an HTML template. Edit these in Admin -> Manage Site-Wide Templates

To personalise the response, you can use the following tags (click on the "Tag Manager" icon in the editor):

• {tag_emailaddress} Email address of the recipient (email address must be present on form)
• {tag_recipientname} Full name of the recipient (firstname and lastname must be present on form)
• {tag_webformresults} Summary of the form that was filled out (only use if email format is HTML)
• {tag_recipientfirstname} First name of the recipient (first name must be present on the form)
• {tag_recipientlastname} Last name of the recipient (last name must be present on the form)
• {tag_verificationurl} The verification URL for customer to select and opt-in to your newsletter

Disabling an Auto Responder

You can disable the auto responder if desired. To do this, you will need to alter the form action URL by adding &SAR=False

For example: 

action="/FormProcessv2.aspx?.....&SAR=False"

Disabling the Secure Zone login details email

Upon creating a webform which collects the username and password fields and subscribes the submitting contact to a Secure Zone an email is sent to the submitter with the login details he can use for that secure zone. If you wish to disable the sending of this email simpy append the following to the action URL of the webform:

action="/FormProcessv2.aspx?.....&SWE=False"

Inserting a Web Form

Always remember that you must re-insert your web form after you’ve made any changes to it. This is because when you insert a web form, you are effectively copying the form into the web page. The previously inserted code does not automatically update. You can insert Web Forms anytime after they are created or modified. There are two ways you can accomplish this:

Method 1: Use the Web Forms menu under Site Manager

First, go to Site Manager - Web Forms, select the desired webform and click on More Actions. Use the option Add a Web Form to a Web Page - select the webpage and then use the Click Insert option.

You can customize the form as desired once it has been inserted in a page. You can re-arrange the fields, add your own style sheet to format each field and make other design changes. Click the Save and Publish button to publish the new version and save your changes.

Method 2: Use the Module Manager to insert webforms.

You can also use the Module Manager to insert a web form. Upon editing a webpage click on the Module Manager button, then go to Web Forms and select the Web form from the dropdown menu, place the cursor in the desired location on the page and click on Insert

For the Dreamweaver extension, select web forms from the list of modules, and then choose the web form you want to insert. Once the form is inserted, you can completely customize the web form by rearranging the fields and using CSS styles.Click the web pages tab in the extension and click the Save and Publish button when you are ready to publish the page with the web form.

There are 2 options for inserting webforms: as a standard form or as a module. 

Note: do NOT insert webforms that collect payment as modules. Webforms that submit payment information can only be inserted as webforms.

Add your Web Form to an externally hosted page

Web forms can be placed on any web site, not just those hosted with your Online Business. You can copy and paste the HTML code by clicking on the Get Web Form HTML Code button and insert it on any page. When the customer submits the form, the customer details will still be stored in your contact database.

You can even customize to have the form redirect back to your website hosted elsewhere. Under the HTML Code, you will see another box where you can enter the URL for the confirmation page to display after the web form has been submitted by a customer.

Customizing a Web Form

Web forms can be completely customized and there are two ways in which this can be done.

Customizing your Web Form after inserting

Use this method when customizing an individual form, used only in one place. Web forms are customized after they are inserted on a web page and you can then customize it by editing the HTML code, adding CSS classes or replacing buttons with images. You can also re-arrange the fields. Any customizations you make will only affect the copy of the web form on the page.

Note: Its important that you test the web form after making changes to it by making a few submissions through it. This ensures that whilst customizing the web form you have not broken the form.

If you make changes to your web form via Modules -> Web Forms then you must re-insert your web form on any web page where the web form was previously placed.

Collecting anniversary dates using a date picker

For each customer you can store up to 5 anniversary dates. These dates are used for loyalty email campaigns. Refer to an earlier section for more details. To capture this information, include the following your web form:

<input name="Anniversary1" id="Anniversary1" readonly onfocus="displayDatePicker('Anniversary1);return false;">

You can also replicate the above for anniversaries 2 to 5, e.g. Anniversary2, Anniversary3 and so forth

Customizing your Web Form using the 'Customize Web Form' option

Use this method when you have inserted the Web Form as a module. This method allows you to make a change to the form via the 'Customize Web Form' option and have this automatically update throughout the site where you have inserted the web form as a module:

When updating the web form via the 'Customize Web Form' option, this allows you to update all instances of this form from one central place.

Note: You can not insert a web form as a module in your Registration(buy) layout for your ecommerce shop as this must be inserted as HTML.

Combining the first name and last name into a full name

You can combine the First Name and Last Name fields of a web form as a single 'Full Name' field by modifying the Form HTML Code, and changing the First Name input HTML Code to 'Fullname'....

For example, this field:

<tr>
<td><label for="FirstName">First Name <span class="req">*</span></label><br />
<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255" /></td>
</tr>

Can be updated like this:

<tr>
<td><label for="FullName">Full Name <span class="req">*</span></label><br />
<input type="text" name="FullName" id="FullName" class="cat_textbox" maxlength="255" /></td>
</tr>

Then delete the 'Last Name' input field alltogether.

Once completed, the system will separate a fullname (i.e. Tom Jones) into a first and last name (i.e. Firstname-Tom, Lastname-Jones) upon form submission.

Attaching web forms to Contacts instead of Cases

Sometimes you want to attach a custom web form field to the customer record rather than the case. You can do this by simply appending a variable to the action URL of the web form

Append ECRM=1 to the action URL of the web form

Example: 

action="/FormProcessv2.aspx?WebFormID=11557&OID=248384&OTYPE=1&EID=0&CID=0&ECRM=1

Adding multiple file attachment fields to the web form

To add multiple file attachment fields to your form, you can simply copy the HTML code of the original field and paste it between the <form> tags.

This is the example of the code: 

<input name="FileAttachment" class="FileAttachment" class="cat_textbox" type="file">

You can also change the name and id of the new field in the following manner: 

<input type="file" name="FileAttachment1" id="FileAttachment1" class="cat_textbox" /><input type="file" name="FileAttachment2" id="FileAttachment2" class="cat_textbox" />

		

	

This will then allow you modify the JavaScript validation if you would like to make any of these fields mandatory.For example, where you see: 

if (theForm.FileAttachment) why += isEmpty(theForm.FileAttachment.value, "File Attachment");

You can change the (theForm.Fileattachment1) to look like below: 

if (theForm.FileAttachment1) why += isEmpty(theForm.FileAttachment1.value, "File Attachment");

		

	

duplicate this for fileattachment2.  

Please have in mind that the upload cannot exceed 100 MB and only the first file will be included in the workflow notification even though multiple files are uploaded. 

Preventing autocomplete on web form fields

A lot of browsers have an 'AutoComplete' function which enables them to 'remember' previously submitted information to that for firld.

If you don't want to the browser to pre-populate the field you need to place autocomplete="off" attribute into that field.

For Example -

<input type="text" maxlength="255" class="cat_textbox" autocomplete="off" id="FirstName" name="FirstName" />

Redirecting the Web Form confirmation page

To redirect a Web Form submission to the another page, you will need to go to the page you have placed the Web Form on and view the HTML of this page. Find the form action URL, this should looks similar to the below:

Change this by appending the below to the action URL:

&PageID=/Results.htm

Where Results.htm is the URL of the page of the next Web Form

For example:

Troubleshooting a Web Form

Determining which Web Form is being used on a page

If you have a Web Form on your site but are unsure which form this coincides with in your admin console, here is how you can find out. First of all you will need go to the form on your website, then using a tool such as Firebug or by simply viewing the HTML source of a page, view the form action URL:

You will notice that the action URL is similar to the below:

/FormProcessv2.aspx?WebFormID=1234.................




		

	

Take note of the WebFormID as this is what identifies your web form. The next step is to login to the admin console of your site and navigate to Site Manger  > Web Forms. Here you will see a list of the current Web Forms for this site, by hovering over the Web Form name, you can the URL of the link to this form which contains the Web Form ID as below:

If the ID on the actual site does not match any of the ID's in the admin, then this form will not submit as it does not exist.

Getting the 'ERROR: You have deleted your web form...' message

As this message would suggest, the web form you are submitting no longer exists as one of the Web Forms on your site via the Site Manager > Web Forms. Use the method shown in the topic above 'Determining which Web Form is being used on a page' to confirm this.You will need to remove this form from the site as it is no longer valid and re-insert the appropriate form you would like to use here in its place.

Getting the 'Form Submission in Progress' message

This JavaScript message will commonly appear if you have submitted this form, then pressed 'back' in your web browser and tried to submit the form again. 

Checking your form

Ensure the form method is correct:

Every form has a 'method of submitting the form to the server, this can either be 'GET' or 'Post'. In order for your form to submit correctly to the server, you must ensure you are using the 'Post' method, this is inserted by default when inserting a form, however if you have removed the method, the browser will use 'GET' by default which will not work:

<form method="post" action="/FormProcessv2.aspx?WebFormID=1234">

		

	

Ensure the form field names have not changed

When you first insert a web form into a page/template, it will be inserted with all the correct field names, for example:

<input type="text" name="FirstName" id="FirstName" class="cat_textbox" maxlength="255">

If you find that your form submits but some fields do not getting collected, then you should check that all the field names are correct. You can insert the form on a clean page to compare the field names with what they should be.

Where can I find customer submitted files?

While only the first file will be included in the workflow notification if the form contains multiple file uploads, you can find the entirity of uploaded files under the "Related Files" tab of the Case interface in the Admin.

Resolving validation errors on web forms

If you have tried to validate a page that has a web form inserted, you may encounter errors that look like this:

Line 177, Column > 80: XML Parsing Error: xmlParseEntityRef: no name

itcount11961 = 0;function checkWholeForm11961(theForm){var why = "";if (theFo

# Error Line 177, Column > 80: XML Parsing Error: xmlParseEntityRef: no name

itcount11961 = 0;function checkWholeForm11961(theForm){var why = "";if (theF




		

	

To resolve these validation errors, add CDATA comments inside script tag. For example, use this syntax:

<script type="text/javascript">
//<![CDATA[

your JS scripts

//]]>
</script>




		

	

Be sure to also change the selected="true" to selected="selected" in the drop-down list code.

For example, set the selected value to "selected":

<option value=" " selected="selected"> 

By updating the code, you can avoid these types of validation errors from occurring.

Configuring Web Forms to return a JSON Response

By default, the system responds to Web Form submissions with an HTML page. You configure that page through the More Customization Options feature. For more flexibility, the system can also return a response in JSON format. Simply add "&JSON=1" to your form action URL. The response you receive will look like this:

FormProcessV2Response

success - true

entityId - the CRM ID of the user submitting the form

objectTypeId - the type of object the form created - currently, a Booking (61) or a case (2001)

objectId - the booking or case ID created

message - any confirmation

SystemMessage

success - true/false (typically false)

message - an error message