Using Contact Form 7 with the Web Directory Plugin

I’ve recently pushed an update to the Web Directory plugin for WordPress that enables people to use the Contact Forms 7 plugin to support link submissions. Several people have been asking me to write a tutorial on how I did it on my Connected Phone web site. This should help some of you to create a submission form and use it with the Web Directory plugin I have created. It’s not a comprehensive tutorial on Contact Form 7. If you need some basic information about the Contact Form 7 plugin, I’ve written a post you can read (WordPress Contact Form 7 plugin: Great for Forms).

With the recent update to the Web Directory plugin, I have incorporated some code stuff that allows users to create a Contact Forms 7 form to allow visitors to their WordPress blog to submit a request to be included in their link directory. The code I have included allows users to use a new form tag called linkcat. It allows you to include a select form item that contains a list of the WordPress link categories as options. It has the following syntax:

[linkcat* variable-name include_blank id:form-select-tag-id]

It uses several arguments that are similar to a regular Contact Form 7 select tag. variable-name is the name of the variable that you can use when you want to include the value in your email form. include_blank will include a “—” entry in the form’s select options. form-select-tag-id is the select tag ID that will be used in the form which can be used in formatting the form using CSS.

How to use it on your form

First create a Contact Form 7 form as you normally would. What you include on the submission form is entirely up to you. As a minimum you have to create fields that you need to input into the WordPress “Add New Link” form. Of course the other form item would be under which category should the submitted link be included in — linkcat takes care of this. Below is a similar sample of what I’ve used at the Connected Phone web site.

<div class=”form-item site-category-form-item”>

<label class=”site-category-label” for=”site-category”>Website Category<span class=”required”>*</span></label><p class=”form-field site-category-field”>[linkcat* site-category include_blank id:site-category]</p>

</div>

<div class=”form-item site-name-form-item”>

<label class=”site-name-label” for=”site-name”>Website Name<span class=”required”>*</span></label><p class=”form-field site-name-field”>[text* site-name id:site-name]</p>

</div>

<div class=”form-item site-desc-form-item”>

<label class=”site-desc-label” for=”site-desc”>Website Description<span class=”required”>*</span></label><p class=”form-field site-desc-field”>[textarea* site-desc id:site-desc]</p>

</div>

Once you’ve finished creating the submission form, you can now create a submission page where you’ll need to include the shortcode for your Contact Form 7 form. Remember the “slug” for the page you’ve created. This is what you need to input into the “Manage Directory” configuration page in the WordPress admin for the Web Directory plugin under the item “The URL for your Submission Page”. For example, if the slug is “submiturl”, you input “/submiturl” into the field.

Save the Web Directory configuration and your submission page should now start working.