Create an Advanced Contact Form for Client Inquiries

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 believe this advanced contact form that we will be creating can be useful for just about any web designer or service provider, and using Gravity Forms provides 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” button at 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:

Published June 25th, 2010 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

17 Responses

Comments are now closed on this post.

  • Reactix Media, June 25, 2010

    I would say that roughly 25-30% of my client work is generated from my contact form or RFP form on my site.

    It is a good way for potential clients to get some info without having to call. I find that many of my clients like to use the form and then pass the ball over to me to make recommendations, quotes, etc.

    If you don’t have a good contact or RFP form on your site, I would certainly recommend that you spend the time putting one together. I bet you’ll notice the difference when you do!

    • Vandelay Website Design, June 25, 2010

      Reactix,
      I’ve already seen an increase in inquiries in just about 2 weeks with the new form. It’s too early to tell if it’s directly a result of the changes, but I think it has a lot to do with it.

  • Reactix Media, June 25, 2010

    I noticed the same thing as well. I went for several years without a good contact form and just used an email link for people to get in touch. Once I built out a contact form and an RFP form, I immediately noticed increased contacts from potential clients and followers.

    I easily get 4-5 RFP requests a week from my site and it works well because when a potential client submits the info, it allows me to do some background work before I get back to them on their project. That always seems to make the initial project talk go way smoother for both of us.

  • paul, June 26, 2010

    I thought the gravity forms license changed, and is now a yearly renewal to get free updates and support?

  • Huston Malande, June 26, 2010

    Thanks for the post. Am currently overhauling my web site and this info is invaluable. Thanks again.

  • Tanya Gill, June 27, 2010

    Contact form is a must have thing for any website or blog. Thanx for sharing this

  • Vandelay Website Design, June 28, 2010

    Paul,
    I think the license did change, but I’m not aware of anything in the post that is not still accurate with the new license.

  • website design, June 28, 2010

    Great forms
    Thanks

  • Bristol web design, June 29, 2010

    The forms are good. Shame to see people paying for stuff that is not that difficult to create yourself though.

  • altin cilek, June 29, 2010

    great post thx

  • pixelaura, July 2, 2010

    Hi,
    its good work for client contact form.you have done it very professionally……
    thanks for sharing your contact form post..

  • Thanks for the post, it’s something that can be forgotten about, but a contact form is an important element and just looking at your examples I can tell an advanced form looks very attractive. Nice article!

  • Przemyslaw Bajno, July 20, 2010

    I prefer creating contact forms from scratch and take 100% control of code.

    • Vandelay Website Design, July 20, 2010

      Przemyslaw,
      There’s certainly nothing wrong with that, I just wanted to show that it can also be done without coding the form.

  • anick, September 15, 2010

    Cool plugin.thanks.

  • Christian, September 6, 2011

    Hi guys,
    I’ve setup one form for a client where we want to permit to our clients to make a reservation for a table in our restaurant. I’ve used gravity form. But now my question is:
    I’ve limited the submission field of people to 40 people max but…I want to limit 40 people per day…automatically generate an error if the limit of 40 person per day is reached…is there any way to make this via gravity form ? Or I have to use another plugin?
    Thank you so much to all

    • Vandelay Website Design, September 7, 2011

      Hi Christian,
      I would recommend that you contact Gravity Forms for support. I haven’t tried to do this before so I really can’t say. I think you can set a limit on form submissions but I’m not sure if you can set if for a per-day limit.