ATrickDesign.com

Most web designers rely on inquiries from their portfolio website to produce a decent portion of their business. Contact forms can be very simple, collecting a name and contact information, or they can be much more detailed, providing enough information to get an estimate. While the primary purpose of the contact form on our website has always been to make it easy for potential clients to contact us about web design projects, there are also a number of other reasons that visitors use the contact form and a one-size-fits-all approach has its drawbacks. We recently changed the contact form to include some conditional fields that make the form more customized according to the reason the visitor is contacting us, and in this post we’ll go through the process of creating this type of form.

The form we’ll be creating will contain some basic fields (name, email, phone, website, and message) that are shown to all visitors who are filling out the form, but based on the reason they are contacting us they will also see a few other more specific fields. If the visitor selects “Web Design Services” as their reason for contacting us they will be prompted to tell us if it is a new website or a re-design, enter a budget, and tell us how they found us. If they select “Content Development Services” they will also be prompted to enter a budget, but with different options than the budget for web design services, and so on.

In the past our contact form has included a field to allow visitors to select a budget, but that was based on the assumption that they were contacting us regarding web design services. Since the budget field isn’t applicable for someone who is filling out the contact form just to say hi, this “advanced” form will only show what is relevant based on user input.

Conditional logic open up a lot of possibilities with contact forms, especially for designers and agencies that offer a variety of different services. The user has a better experience because they are not confused by fields that are not relevant to them, and more detailed data is possible because not every field will be shown to every user. This tutorial will show just one example of how this type of form can be used, most likely you can come up with some ways to put it into practice on your own site.

For this tutorial we will be using the Gravity Forms plugin for WordPress (a premium plugin). I purchased a developer’s license for this plugin a few months ago because it makes it very simple to create advanced forms, and I’ve already used it on several projects. With Gravity Forms you can create a simple contact form, a more advanced one like we will be doing here, a form that creates user-submitted posts (such as a community news section), and more. This post is not sponsored or supported in any way by Gravity Forms, and it contains no affiliate links. I believethisadvanced contact form that we will be creating can be useful for just about any web designer or service provider, and using Gravity Formsprovides a quick, simple way to get it done.

Why Use Gravity Forms?

There are countless contact form plugins out there for WordPress, many of them are free, and of course contact forms can also be coded without using a plugin, so why use Gravity Forms? The reason I chose to buy a license for the plugin is because of the time that it can save. Creating a more advanced form with other plugins takes much more time and effort.

Although there is an upfront cost to purchase the license ($39 for a single-site license or $199 for a developer’s license) there is no on-going cost like you would have with some options like Wufoo or FormStack. WordPress users will also like the fact that Gravity Form submissions can be viewed and replied to from within the WordPress dashboard (email notifications can also be set up).

How to Create an Advanced Contact Form with Gravity Forms:

The first thing you’ll need to do is get a license for Gravity Forms. Once you have the purchased the license, download it, install it, and activate it like you would any other WordPress plugin. Once you’ve done that you will see an option for “Forms” in the vertical navigation menu (just below “Comments”) in the WordPress dashboard. Click on “New Form” and we’ll get started. You can hover over the “Untitled” field and click on edit, then you will be able to enter a form title and description.

Setting Up the Basic Fields:

To start with, we’ll create a few basic fields that we want to be a part of every form submission, regardless of the purpose of the inquiry. So we’ll start with the first name and last name fields. Gravity Forms allows you to choose from a list of standard/general form fields (such as single line text, drop down, checkboxes, etc.) and it also includes “advanced” fields for specific purposes, such as name, email, date, etc. We’ll start with the name field, so at the right side of the screen click on the down arrow next to “Advanced Fields” and then click on “Name” and it will add the fields for first and last name.

We’ll make the name fields required, so hover over the fields and you’ll see an “Edit” link appear.

Click on “Edit” and it will open up some options. At the bottom click on the checkbox next to “Required”. This will prevent the form from being submitted without the name filled out.

After you have done that you can click on “Close” where the “Edit” link had been.

Next, we’ll open up the options for the standard fields by clicking on the down arrow, and we’ll select “Single Line Text”.

Click to edit this field, and chance the name from “Untitled” to “Company/Organization”, and then close.

The next field we want to add is for the user’s email address, so click on “Email” under the “Advanced Fields”.

We also want the email address to be a required field, so click on “Edit” and check “Required”, and close.

Then we’ll add a field for the phone number, so click on “Phone” under “Advanced Fields”. Next we’ll add a field for a URL, so select “Website” under “Advance Fields”. Neither of these will be required fields.

The next field we’re going to create will be the most important one, because it will impact what other fields are shown. We’ll create a drop down that allows the user to select the reason for contacting us. Click on “Drop Down” under “Standard Fields”. Then click on “Edit” and change the field label to “Reason for Contacting Us”. For the purposes of this tutorial we are going to create 6 options to chose, but what you create will of course be based upon the services that you offer and the other options that you want to allow visitors to select. The six options that we are using are: 1) Web Design Services, 2) SEO Services, 3) Content Development Services, 4) Consulting, 5) Advertising, and 6) Other. If the user selects “Web Design Services” they will see certain other relevant fields, if they choose “SEO Services” they will see different fields, and so on. So we’re going to create the first option to say “Please Select” so that none of the conditional fields are shown until the reason of contact is chosen (if “Web Design Services” is selected by default, all of those conditional fields will be shown before the user has really chosen “Web Design Services”). We’ll also check the box to make this a required field.

Using Conditional Logic:

Now we can start creating some fields that will be conditional based on the response to the previous field. First, we’ll add a checkbox (under “Standard Fields”) and click on “Edit”. Change the field label to “New Website or Re-Design” and edit the choices to be “New Website” and “Re-Design, and delete the third choice. Now, to make it conditional, click on the advanced tab and at the bottom you will see a checkbox for “Enable Conditional Logic”. Check that box and you’ll see some new options appear. Since we have only created one field that could be used for conditional logic it is the only one you will see. Change “Please Select” to “Web Design Services” and this field will be shown whenever someone is filling out a contact form regarding web design, but not for other services.

Next, we’ll create a drop down menu that allows users to select their budget range for web design services. So click on “Drop Down” under “Standard Fields” and enter whatever budget ranges are appropriate. Then, click on the “Advanced” tab, check the box for “Enable Conditional Logic”, and have it appear when the user selects “Web Design Services”.

We’ll also ask our potential web design clients how they found us, so once again click on “Drop Down” under “Standard Fields”. This time we’ll enter a few different options including search engine, referral, link from another website, I’m a blog reader, and other. Again, click on the “Advanced” tab and make it conditional on the user selecting “Web Design Services”.

Next, we’ll create a checkbox field that is relevant to SEO services, so click on “Checkboxes” under “Standard Fields”. We’re editing the field label to say “What Package Would You Like?”, and adding the following choices: keyword research, competitor analysis, and full site evaluation. Click on the “Advanced” tab and check the box for “Enable Conditional Logic”, and this time change it to be “SEO Services”.

Next, we’ll create a budget drop down that will apply to content development services. So click on “Drop Down” under “Standard Fields”. Change the field label to be “Budget” and add the appropriate budget ranges. Then click on “Advanced” and check the box for “Enable Conditional Logic”, and make it conditional upon the user selecting “Content Development Services”.

The last field we’re going to create is the message field that will not be conditional, every user will see it, and it will allow the user to add their comments or questions that will be emailed to us. Click on “Paragraph Text” under “Standard Fields”. Edit the field label to be “Message”, and make no other changes.

Setting Up Email Notifications:

Click on the “Save Form” buttonat the bottom of the page.Now that our form has been created we will set it up to send email notifications when a new inquiry is submitted, so click on “Setup Email Notification for This Form”.

Check the box next to “Enable email notification to administrators”. Then enter the email address where you would like it to be sent in the “Send to Email” field. (Gravity Forms includes routing options which sends the email to different addresses based on a field in the form, but we will not be using this feature for this tutorial.) In the “From Email” field select “Email” in the drop down. This will use the email address entered by the user as the “from” address, so if you reply to an email it will go to the user.

You can then set up the subject of the emails, and you can use form fields. So we’ll type in the text “A Message from” and then using the drop down we will select the first name and the last name.

Next, we’ll customize the body of the message that we receive. You can use the drop down to select form fields to include in the message, but we’ll keep it simple by selecting “All Submitted Fields”.

So the body of the message will now include all information that is provided by the user in the contact form.

Inserting the Form:

The last thing left to do is to insert the form into our Contact Page. So edit the page in WordPress, or create a new page if one doesn’t already exist, and you’ll see an icon to insert a form from Gravity Forms.

Place your cursor where you would like to enter the form and click on the icon. Then select the form from the drop down and you can choose to show or hide the form title and description.

Click “Insert Form” and you’re done. Now you’ll have an advanced contact form that makes it easier for visitors and provides more relevant information to you.

I hope this post has given you some ideas that can be put into practice on your own site.

For more WordPress-related content please see:

• 9 WordPress Hacks to User Interactivity
• 15 Exceptionally Useful Resources for WordPress Theme Designers
• 20+ Tutorials and Resources for Working with Custom Fields in WordPress