Editing a Web Key Form

An overview of what edits may be required to a web form because it is provided with no style, little formatting and includes all fields from your Case or Lead record.

Because a web form is provided with no style and little formatting (as well as including all the fields from your Case or Lead record), you’ll probably want to edit the form before publishing it on your website.

The information provided below relates to Leads but the same techniques apply to Case forms too.

Required Fields

Fields with [Required] appended to their label are required by Workbooks, and a form submission will fail if these fields are omitted.

We have added Javascript to the form to ensure that users can only submit forms that contain valid fields.  The validation is carried out using JQuery [http://jquery.com/] and the JQuery validation plugin [http://bassistance.de/jquery-plugins/jquery-plugin-validation/].  The code is shown below:

  <script src="//code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript" src="//ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js"></script>

  <script>

  $(document).ready(function(){

    $("form").validate();

    jQuery.validator.addMethod("time", function(value, element) {

  return this.optional(element) || /^[0-2][0-9]:[0-9][0-9]$/.test(value);

}, "Please specify time as HH:MM using the 24 hour clock");

  });

  </script>

Then the class=’required’ is added to each required element, for example:

<label for="person_lead_party[name]">Name [Required]</label><input name="person_lead_party[name]" class='required'/>

Now before the form is submitted the user will be informed of any fields they haven’t filled in that are required.

Date Fields

Date fields need to be submitted in the form YYYY/MM/DD or MM/DD/YY.  Again Javascript can be used to ensure this. Again JQuery is used to enforce this, adding  the class=’date’ to each field that should be a date ensures they are the correct format before being submitted.

<label for="last_contacted">Last contacted</label><input name="last_contacted" class="date"/>

You may wish to replace date fields with a more user friendly date picker, so long as the date is submitted using the same field name and format this is allowed.

Time Fields

Time fields should be submitted as HH::MM using the 24 hour clock. This is checked by adding the class “time” to the field.

Date Time Fields

Date time fields should be submitted as “<date> <time>” ie, a date and a time in the above formats concatenated together. They can be validated in the same way as Date fields.

Success and Failure Pages

By default when a form submission succeeds Workbooks generates a basic Success page. If a submission fails then Workbooks generates a failure page, with some error messages describing the failure. These messages are intended to help you ensure your form is correct.

Within the form there are two hidden fields which allow you to specify a page on your site to redirect to on failure, and a page to redirect to on success. The hidden fields are shown below. When you generate a sample form they are placed in comments; you need to remove the comment and change the value attributes when you use the form on your site.

<input type ='hidden' name='success_url' value='/success.html' />

<input type ='hidden' name='failure_url' value='/failure.html' />

The value is the URL you want to redirect to, it should be a full URL, for example:

http://www.mysite.com/success.html

The failure page will be redirected to with query parameters added to the URL, for example:

When using web-to-case the success page is redirected to complete with query parameters added to in the URL identifying the case which was created (the case_reference), for example:

http://www.mysite.com/success.html?case_reference=CASE-AAAA&case_number=B

Where CASE-AAAA is the Case Reference for the successfully created Case and B is its Id.

If you have the capability to have server generated pages then you could create a page that rendered these messages to your end user.  This would require that you created a page using a server side technology such as PHP, .NET or JSP.

Displaying hidden fields

There may be some fields which are not available on a form due to them being hidden by default. For example, the ‘Comments’ field on a Web2Lead form. You can add the field to your form  by using the code below. You can apply this to any field by referencing the Workbooks field name.

<label for="comment">Comments</label><textarea rows='4' cols='40' name="comment"></textarea><br />