Sunday, 16 October 2011

How-to: Add WordPress Custom Forms

Wordpress custom form field add and arrangeWordpress.com has sharing buttons for every social network under the sun, plus you can make your own for anything not covered. Other kinds of interactivity are limited by the free hosting option and the lack of customisable plug-ins. For those you need the self-hosting option of Wordpress.org.

However, you can dress up a custom contact form in order to collect reader information and have it emailed to you. It's a surprisingly powerful feature that actually works.


By adding a custom contact form, you can enable your your readers not only to submit feedback on blog-posts, but supply other, more specific data in order to respond to specific questions, expressions of interest in your services and so on. All feedback is automatically scanned for spam (the standard Akizmet service), and legitimate feedback will be emailed to you. In the Post Editor, select the right-most icon in the Upload/Insert toolbar, tipped "Add a Custom Form." This will open a standard form in the Form Editor.  
Wordpress cutom form fields 
Adding More Fields
Click the blue Add a New Field link at the bottom. You have a choice of text box (single line), text area (big text box), radio buttons, checkbox, or dropdown selection field. For these last three, you get a further form definition area on the right to specify your range of values. Once added, you can re-sequence the vertical order of the fields. This is a one-column, fixed format form, so don't expect any fancy styling.

Viewing Feedback within WordPress
Wordpress stores the feedback entered in the form until you delete it. You can read your feedback at any time by clicking the "Feedbacks" link in the main Admin menu. BE AWARE this isn't the most secure way of storing personal details. Take care not only what you ask for, but of the personal data some readers spontaneously volunteer; delete and store off-line if in doubt. You are your own Data Protection Registrar in this - don't wait for a bureaucrat with a warrant to draw your attention to a personal data breach!  

Email Notifications
Notifications are automatically sent to the default address used by the Wordpress account of the author of the post. Change the Custom Form notification address if you need to redirect. You can modify where your feedback is sent and the subject line.  

Preview
Wordpress inserts an interpreted code block into the post body. You will have to use the Preview window to see how your post looks with the form embedded and refresh the preview as you change it.

Wordpress custom form field add and arrangeReusable Forms
A custom form applies to a single post. However, the code block inserted into the post body, can be copied and pasted into any post (note I've inserted * into each form field tag so they display in this post as text!):

[*contact-form subject="Workshop bookings" to="robin.catling@mymail.me"] [*contact-field label="Name" type="name" required="true" /] [*contact-field label="Email" type="email" required="true" /] [*contact-field label="Your phone number" type="text" required="true" /] [*contact-field label="Select Workshop Date" type="select" required="true" options="Wed 19 October with lunch,Thurs 20 October morning,Wed 26 October with lunch,Thurs 27 October morning,Wed 02 November with lunch,Thurs 03 November morning" /] [*contact-field label="Comments and any special requirements" type="textarea" /] [/contact-form*]

This makes it easy to clone a custom form from post to post. Just check your radio, checkbox and drop-list values are valid for each post! RC