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 »
  • http://ne63.com raiderhost

    nice tutorial dude ..

    lets make me to try it

  • http://tongstromberg.com Lars Tong Strömberg

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

    • http://mikeseaby.co.uk Mike Seaby

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

  • http://tongstromberg.com Lars Tong Strömberg

    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?

  • http://www.w3wall.com neer

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

  • http://www.jauhari.net/ Jauhari

    Nice Collections ;)

  • http://www.yesutu.com Yesutu

    really wonderfull (:

  • http://digitalrenewal.com/ Trisha

    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.

    • http://easypublicspeaking.co.uk Keith Davis

      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.

      • http://digitalrenewal.com/ Trisha

        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.

        • http://easypublicspeaking.co.uk/ Keith Davis

          I’m with you on that one Trish.

  • http://easypublicspeaking.co.uk Keith Davis

    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?

    • http://www.wpbeginner.com Editorial Staff

      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.

      • http://easypublicspeaking.co.uk Keith Davis

        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.

  • http://labs.dariux.com Dario Gutierrez

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

  • http://dougdraws.com Doug C.

    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.

    • http://easypublicspeaking.co.uk Keith Davis

      Too true Doug… cformsII completely outfoxed me.

  • http://www.forgeseo.com/contact-us/ Matt M.

    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.

    • http://www.wpbeginner.com Editorial Staff

      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 ;)

  • http://dougdraws.com Doug C.

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

  • http://dougdraws.com Doug C.

    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.

    • http://www.wpbeginner.com Editorial Staff

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

  • http://www.cravingtech.com Michael Aulia

    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