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.

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.

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.

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.

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

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.

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.

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:

• cForms II
• Contact Form 7
• Enhanced WP Contact Form

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.

Related posts:

1. Top Notch WordPress Footer Designs (Best Practices & Tips)
2. Best of Best WordPress 404 Error Page Designs
3. Best of Best WordPress Custom Login Page Designs

This tutorial will only disable active HTML tags. So someone can still post something like:

<a><em><strong>

And it will show up, but the tags will not be functional. So if someone uses the strong tag, it won’t bold the text. Besides not many SPAM bots have time to do this because this way takes up a lot of time and it is not beneficial for them.

All you have to do is simply open your functions.php and add the following code:

// This will occur when the comment is posted
function plc_comment_post( $incoming_comment ) {

// convert everything in a comment to display literally
$incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']);

// the one exception is single quotes, which cannot be #039; because WordPress marks it as spam
$incoming_comment['comment_content'] = str_replace( "'", ''', $incoming_comment['comment_content'] );

return( $incoming_comment );
}

// This will occur before a comment is displayed
function plc_comment_display( $comment_to_display ) {

// Put the single quotes back in
$comment_to_display = str_replace( ''', "'", $comment_to_display );

return $comment_to_display;

Source – The original author also offers a plugin that you can download from his site.

The reason why this way is better is because it does not require you to change the core files. If you want to edit your core files then you may go to wp-includes/kses.php and edit the codes there. (This is not Recommended, but it is here for the sake of knowledge. (WP Codex for more details)

Related posts:

1. How to Disable RSS Feeds in WordPress
2. How To Rearrange Comments in WordPress – Display the Most Recent One on Top
3. How to Disable Post Revisions in WordPress and Reduce Database Size

What is a Professional email?

A professional email is the one that has your business name in it. For example support@wpbeginner.com is a professional email rather having xxx@gmail.com. But when you have a professional email, it is with your webhost. It is true that you can use Outlook or other desktop software to manage those emails, but when you are remote those options are not so viable. That is when Gmail comes in handy. You can simply receive and reply to all of your professional emails from your gmail account and work with a interface that is much more friendly than some of the cPanel interfaces like Horde and Squirrel Mail.

Setting up a Professional Email in cPanel

Because all of our partner web hosts use cPanel, we will be showing a way on how to setup a professional email using the cPanel.

First, login to your cPanel and then click on Email Accounts:

Once you click on this screen, you will see a page with a form to create a new email account.

Once you have setup your email account. You can login to it using the following url: http://yoursite.com:2095/ (where username will be your email address and your password will be the one that you selected). So in our case the username will be: yournamehere@wpbeginner.com

Then you will see a screen like the one shown below. Click on Forwarding Options:

You will see a button that says Add Forwarder. Enter the gmail email where it will be forwarded to and click on add forwarder. So in our case, the gmail email would be yournamehere@gmail.com.

Basically this will forward all emails sent to your professional email to your gmail email. But you are still not done. Because in order for you to reply to that email from your professional email, you would have to login to your professional email. Well that is when this feature in Gmail comes in handy.

Enabling the Gmail Feature

The Gmail feature will allow you to reply to your professional emails from your professional email address while still using Gmail. First login to your gmail account. Then in the top right hand corner, click Settings. You should now see a page like this:

Make sure you click on the tab called Accounts and Imports. There you will see an option that says “Send mail as”. You want to make sure you select the right option for this choice, “When receiving a message”.

You want to make sure that it is selected to “Reply from the same address the message was sent to”. Also make sure that you have that address added. To do so click on the button that says Send mail from another address. Once you click on that, it will pop-up a new screen where you will enter your details. Gmail will send you a verification and then you are all setup.

This feature is excellent for personal blogs. Users who do not want to share their personal email, but still want to manage the emails easily using Gmail.

Related posts:

1. How To Make a WordPress Database Backup Manually
2. How to Remove Visual Editor Mode in WordPress
3. Akismet 101 Guide for All WordPress Users

Create a new file called twitter.php file located in your themes folder. Remember to make sure that you change WPBeginner to your username.

<?php
$tw = get_option("twitterfollowerscount");
if ($tw['lastcheck'] < ( mktime() – 3600 ) )
{
$xml=file_get_contents('http://twitter.com/users/show.xml?screen_name=wpbeginner');
if (preg_match('/followers_count>(.*)</',$xml,$match)!=0) {
$tw['count'] = $match[1];
}
$tw['lastcheck'] = mktime();
update_option("twitterfollowerscount",$tw);
}
echo $tw['count'];
?>

Then simply paste this code any where you want in your theme files.

<?php include("twitter.php"); ?>

Now you can display the number of twitter followers on your WordPress site as text.

Source: WPRecipes

Related posts:

1. How to Add a Digg Button in your WordPress using Custom Fields

Simply paste the following code in any WordPress file that you choose. Preferrably in a custom page that you create.

<?php include_once(ABSPATH.WPINC.'/feed.php');
$rss = fetch_feed('http://feeds.feedburner.com/wpbeginner');
$maxitems = $rss->get_item_quantity(5);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'
title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
<?php echo $item->get_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>

Make sure you change the feeds url and the quantity and any other setting that you like.

Source: WordPress Codex

Related posts:

1. How to Disable RSS Feeds in WordPress
2. Control Your RSS Feeds Footer in WordPress
3. 9 Extremely Useful RSS Tricks and Snippets for WordPress

Open your functions.php located within your themes folder and add the following code:

function fb_disable_feed() {
wp_die( __('No feed available,please visit our <a href="'. get_bloginfo('url') .'">homepage</a>!') );
}

add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

Once you add this code, anytime someone tries to reach your feeds, they will see this message: “No feed available, please visit our homepage.” You can change the message to fit your needs.

Source: Frank from WPEngineer

Related posts:

1. 9 Extremely Useful RSS Tricks and Snippets for WordPress
2. How to Disable HTML in WordPress Comments
3. How to Setup Auto Discovery for Your WordPress RSS Feeds

Example of Post/Comment Date and Time

Today
Yesterday
10th January 2007 (2 days ago)
25th January 2007 (2 weeks ago)

21:10 (2 seconds ago)
21:15 (5 minutes ago)
22:15 (2 hours ago)

Installation

Find a similar code in your single.php, index.php, comments.php and page.php

<?php the_date(); ?>

Replace it with:

<?php relative_post_the_date(); ?>

Note: You do not have to update all those files, only update the ones that you like, but those are some that might be needed.

Download WP Relative Date Plugin

Related posts:

1. How to Display Most Commented Posts in Your WordPress Sidebar
2. How to Display Breadcrumb Navigation Links in WordPress
3. Recommended Plugins for WordPress

Because most free themes do not have a custom author.php file, WordPress automatically callback to archive.php or index.php when someone views the author profile page. The problem with that is that it will only list all the posts written by the author, and it provides no personal information about the author.

It is recommended that you copy your archive.php and save it as author.php and then add the codes from the sample below to customize your page matching the theme settings:

<?php get_header(); ?>

<div id="content" class="narrowcolumn">

<!– This sets the $curauth variable –>

<?php
if(isset($_GET['author_name'])) :
$curauth = get_userdatabylogin($author_name);
else :
$curauth = get_userdata(intval($author));
endif;
?>

<h2>About: <?php echo $curauth->nickname; ?></h2>
<dl>
<dt>Website</dt>
<dd><a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a></dd>
<dt>Profile</dt>
<dd><?php echo $curauth->user_description; ?></dd>
</dl>

<h2>Posts by <?php echo $curauth->nickname; ?>:</h2>

<ul>
<!– The Loop –>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>">
<?php the_title(); ?></a>,
<?php the_time('d M Y'); ?> in <?php the_category('&');?>
</li>

<?php endwhile; else: ?>
<p><?php _e('No posts by this author.'); ?></p>

<?php endif; ?>

<!– End Loop –>

</ul>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

This page above will display: Author’s nickname, their website, background information (whatever you put in the description field), and a list of posts written by this specific author. All of the background detail and information will be handled from the Profile page in the admin panel. There are other plugins that will let you add pictures and other extra features in multi-author blogs.

Now that you have created the custom author profile page, you want to make sure that your single.php, and in some cases your index.php both are pointing to the author’s profile link when the name is mentioned. Often when themes do not provide a custom author page, they tend to link to author’s website URL in the “written by” section of each post. So you should search for words like Written by or something along the same line and replace the codes with this snippet, and if you do not have that code, then you want to add the code below anyways in order to provide your users with a link to author’s profile page.

<p>Written by:
<?php the_author_posts_link(); ?></p>

Another great way of letting your users know about author profiles page is simply by listing all authors from your blog on one page, or in the sidebar. We have written an article about this in the past that provides both a raw code solution and a plugin solution, so check out our article on how to list all authors from your blog in WordPress.

To add more parameters, you should refer to the Official WordPress Codex Author Templates page.

No related posts.

In your blog URL add the following:

http://yourblog.com/wp-admin/options.php

Now you should be able to see a master panel with all settings. There is not a whole lot use for this panel, but the fact that it is there and you know about it is what matters. It might come handy some days who knows.

No related posts.

Free WordPress Portfolio Themes

To download the theme click on the theme name, and to preview the theme’s demo click on the image.

1. Creative by Nature

2. Work-a-holic

3. Vivee

4. Irresistable

5. WP Coda

6. Folio Elements

7. FotoFolio

8. WPESP Portfolio Theme

9. Sharpfolio

10. Viewport

11. The Unstandard

12. Gallery Theme

13. Fullscreen

14. Infinity

15. Linquist

Do you know of any other great FREE portfolio themes for WordPress? Then share it with us in the comments, and we will add it in this post to make it a better resource for others.

No related posts.