In this post we’ll take a look at 55 responsive WordPress themes, including free and premium themes. The majority of the themes showcased here are premium. Although there are some good free responsive themes available, the time and effort required to create one is rather significant, so most of the good ones must be purchased. There are more free responsive themes available aside from the ones we’ve mentioned here, but we tried to showcase only the best ones regardless of whether they are free or premium.

Free Responsive WordPress Themes:

Skeleton

Responsive Twenty Ten

Meeta

BonPress

Mixfolio

Respo

Orion

Leon

Origin

Oxygen

Hatch

Yoko

iTheme2

Premium Responsive WordPress Themes:

Hero ($49)

Uber ($49)

Reveal ($49)

Infinity ($49)

DailyJournal ($39)

Trim ($39)

Pioneer ($35)

Angular ($35)

Swagger ($35)

innoVative ($35)

Office ($35)

Zig Zag ($35)

Next ($35)

Gigawatt ($30)

Aware ($35)

Propulsion ($40)

Good Minimal ($35)

Reaction WP ($35)

Good Space ($35)

PixelPower ($35)

Super Skeleton ($35)

Whitelight ($70)

SMPL ($70)

Unsigned ($70)

Shelflife ($70)

Olya ($70)

Beveled ($70)

Currents ($70)

PhotoTouch ($39)

Simfo ($39)

Micro ($50)

LitePress ($69)

PhotoNote ($69)

Momento ($60)

Knead ($60)

XO ($35)

Jigsaw ($35)

Akita ($35)

Website ($35)

ELOGIX ($35)

ProMotion ($35)

Modernize ($35)

For more WordPress resources please see:

• The Best WordPress Themes for Churches and Non-Profits
• 27 of the Best WordPress Themes for Photographers
• 25 of the Best Real Estate Themes for WordPress
• WordPress E-Commerce

Today we’ll see how to do an awesome categories menu, based on Pawel Kadysz’s awesome menu design.

We’ll see alternatives to WordPress wp_list_categories functions that allows full customization. Also we’ll see how to do it with clean CSS and a little jQuery for final touches to make it smoother.

So, are you ready to rock?

The Final Look

This is what we get by the end of this tutorial. Highlighted item is the hovered one and all those categories will come from WordPress. You can Download source files or visit the live demo.

#1 – Slicing and adjusting

Before getting into the coding part we need to slice the psd we downloaded, right? Actually no (I know, I know, the sub title is wrong). We’ll use CSS3 for those subtle effects so the only image there will be the background image.

We’ll need to adjust the background image to make it tileable. Each developer does it his own way, what I do is duplicate the layer, invert it vertically and delete the top part for the inverted layer with a smooth eraser. Then I flatten the result and do same thing horizontally.

You can just download the final result from the source files.

#2 – PHP (and, why not, HTML5)

When it comes to a categories listing we often just use wp_list_categories, in the best case add a few CSS rules to make it better but we just ignore all the possibilities of using better markup and completely custom menus.

Here we’ll use a standard HTML menu and for categories listing we’ll use the get_categories() function. It works pretty much same as get_posts, returning a lot of data on our categories but with no markup or styling at all, it’s just a PHP object.

Here is our main code to get the menu:

<nav>
<ul class="mainNav">
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Categories</a>
		<ul class="submenu">
		<?php
			//http://codex.wordpress.org/Function_Reference/get_categories
			$args = array (
				'hierarchical ' => 0
			);
			$cats = get_categories( $args ); //meooowww!!

			foreach ($cats as $cat) {
				echo '<li><a href="' . get_category_link( $cat->term_id ) . '">'.$cat->name.'<span class="number">'.$cat->count.'</span></a></li>';
			}
		?>
		</ul>
	</li>
	<li><a href="#">Archives</a></li>
	<li><a href="#">Search</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</nav>

As for our demo this is the HTML output after processing this function:

<nav>
	<ul class="mainNav">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Categories</a>
			<ul class="submenu">
				<li><a href="#?cat=1">Tutorials<span class="number">15</span></a></li>
				<li><a href="#?cat=2">Inspiration<span class="number">5</span></a></li>
				<li><a href="#?cat=3">Roundups<span class="number">8</span></a></li>
				<li><a href="#?cat=4">HTML and CSS<span class="number">7</span></a></li>
				<li><a href="#?cat=5">Freebies<span class="number">25</span></a></li>
				<li><a href="#?cat=6">Workspaces<span class="number">4</span></a></li>
				<li><a href="#?cat=7">Apps<span class="number">9</span></a></li>
				<li><a href="#?cat=8">News<span class="number">13</span></a></li>
			</ul>
		</li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Search</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Now we have our raw material. Let’s make it prettier.

#3 – CSS3, gradients, text shadows…

To avoid crazy browser default values, we’ll use a CSS reset. Ok, now we need to add that wooden background and position our main nav. Also we’ll use the CSS gradients to avoid using images. This is the CSS to get this working:

body {
	background: url(background.jpg);
}
.mainNav {
	position: relative;
	margin: 100px auto 0;
	width: 500px;
	height: 50px;
	font-family: Arial, Verdana;
}

Now we need to style our links. Since our subitems are also links we need to target our rules for the top ones and then create specific rules to the submenu items, which is easier than use general rules and overwriting them all every time.

We’ll use also CSS gradients for our items. Unfortunately we still need a lot of vendor prefixes to get those items working, but their syntax is pretty similar from one to another. And the final touches will be done with text shadows to avoid using images at all:

.mainNav > li > a {
	display: block;
	padding: 20px 21px 18px;
	font-size: 12px;
	line-height: 100%;
	color: #666666;
	text-decoration: none;
	text-shadow: 0 1px 0 #f4f4f4;
	text-transform: uppercase;
	border-top: 2px solid #f8f8f8;
	border-right: 1px solid #e9e9e9;
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #afafaf;

	background: -moz-linear-gradient( top, #dddddd, #cdcdcd );
	background: -webkit-linear-gradient( top, #dddddd, #cdcdcd );
	background: -o-linear-gradient( top, #dddddd, #cdcdcd );
	background: -khtml-linear-gradient( top, #dddddd, #cdcdcd );
	background: -ms-linear-gradient( top, #dddddd, #cdcdcd );
	background: linear-gradient( top, #dddddd, #cdcdcd );
	background-color: #dddddd;
}
	.mainNav a:hover,
	.mainNav .hover > a {
		border-top-color: #3F3F3F;
		border-bottom-color: #272727;
		color: #ffffff;
		text-shadow: none;

		background-color: #2a2a2a;
		background: -moz-linear-gradient( top, #2c2c2c, #272727 );
		background: -webkit-linear-gradient( top, #2c2c2c, #272727 );
		background: -o-linear-gradient( top, #2c2c2c, #272727 );
		background: -khtml-linear-gradient( top, #2c2c2c, #272727 );
		background: -ms-linear-gradient( top, #2c2c2c, #272727 );
		background: linear-gradient( top, #2c2c2c, #272727 );
	}

As you can see, this CSS will give a nice divisor between elements but it won’t look good for the first and the last items, so we’ll remove this styling for them:

.mainNav > li:first-child a {
	margin-left: -1px;
	border-left: none;
	border-radius: 8px 0 0 8px;
}
.mainNav > li:last-child a {
	padding-right: 25px;
	border-radius: 0 8px 8px 0;
	border-right: none;
}

Now we’ll style our submenus. We need to position it as absolute so it won’t affect the rest of our main items. Also we have a specific styling for our links under submenus. This CSS will get you there:

.submenu {
	position: absolute;
	padding: 15px 0 20px;
	width: 350px;
	background-color: #2a2a2a;
	background: -moz-linear-gradient( top, #272727, #181818 );
	background: -webkit-linear-gradient( top, #272727, #181818 );
	background: -o-linear-gradient( top, #272727, #181818 );
	background: -khtml-linear-gradient( top, #272727, #181818 );
	background: -ms-linear-gradient( top, #272727, #181818 );
	background: linear-gradient( top, #272727, #181818 );
}
	.mainNav .submenu a {
		position: relative;
		float: left;
		padding: 8px 0;
		margin: 0 0 0 16px;
		width: 150px;
		color: #666666;
		font-size: 10px;
		text-decoration: none;
		text-shadow: none;
		text-transform: lowercase;
		border: 0 none;
		border-bottom: 1px solid #333333;
	}
		.mainNav .submenu a:hover {
			margin-top: 0;
			color: #ffffff;
			border: 0 none;
			border-bottom: 1px solid #333333;
			background: transparent none no-repeat;
		}

#4 – jQuery touch

Now that we’ve got our pretty menu we need to hide it when users have JavaScript enabled and also add the proper bindings so we’ll have the hide / reveal effect.

To make things easier we just got a CDN copy of jQuery so we don’t even need to download it (more on this technique later!):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

We’ll add our script tag after everything to improve performance. You may be aware that we need to use $(document).ready(); to avoid triggering jQuery before the DOM is actually ready (doh!). But we can also use this great shortcut:

<script>
	$(function(){
		/* your code here! */
	});
</script>

This is pretty much same as $(document).ready(); but it’s far easier to remember, isn’t it?

We’ll hide our submenu. This is pretty easy, this line will do the job:

$(".submenu").hide();

Now, we need to show the submenu when we hover its parent. Since we already selected the submenu item we can just make use of jQuery chaining and go up in the DOM tree with the “parent()” function.

Now, instead of using the hover function, we’ll use the on, and a mouseenter / mouseleave binding since the hover is just a shortcut for this. This is the corrected line to get it working:

$(".submenu").hide().parent().on('mouseenter', function() {
	$this = $(this);
	if ( ! $this.hasClass("hover")) {
		$this.addClass("hover").children(".submenu").stop().fadeIn();
	}
}).on('mouseleave', function() {
	$this = $(this);
	if ( $this.hasClass("hover")) {
		$this.removeClass("hover").children(".submenu").fadeOut();
	}
});

Notice that we’ve made use of caching also, so our performance will be a little bit better than if we called $(this) twice for each block.

That’s all!

So, what do you think about it? Do you have a better idea to implement this awesome menu? What about idea for future articles? Don’t be shy and let us know via comments!

View the demo | Download the source code

About the Author:

I’m a WordPress and FrontEnd (HTML5, jQuery, CSS3) specialist from Itajubá, Brasil. I just love writing about obscure topics, doing some cool stuff and helping people out there.

Follow Rochester: Website | Twitter | YouTube channel

Download Elegantia (MB zip file)

If you’re reading this post in an RSS reader or in an email you will need to click through to the site to download the file due to WPLegion’s hotlinking protection.

Some of the features of Elegantia include:

• 7 color schemes
• Simple, clean, and stylish design
• Powerful theme options panel
• Widget ready
• 20+ font styles
• Shortcodes
• Portfolio custom post type
• Filterable portfolio
• Different page layouts
• Blog page included
• Custom widgets
• Clean HTML and CSS
• Nivo slider
• Documentation included in admin panel
• WordPress 3.0 ready (menus, featured images, nested comments)
• Email support from WPLegion

WPLegion will be releasing more themes in the future, so you may want to sign up for their newsletter (bottom right on their home page) to be notified when new themes are available.

For those who want to create a job board or add a job board to an existing website or blog, there are several options for creating and managing it. There are several different WordPress plugins and themes that have been developed over the past few years for running job boards.

I have used 2 commercial plugins and 1 commercial theme for job boards with very mixed results. In some cases setting up the job board was rather complicated, and in other cases the support was poor and the developer disappeared. If you’re building a website or a critical part of a website on a commercial plugin or theme it’s important to have confidence that the product will continue to be supported in the future, otherwise you could have major problems as new versions of WordPress are released.

Gravity Forms is a very popular commercial WordPress plugin for creating forms and it includes all of the functionality needed to create a job board. Although it is not specifically a job board plugin there are a few significant reasons why you may want to consider using Gravity Forms if you are looking to create a job board for yourself or for a client:

• Gravity Forms is well-established and due to it’s popularity it is not in danger of becoming unsupported.
• The inteface is easy to use and manage.
• A PayPal add-on is available to those who have a developer’s license of Gravity Forms, so you can easily charge a fee for job submissions.

Because many WordPress designers and developers already have a Gravity Forms license I thought it would be useful to show how this plugin can be used to create your own job board. It is a commercial plugin, so if you don’t currently have a license you would need to at least purchase the $39 personal license in order to use Gravity Forms. That would allow you to set up a job board with free submissions. If you would like to be able to charge companies for the job listings, a developer’s license ($199) is needed in order to get the PayPal add-on.

Please note, this post is not endorsed or sponsored by Gravity Forms. I’ve found it to be a very useful (and time-saving) plugin in my own work so I thought this information may be helpful for others.

Step 1: Upload and Activate Gravity Forms

The very first step is to activate Gravity Forms like any other WordPress plugin.

Step 2: Set Up The Job Categories

Before we create the job submission form it will be helpful to set up the categories for job submissions. To do this, in the WordPress dashboard click on “Posts” and then “Categories”. Here you’ll be able to add the new categories and set up the custom URL slugs.

For the example job board that we’ll be working with in this tutorial I set up three categories, Graphic Design, Web Design, and Web Development (actually, I renamed the Uncategorized category to Graphic Design and created the other two categories). Add as many categories as you would like, including parent/child relationships between categories. When users submit a job they will be able to choose which category should be used.

Step 3: Create the Job Submission Form

We’re now ready to create the form that employers will be using to submit their job listing. Gravity Forms makes it simple to create advanced forms, and it also makes it possible to use the data from the form submission and automatically place it into a post. That way when someone submits a job listing through the form you will be notified by email and you’ll be able to go to the WordPress dashboard to publish the post or delete it if it’s not appropriate.

When you have Gravity Forms activated you will see a “Forms” link in the WordPress dashboard. Click on “New Form”.

Give your form a title and a description by clicking on “edit”.

We’ll need some basic info from the submitter, so to the right under “Advanced Fields” click on “Name” and “Email”. Then hover over the filed and click on “edit”.

That will open up some options. Check the “required” box to make this a required field.

The next field will be the job title. We’ll want this to be used as the post title when the job is published, so click on “Title” under “Post Fields”.

Then click on “edit” and change the name from “Post Title” to “Job Title”, and also make it a required field. Next, we’ll add two custom fields, one for the company name and one for the location. So click on “Custom Field” twice under “Post Fields”. Once the fileds are added to your form, click on “edit”. Change the name of the field and check the radio button for a new custom field name. I’ll leave the company field as optional but I’ll require the location field.

Next, we’ll need to allow the submitter to choose a category, so click on “Category” under “Post Fields”. Click on edit and change the label to “Job Category” and make the field required. This will add a drop down field to the form for selecting from the available categories (which we set up in step 2).

The last form field that we will be adding is one for the job description and for instructions to those who wish to apply. Click on “Body” under “Post Fields”. Click  on “edit” and change the label and make this field required.

Our form is now complete, so click on the “save” button. You’ll be presented with a few options. Click on “setup email notifications” and we’ll go ahead and set it up so that the form submission emails are customized how we want them.

Here you can set it so that the email notifications come from the name and email address of the person submitting the form, you can choose which email address to send them to, and you can choose which fields to display in the email.

Step 4: Add the Form to a Page

Now that we have our form ready to go we will need to add it to a page. Create a page called “Submit a Job”, or whatever you would like it to be titled. Once you are editing the page adding the form is easy. Click on the icon shown in the image below.

You’ll then be able to select the form that you want and it will be inserted into the page. Publish the page when it is ready.

Step 5: Edit the Theme

We’ll now need to make some changes to the theme to display the information that we want visitors to see. For the purposes of this tutorial we will be making minimal changes. In a real world scenario you would probably want to do additional work with the CSS to improve the look of the theme, but we’re just focusing on getting the job board functional for now.

Let’s start with the font page. We want it to show the most recent job submissions, the date of submission, name of the company, location, and job category. We won’t show any of the post content (the job description) on the front page, visitors will have to click to see those details.

The specific actions in this part will vary depending on the theme that you are using, so these will be rather generic instructions. In the index.php file you’ll want to find the code:

or

depending on whether your theme displays full posts or excerpts on the front page. Remove that code entirely so that neither the post body nor the excerpt are shown on the front page.

Where you want the company name to be displayed, use the code:

This will pull the data entered in the “company” custom field for the post.

Where you want the location to be displayed, use the code:

This will pull the data entered in the “location” custom field for the post.

If your theme does not already show the date and category with posts on the front page you can add them with the following code:

and

You’ll also want to set up the category pages by editing the category.php file to show the same information on each post as the front page, except of course it will only show posts in the selected category. You’ll also want to add the company name and the location to the single.php file (using the same code as shown above). which will add that informtion on the individual job listing posts.

Step 6: Setting Up the Payment

We now have a functional job board that allows employers to post a job for free. If you would like to charge a fee for job submissions you can keep going and integrate the PayPal add-on for Gravity Forms. You’ll need to download the add-on (you will need to be logged in to Gravity Forms to view this page), upload and activate it like any other WordPress plugin. You’ll need to edit a few settings to integrate Gravity Forms and PayPal. Gravity Forms provides excellent instructions (you’ll also need to be logged in for this page) for doing this. Basically, you’ll set the IPN settings in your PayPal account and then set up a PayPal feed in Gravity Forms.

You’ll need to add a product field to the submission form with the price that you would like to charge for submissions.

In the Gravity Forms dashboard you’ll then have a few settings to setup and you’ll be ready to go.

Now when someone completes the form they will automatically be led to pay through PayPal.

So as you can see, setting up a job board in WordPress is quite possible with the Gravity Forms plugin. This tutorial really only covers the basics, you’ll want to set up your theme to meet your needs, but the basics of getting the form submission and job listing posts set up is rather simple.

For more tutorials please see:

• Create an Advanced Contact Form for Client Inqueries
• How to Create a Set of Hand-Drawn Design Elements
• Create a Plaid Pattern in Photoshop
• How to Create an Adobe Illustrator Brush

In this post we’ll showcase 27 WordPress themes from various designers that are created especially for photographers.

Carousel ($50)

Work ($49)

Kin ($30)

Sideways ($35)

deLucide (39€)

Photocrati ($79)

DeepFocus ($39 per year membership)

Photocraft ($65)

Landscape ($79.95)

Photobox ($39)

Manhattan ($79.95)

Aperture ($70)

Filtered ($49)

Photo Graphic ($50)

L’Image ($47)

Photolist ($50)

Through the Lens ($50)

Photonic ($25)

Photography ($68)

deFolio (39€)

Photoland ($49)

PhotoPro ($24.95, does not include Genesis Framework)

Art Kid ($25, does not include StartBox Framework)

Photo Nexus ($30)

Photoshot ($35)

PhotoPurePress ($25)

PhotoMe ($30)

You may also be interested in:

• 25 of the Best Photographer Portfolio Websites
• 25 of the Best Photographer Portfolio Websites – Part II
• 25 of the Best Photography Portfolio Sites – Part III
• 25 Amazing Photographer Portfolio Websites

If your organization is looking for an affordable and professional website, please see the free websites that we have to offer for non-profit organizations and churches.

Grace ($65)

Outreach ($79.95)

Moses ($79)

Church ($79.95)

Light of Peace ($30)

Mu ($50)

Hopefull ($50)

WordPress Church ($50)

Charity Theme ($75)

Non-Profit Theme ($69)

Foundation (free)

Charity Organization ($60)

You may also be interested in:

• 50 of the Best Church Website Designs
• 35 Excellent Church Websites – Part II
• 25 Outstanding Church Websites – Part III
• 25 Beautiful Church Websites – Part IV
• 40 of the Best Websites of Non-Profit Organizations
• Design Inspiration: 25 Non-Profit Websites
• 10 Keys to Effective Non-Profit Organization Websites

WordPress is a great platform for most real estate agents because it is simple to add new listings in most real estate themes, professional themes can be purchased for less than $100, and because having a search engine-friendly site is possible with WordPress.

While there are some free real estate themes available, the quality and functionality of most premium themes is far better and prices are very reasonable. In this post we’ll showcase 25 of the best professional real estate themes for WordPress.

AgentPress ($59.95 at StudioPress)

ElegantEstate (Membership to ElegantThemes is $39/year)

deCasa (39 € at ThemeShift)

deCondo (39 € at ThemeShift)

Real Estate ($89.95 from Templatic)

Realtor Press ($79 at Mojo Themes)

Meadow Ridge, a Genesis Child Theme ($50 at Theme Garden)

Estate ($200 at WooThemes)

Real Agent ($79.95 at Gorilla Themes)

Residence ($79.95 at Gorilla Themes)

Broker ($79.95 at Gorilla Themes)

Open House ($79.95 at Gorilla Themes)

Bel Air ($69.95 at Gorilla Themes)

OpenHouse ($35 at ThemeForest)

WP Pro Real Estate ($30 at ThemeForest)

WP Pro Real Estate 2 ($35 at ThemeForest)

Real Estate Theme ($25 at ThemeForest)

Elegant Real Estate ($30 at ThemeForest)

QuickStart Real Estate ($30 at ThemeForest)

Real Estate Gold ($30 at ThemeForest)

OurHome ($25 at ThemeForest)

Realist ($25 at ThemeForest)

ModernRealtor ($30 at ThemeForest)

Homeowner ($79.95 at Gorilla Themes)

Prime Real Estate ($32 at Mojo Themes)

For more WordPress resources please see:

• WordPress Ecommerce: 30+ Resources
• 15 Exceptionally Useful Resources for WordPress Theme Designers
• 20+ Tutorials and Resources for Working with Custom Fields in WordPress
• Top 10 Blogs for the WordPress Community

WordPress E-Commerce Plugins:

WP e-Commerce Pluign (free with premium upgrades available)

Shopp ($55)

Other free e-commerce plugins:

• eShop
• YAK for WordPress
• QuickShop
• ArtPal
• Simple PayPal Cart

Other premium e-commerce plugins:

• WP Affiliate Platform ($39.95)
• PHPurchase ($49)

WordPress E-Commerce Themes:

ShopperPress ($79)

Crafty Cart (free)

Viroshop ($37)

WPA Storefront ($32)

The Furniture Store ($47)

The Jewelry Shop ($47)

The Clothes Shop ($42)

AppCloud ($35)

Kelontong ($35)

Store ($65)

WP Store ($65)

e-Commerce ($65)

Kidz Store ($65)

eShop ($65)

wpShop ($37)

eGoods ($32)

Ecommerce Theme ($79.95)

Tutorials for Using WordPress for Ecommerce:

• Create an eCommerce Website with WordPress in Under 5 Minutes (video)
• Getting Set Up with the WP e-Commerce Plugin: Settings and Configurations
• WP e-Commerce SEO Tutorial
• WP e-Commerce Review for WordPress
• A Crash Course in Creating E-Commerce Websites with WordPress
• How to Sell Digital or Non-Digital Products Online with WordPress eStore Plugin

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:

• 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

1. Show Most Recent Comments

One of the most important ways that blogs can encourage readers to get involved is through the comments. There are a number of different strategies for increasing comments and participation from readers, and many of them involve placing extra emphasis on the comments. By displaying the most recent comments (in the sidebar for example) you may be able to encourage more comments because visitors will see that you value their participation.

To display a list of the most recent comments, use the following code in your theme:

Source: WP Hacks

2. Allow Visitors to Email Posts to Their Friends

If your readers enjoy and appreciate the posts on your blog they may be interested in emailing them to their friends. On most news websites you’ll see a link that says “email to a friend,” but it’s not as common on blogs. Adding this functionality into your theme is not as difficult as you might think.

To add an “email this” link, use the following code in your single.php file:

Source: WP Recipes

3. Add a “Share on Facebook” Link

While social media and social networking are commonly integrated with blogging, it’s more common to see a Digg or Tweetmeme button than one that will allow readers to share the link via Facebook. Since Facebook is such an incredibly popular site, it may provide additional exposure for your blog and provide more opportunities for your readers to interact with your content.

To add a “share on Facebook” link, use the following code:

Source: WP Recipes

4. Add Custom Bookmark Links

Many blogs receive tremendous exposure from social media sites, and encouraging your readers to interact by voting or bookmarking can make a big difference in terms of traffic levels. There are plugins and widgets available for this purpose, as well as buttons and badges from the social media sites, but if you’d like more control over the look or if you would just like to do it yourself it is possible.

Bookmark with Delicious:

Digg:

Twitter:

StumbleUpon:

Source: Perishable Press

5. Rearrange the Comments to Show Most Recent Comments First

Having a blog that receives a lot of comments from readers can in some ways discourage others from participating. Some readers will not take the time to leave a comment if they feel like theirs will be buried below 100 other comments. One trick to reward those who are going to take the time to comment is to list the comments with the most recent on top, rather than the oldest one being on top.

Find the following code in your comments.php file (please note that not all themes use the same coding for the comments.php file):

and before it add:

Source: WordPress Forums

6. Add a User-Submitted News Section

User-submitted news or community news sections can be a great way for visitors to get involved at your site. With a news section you will be able to display links to relevant posts at other blogs, and your readers will be able to submit posts that they have found to be helpful, or get some extra promotion by submitting links to their own posts.

I included a news section when I launched DesignM.ag last year and since day one it has drawn significant interest from readers.

The process of adding a news section is more involved than just copying and pasting some code, so I will not be providing code for this one, but Tripwire Magazine published a post a few months ago that will lead you through the process. See How to: WordPress 2.7+ User Link Feed Submit Form and Widget.

7. Add Translation Links

As a blogger, you may be surprised to see how many of your visitors and subscribers come from various countries. While these people may be able to read and understand your posts, there may be some times when they have difficulty or where they would like to share the post with someone who may not be able to read it. In these case, translation can come in handy.

Inserting the code shown below will allow your visitors to easily use Google’s translation services:

Source: Perishable Press

8. Google Custom Search

One of the best ways for visitors to find what they are looking for is to use a site-wide search. Unfortunately, the default WordPress search isn’t much help in most cases. However, you can easily add custom search powered by Google to your blog (plus you can monetize the search through AdSense).

In order to get your own custom search from Google, you will need to sign up with them and they will provide the code. Pro Blog Design has a tutorial that takes you through all of the steps that are involved. See Make a Google Custom Search for Your Blog, and Make Money.

9. Display Facebook Status on Your Blog

Many blogs display most recent tweets, but it’s also possible to share your Facebook status on your blog. There are a few steps involved in doing this with WordPress, and Hongkiat has a tutorial that will lead you through the process. See How to Display Facebook Statuses on WordPress Blog.

For more WordPress-related posts please see:

• 15 Exceptionally Useful Resources for WordPress Theme Designers
• 20+ Tutorials and Resources for Working with Custom Fields in WordPress
• Top 10 Tutorials for Developing WordPress Themes
• 10 Excellent Sources for WordPress Design Inspiration