Web form
From Online Business Wiki
Click on + to expand the category
Introduction
Web Forms are one of the most exciting parts of this solution. They allow you to interact with your customers, providing them with a communication channel to your business. You can use web forms to run competitions, create surveys, collect bookings, field enquiries, collect donations or register for access to specials. The possibilities are almost unlimited, and the best thing is that the customer's details will always be seamlessly captured into your contact database and a case created for each web form submission. Another advantage of web forms is that you don't need any technical knowledge to create them. Anyone can do it within minutes.
Web forms are capable of triggering a business process in your organization. This business process is called a workflow. Workflows can be used to:
- Notify sales people of an enquiry via SMS or email
- Manage customer expectations and service level agreements
- Escalate unresolved cases to management
- Request Approval to allow certain actions or events to go ahead.
Creating a Web Form
To create a web form, go to Modules -> Web Forms. Click Create a new Web Form to get started. Enter a 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 from the dropdown. Now click Save.
Adding System Fields
Forms are system-related fields that you add to a web form according to your business requirements. Simply check the check box of your desired forms, and they will be added to your web form. You can also select which Campaign Newsletter Lists your customers can subscribe to, and which secure zones the customer will be registered for (discussed in detail in a later topic). After selecting your required forms, click Save.
Note: All web forms must contain either the Firstname/Lastname or Email Address fields. If you remove both these from your web form, then customers can no longer use it.
However of all other fields added to a Web Form you can elect which are mandatory and which are not with the exception to the Payment Method option. This will need to be mandatory as the real-time payment process will not work correctly.
Furthermore, you must remove the script validation within the form as well.
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 customize your web forms to suit your business. There are almost no limits to how much you can customize your web form. This is a simple four step process.
1. Enter a field name. This will appear on the web form above the input field. 2. Select a field type. You can choose from several types, including:
- 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.
- List box List. The customer can choose from a list. They can choose multiple options from the list.
- Dropdown List. The customer can choose from a list. They can choose only one option from the list.
- Radio List. 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.
3. If a list was selected, we enter in the options for that list, separated by commas. Put an asterisks (*) at the end of any value to make it selected. 4. Click Add.
Now repeat for each required custom field.
After creating fields, you cannot change their type; instead you must add a new field and potentially delete the old one. You can, however, change the items in a list if desired.
We strongly recommend you take advantage of the Preview tab to review your web form as you create it.
Creating an Auto Responder
Auto Responders 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. You may want to include a message such as Thank you for your submission, one of our team members will contact you shortly. Under the Auto Respond tab you can set up the details of this email according to your needs, and 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}.
Stopping auto-responder from going out
You can prevent the auto responder from being sent ou5r simply by altering the form action URL once you insert the form onto the page. All you have to do is add &SAR=False to the end of the URL. e.g.
action="/FormProcessv2.aspx?.....&SAR=False"
Deleting a Web Form
The best way to delete a web form is to go to a HTML view and in the editor and remove everything between <form> and </form> tags, including the tags.
Inserting your Web Form onto a web page using browser admin interface
It is important to remember that you must re-insert your web form after making any changes to it. This is because when you insert a web form, you are effectively copying the form into the web page. This has three consequences:
- The web form can be completely customized in each page that it is in
- Any changes to the web form made in the web page do not affect the original
- Any changes to the original web form do not affect the copies of that web form in your web pages.
Web forms can be inserted via two methods, by clicking Add Web Form to a web page or by using the Module manager.
Web forms can be inserted after creation or modification by clicking on Add Web Form to a web page link.
Select the web page you want to insert the form on. If you are replacing an existing form in the page, you can select to automatically replace the existing web form option.
Click the 1-Click insert drop down list to insert the web form. If you selected to auto-replace, the old form will already be replaced and there is no need to insert it again. Review the system message to see if the automatic replacement was successful or not.
You can customize the form as you require once it has been inserted. This means you can re-arrange the fields, add your own style sheet classes to each field and so forth. Click Save & Publish when you're finished
Alternatively you can use the Module Manager to insert the form. This is done in the WYSIWYG editor or Triangle. Select Web Forms and then choose your web form.
Inserting your Web Form onto a web page using Triangle
In Triangle, load your web page via the Web Pages tab. Go to the Modules tab and select Web Forms. Click Load. Select the web form you want to insert into a page. Click the next button twice.
Select the position where you want to place the webform on the web page, and click Insert. You can now completely customize the web form including re-arranging of the fields and using our style sheet classes.
Go back to the web pages tab and click Save & Publish when you are happy with the web page and your web form.
Getting Web Form's HTML Code
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 Get Web Form HTML Code 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 your Web Forms
Web forms can be completely customized. Web forms are customized after they are inserted on a web page. 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.
Adding a new field to the customized web form
I'll describe the quickest way of adding a new field to the web form in this article. In this example I will be adding the cell phone number field to the contact form.
First thing you need to do is go to the form and in "Add System Fields to Web Form" you tick the Cell Phone Number field, then click Save on the bottom.
The next step is to go to "<>Get Web Form HTML Code" and copy the new HTML code that was generated for that field. The code will look like this:
<tr><td><label for="CellPhone">Cell Phone Number</label><br /><input type="text" name="CellPhone" id="CellPhone" class="cat_textbox" maxlength="255" /> •</td></tr>
Finally, if you have inserted a form into a web page in HTML format, you need to go to that page and paste the code you have copied into the page.
Otherwise, if you have inserted the web form into a web page as a module, you have to paste the code for the cell phone field into "Customize Web Form" editor. Here are the steps:
Step 1.
Step 2.
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, the 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>
Becomes -
<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.
Creating a simple Web Form to Email page
Some of the basic plans in this system do not offer the integrated customer database nor the web form features. However it is imperative for all websites to enable customers to enquire online where those enquiries are handled in a timely manner.
You can create simple web form to email functionality where the details of a web form submissions are emailed to a pre-designated email address.
To enable this functionality:
- Create your web form using your existing web design software, e.g. Dreamweaver or FrontPage
- Insert your web form on to any web page
- Change the action URL of the form to:
action="/Default.aspx?A=Form&Email=You@YourDomain.com&PageID=/DesinationPage.htm"
You can also include &Subject=This+is+email+subject in the action URL and email from &EmailFrom=yourfromemail@YourDoamin.com.
Replace “You@YourDomain.com” with your email address & replace “/DestinationPage.htm” with the URL of the destination web page to display after the web form has been submitted.
With the above functionality every time a web form is submitted its details will be emailed to you. Things to keep in mind with this feature are:
- Customer details do not get captured in the customer database. Upgrade to a higher plan to take advantage of this
- Web form submissions do not get captured in the customer database as cases. Upgrade to a higher plan to take advantage of this
- Only one person can receive the details of the web form via email only. SMS notifications cannot be sent
- The details of the web form submission cannot be emailed or displayed to the customer making the submission
Customizing the Confirmation Message
By default a system message is displayed every time a web form is submitted. You can customize this message via Admin -> More Customization Options -> System Messages.
You can also configure your web form to go directly to a web page that you designate. This web page can be hosted with entirely on this online business platform or on a 3rd party hosting provider.
To do this you need to append the following to your web form’s action URL e.g.:
action=”/FormProcessv2.aspx?........”
change to:
action=”/FormProcessv2.aspx?........&PageID=/Results.htm”
You can also use JavaScript to conditionally set the confirmation web page of a web form. For example if a customer is choosing their City, then if the customer choose LA then you can redirect to the LA landing page and for San Francisco you can redirect to the San Francisco landing page. Refer to the Support Forums for examples of this.
Adding Image Verification (Captcha)
Automatic web bots are becoming a serious nuisance to website owners. These bots are automatically submitting web forms with it sending unsolicited content. This is a new form of spam. You can use the Image Verification feature, also referred to as Captcha to address this issue.
When this feature is enabled for a web form, customers must enter a series of letters generated as an image into a textbox. If this is entered correctly then the web form submission is accepted. Fortunately web bots are unable to read images and make sense of the letters and hence cannot type them correctly in the textbox provided.
To add an image verification to your form you need to go to Modules -> Web Forms -> select the webform and click "Add system fields to Web Form". There you need to tick the box next to Image Verification and save. Then you need to reinsert the form into a page.
Note: You can configure the color of the Captcha image. After inserting the web form onto your web page, go to the source of your web form and locate:
<img src="/CaptchaProcess.aspx” />
Change this to:
<img src="/CaptchaProcess.aspx?Color=red” />
All internet supported color names are supported. (You can find the list of color names at http://www.w3schools.com/HTML/html_colornames.asp)
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
Multi-Step Web Forms
Multi-step forms are related forms that span across a number of consecutive web pages. Creating multi-step forms is relatively easy. One of the main benefits of the multi-step forms built into this system is your ability to attach all the related forms that a customer fills in across different web pages to the same case.
Imagine if you are a loans company, you can easily create your loan application with a series of web forms that seamlessly navigate the customer from one to another.
To create a multi-step form:
- Create all the web forms, each relating to a step in your multi-step form
- Create a web page for each step of the web form and place the relevant web form on it
- Customize the URL so that it goes to the next step after the submission. Starting from the second step of the web form, open up the relevant web page and point the web form to go to step 3 of the web form and so forth.
- The system takes care of everything else. If you configure each step of the web form to move to the next step then all the steps will be linked together and captured in one case for every customer who goes through the steps. If a customer stops half-way then all steps up to that point will be captured.
Note: If you configure a workflow process for a multi-step web form, then you will be notified after the first step of the web form has been completed. The workflow will contain information for the first step only. To view the entire submission please log into the web-based Administration interface.
If you are using the Reports to report on cases, then each step of a multi-step web form needs to be reported on separately. You cannot create a report consisting of all the steps of the web form submission. However each you can report on each step and easily export to Microsoft Excel where the information can be merged.
You can implement your own conditional branching where based on a particular value in one step of the web form you can skip a step or jump forward to another step. You have complete control over which steps you wish to skip or include. As long as when a customer moves from web page to web page, there is a web form on each web page these will be linked together in one case. Use JavaScript to implement your branching requirements.
Using a web form to collect payments
You can use any standard web form to collect the payments form your customers.
First thing you need to do is to setup a gateway in eCommerce -> Payment Gateways. You can choose any seamless gateway from the list. The complete list of gateways can be found HERE. Please note that web forms can NOT be used with non-seamless gateways.
After you have assigned a gateway to your site, you can proceed with creating a web form. So you go to Modules -> Web Forms -> Create a New Form and when choosing the system fields you need to add the "Credit Card Processing" fields.
Once you have done that you need to insert the form into the web page. After you have inserted the form into the web page, you need to make all the links to that page secure. The secure URL for your site can be found in Admin -> Manage Domain Names. It will look something like this - https://sitename.worldsecuresystems.com.
Hide and Lock the Amount Field
Here is what the original amount field looks like:
<input type="text" name="Amount" id="Amount" class="cat_textbox">
To adjust the amount field and to make it read-only:
<input type="text" readonly="readonly" class="cat_textbox" value="$100.00" id="Amount" name="Amount">
To hide the field overall:
<input style="display:none" type="text" name="Amount" id="Amount" value="100" class="cat_textbox" readonly="readonly">
Creating a donation type web form
Simply create a web form via Modules -> Web Forms. Choose the credit card processing option, save your form and insert it on your web page.
This will basically allow your customers to make donations of any amount that will get charged in real time via your payment gateway.
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.
Related Videos
In this video we cover how to create and modify web forms. You'll learn how to replace an existing webform with an updated version, and how to view your web form submissions that have been captured in your built in customer database.
Related Articles
