Universal Contact Form

From Gruff Goat Wiki
Jump to: navigation, search

The Universal Contact Form (UCF) is intended for the use of dVector clients only. Usage involves placing the form into your WordPress site using a lightbox plugin.

General Recommendations

  • Create your 'contact us' link only once but include it prominently on every page using the appropriate template and widget.
  • Consider which information you truly do require.
  • Utilize the reCAPTCHA verification system. It does cut down on spam, though it may also frustrate some visitors.
  • Test your configuration file before using it.
  • Test your form after any changes to the configuration file or to the link.

Configuration File

The configuration file is an XML formatted text file that you upload to your site using the media manager. Download the sample configuration file. The layout of the configuration file should be mostly self-explanatory. Once you have your configuration file, you may test it at the Configuration Tester.


The UCF allows a limited set of fields named:

  1. regarding
    • to whom or upon which subject the message is intended
  2. name
    • the name of the person submitting the form
  3. phone
    • the phone of the person submitting the form
  4. email
    • the email of the person submitting the form
  5. organization
    • the organization of the person submitting the form
  6. contact_back
    • a check box indicating whether the person submitting the form requests a contact
  7. message
    • the message
  8. captcha
    • a verification system that attempts to block auto-botted submissions


Each of the fields has 3 options, these are:

  • title
    • the words that will be shown on the form above the field entry
  • display (true/false)
    • option to display this field on the form
  • required
    • option to require this field on the form submission
    • Only regarding is absolutely required and any other setting will be ignored

If a field is marked display=false then it will also be automatically set as required=false.


The regarding field has additional paired options that are shown in the field setting of the configuration file. These are name and email. These two options must be paired and are used to set the text shown in the form pulldown list for the regarding field and which email should be sent the message upon submission. This should be clear from reviewing the configuration sample.

Create, Save, and Upload

  1. Create a new text file on your computer, perhaps named ucf_config.txt.
  2. Copy the contents of the configuration sample to your file.
  3. Make any changes you wish to the configuration file and save it
  4. Open the Media Library in WordPress
  5. Select Add New
  6. Select file from your computer to upload and save
  7. Make a note of the File URL, you will need this later.

Creating the Thickbox link

Thickbox is a lightbox that is built into WordPress. It may be used by using class="thickbox" when creating your link. This may be done simply by using the provided lightbox plugin or directly using the instructions below. If you are inserting the link into a text box widget, which I recommend, then build your link from its parts. You may also use the Configuration Tester to generate the correct link.

Parts of the link

The link is composed of a number of parts: <a href title class>Link text</a>

  • <a></a> = the opening and closing tags of the link anchor
  • Link text = The text shown in the browser that is clickable
  • href = the link
    • URL of the UCF = http://dvector.com/cake/contact_forms/index?config_url=
    • URL of the config file = http://dvector.com/blog/wp-content/uploads/2010/05/ucf_config.txt
      • replace this with the actual file URL you noted earlier
    • thickbox formatting and usage = ?keepThis=true&TB_iframe=true&height=300&width=500
  • class = the CSS class, it must include thickbox

A full sample link is:

<a href="http://dvector.com/cake/contact_forms/index?config_url=http://dvector.com/blog/wp-content/uploads/2010/05/ucf_config.txt?keepThis=true&TB_iframe=true&height=300&width=500" title="Contact Us" class="thickbox">Contact us form</a>

Insert the link

Now that you have properly formatted link text, you may insert it directly into a text widget or you may use the HTML editor to insert it directly into your Post or Page. The HTML editor must be used instead of the Visual editor and is easily selectable from Edit Post.