Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

Best Practices of Contact Form-Page Designs in WordPress

Last updated on by
Elegant Themes
Best Practices of Contact Form-Page Designs in WordPress

One of the things that many bloggers shy away from is giving their users an ability to contact the author. The reason why contact pages are important is because users can be very helpful in terms of getting feedback, new ideas, and suggestions. Also contact forms provide a way for your potential advertisers and clients to reach you therefore everyone should have a contact form or page. In this article we will be showcasing the collection of some of the best contact forms and pages implemented within WordPress as well as showing you how you can create your own contact form in WordPress.

Best Practices and Trends of Contact Forms in WordPress

Each designer has their own approach to their design. In here we will be highlighting some of the popular trends that you can follow, and some very unique contact pages for your inspiration. These forms and pages are well aligned, and most of all well incorporated within the site. If you know of a contact page design or a trend that is not in this list, then feel free to share it in the comments.

Maps and Address

Maps and Address trend is something that is getting very popular. Most businesses list their physical address on their contact page, but these designers have done an outstanding job in embedding the contact form and their address.

Substrakt - Best Practices of Contact Forms

Ole Fredrick - Best Practices of Contact Forms

Popular Front - Best Practices of Contact Forms

Hand-Drawn / Realistic Touch

Having a retro / sketch look in the design is not something new, but it is getting more and more popular. These contact forms follow this trend and they do a great job in it.

When words like hand-drawn and creativity comes up, Carsonified always seem to be there. This contact page design on their site is one of a kind design that is very unique and a true representation of creativity at work.

Carsonified - Best Practices of Contact Forms

Notepad style designs are very common but Bert Timmermans did a stunning job on the contact form. It is one of the most complete and creative contact page that list the social media networks, website, other personal information as well as a well-aligned contact form all put together in the best possible way it could’ve been.

Bert - Best Practices of Contact Forms

One of a unique design real life type design that got our attention was by Rustin Jessen. This fill in the blank type contact form is a great idea and not very hard to implement.

Rustin - Best Practices of Contact Forms

The following two designs shows a retro post card style in their contact form. This trend gives their contact form a real life touch.

Qwert City - Best Practices of Contact Forms

Substrakt - Best Practices of Contact Forms

Simple yet Elegant

You don’t really have to go out of your comfort zone to get a super creative contact page design. Some of us just are not the artist type. You can still make simple yet elegant contact forms like the ones below.

Intuitive Designs - Best Practices of Contact Forms

Second and Park - Best Practices of Contact Forms

Neil Tan - Best Practices of Contact Forms

Jeff Sarmiento - Best Practices of Contact Forms

Well incorporated within the Design

Sometimes you are limited with what you can do with the contact form because of your design. In that case you need to be creative and try to find a work around, so you can have a good contact form that is well incorporated within the design.

BubblesSOC - Best Practices of Contact Forms

Owltastic - Best Practices of Contact Forms

Envato - Best Practices of Contact Forms

Design Disease - Best Practices of Contact Forms

How to Create a Contact Page in WordPress

One of the things that we have noticed is that a lot of WordPress bloggers do not have a contact form on their website because they do not know how to implement one using WordPress. Some users rely on a third party program to create a contact form outside their blog and then have that. But it does not have to be that way. There are plenty of great plugins available that lets you create your own contact form in WordPress. These plugins have SPAM protection built-in such as Captcha images, security questions and others.

There are many plugins that are available for you to create a contact form in WordPress. The plugins we recommend are:

You can download either one of these plugins and activate them. Each plugin has their own set of directions to follow, but they are all very easy to implement. If you need help implementing or configuring one of these plugins, you can contact us for help. You would have to start by creating a new page. If you want to create a custom page and follow one of the trends mentioned in this post, then you would have to look into creating a custom page in WordPress. But by simply having a contact form is enough if you want to keep things simple.

If you have any advices that you would like to share, or a great contact form that we might have missed then please feel free to post it in the comments.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. raiderhost says:

    nice tutorial dude ..

    lets make me to try it

  2. Lars Tong Strömberg says:

    One contact form plugin I have heard is good that is not listed is Gravity Forms. Unfortunately, it costs money though.

    • Mike Seaby says:

      I bought a copy of this plugin – it’s pretty amazing & can be used for more than just contact forms.

  3. Lars Tong Strömberg says:

    Any experience from anyone on using dynamic functions and contact form 7 or do I need to go cforms for that? I.e., I want to populate a dropdown with all the posts of a certain category dynamically. Can that be done?

  4. neer says:

    nice collection in designing, html, css and wp i like it :)

  5. Jauhari says:

    Nice Collections ;)

  6. Yesutu says:

    really wonderfull (:

  7. Trisha says:

    These are seriously gorgeous! I dont even want to THINK about styling cformsII. Hopefully Contact Form 7 is where its at… by the looks of things on here, it probably is. another great post.

    • Keith Davis says:

      Hi Trish
      CformsII has lots of preset styles, but Contact form 7 has a simple stylesheet that you can edit to form your own style.
      My vote? Contact form 7 every time.

      • Trisha says:

        cforms II was also very confusing while setting up, i noticed. I suppose it has more power. Id rather have simplicity and a solid foundation.

  8. Keith Davis says:

    I’ve just installed Contact Form 7 and Really Simple Captcha on a site I have set up locally, using XAMPP.
    It was very easy to install and it worked first time when I tested it.

    Couldn’t get cformsII to work on my local setup… tried everything, but gave up and will now be using Contact Form 7 on my live site.

    Any chance on a few tips on styling Contact Form 7?

    • Editorial Staff says:

      Styling is something that requires the users to know a lot of CSS and it works different on each level. We don’t think we would be writing a tutorial on how to style a contact form.

      • Keith Davis says:

        Thanks, I thought that the plugin might have a few preset styles, but I’ve found the style sheet with the plugin and can make my own changes.
        Fortunately CSS is one of the few things I can manage!
        Keep up the good work.

  9. Dario Gutierrez says:

    Nice post, currently I use cforms is an excellent plug in. Best regards.

  10. Doug C. says:

    I tried the other contact form plugins and could not use any of them until I found Contact Form 7. The others were far too convoluted. CF7 is great because of it’s simplicity.

  11. Matt M. says:

    I also use Contact Form 7 for mine but I ended up stylizing the fields quite a bit to make them match my site and to show field focus, etc.

    The forms you note in your article have a pretty wide range of fields that the users must (or can) fill out. I’d be curious to see what the average is for how many fields a user fills out before the lose interest or abandon a page and fail to make the actual conversion.

    • Editorial Staff says:

      That would be a good case study for us to do. We will get on that and see how many fields do you really need ;)

  12. Doug C. says:

    Ooops, my bad, you’re not Brian (lol). Sorry.

  13. Doug C. says:

    Great stuff, Brian. I’d love to create my own unique contact page, but I’m not too familiar with the process here on WP. Currently I’m using Contact Form 7, which is (in my opinion) the best contact form plugin available. It’s so easy to use my mom could do it.

    • Editorial Staff says:

      Yes Doug, all plugins listed above are very very easy to configure and setup. You will get familiar with WordPress with time :)

  14. Michael Aulia says:

    Wow, those pages look so sexy! My contact page is just a plain page using the “Contact Form 7″ you mentioned on the post.

    Wish I know how to make it sexier :D

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.