Building a Contact Page In WordPress With Contact Form 7

For most websites, getting users to the contact page is a primary mission.

Building a Contact page in WordPress with the Contact Form 7 plugin makes that process easy.

Contact Form 7 is the most popular contact form plugin on the WordPress plugin repository, with over 5 million active installations.

Today I will show you how I set up and customize my contact forms with this plugin to make them more effective.

Building a Contact Page

After you install and activate Contact Form 7, you will see it has its own module on the backend navigation. When you hover on the Contact link, you have two options: Contact Forms and Add New. The Contact Forms link takes you to your saved forms. Let’s set up a New Contact Form.

Contact Form 7 UI

The area at the top is the title of your contact form. You can change this to something easy to remember, so you can differentiate it from your other forms later.

Contact Form 7 Title

There are some basic inputs and labels set up already: Name, Email, Subject, Message, and then a Send button. The parts of this form in square brackets, such as [text* your-name], are shortcodes. The important thing to know is they will be rendered as HTML when added to your Contact page. The first part of each shortcode is the name of the input. These will be used to collect information and build the email. Any shortcodes with an asterisk are required fields, and the contact form will not be submitted if these are not filled out.

Contact Form 7

To the right of the form builder is a menu for adding additional input fields. Most of these are self-explanatory.

Contact Form 7 Generate Tag

For now we will add a drop down with three choices, each one on a separate line. Check the appropriate box if you want a blank line at the top of the drop-down, or it you want it to be a required field. Copy and paste the shortcode into the form, add the appropriate label, and save the form.

Contact Form 7 DropDown

Below the form builder, are two columns for building the emails. The one on the left is what the user is sending to you, the one on the right is what you will receive. Notice that the shortcode names are used to build these email headers and messages.

Contact Form 7 Mail Headers

On the left, change the email address to the one you want to receive the contact form at. On the right, simply add any shortcodes that you added to your contact form. In this case, I am going to add our drop down value, [menu-415]. You must add anything information you want to receive from the contact form here, or it will not be added to the email.

Copy the contact form shortcode into your page and Save Draft.

Building a Contact Page With Contact Form 7

Adding Some Polish to Our Contact Form

Before I publish this contact form, I want to make some small changes. I’m going to replace the p tags with label tags, to make this form more semantic for search and accessible for screen readers. Adding id:id-value-here to each input shortcode will add an id attribute in the rendered HTML. Make sure the id of the input and the for attribute of the label match.

Contact Form 7 Code Changes


<label for="name">Your Name <span class="req">*</span></label><br />
  [text* id:name your-name]

<label for="email">Your Email <span class="req">*</span></label><br />
  [email* id:email your-email]

<label for="subject">Subject</label><br />
  [text id:subject your-subject]

<label for="choice"></label><br />
  [select id:choice menu-415 "Yes" "No" "Maybe"]

<label for="message">Message</label><br />
  [textarea id:message your-message]

<p>[submit "Send"]</p>

I’m also going to replace the required statements with an asterisk. You can tell users the field is required in whatever way you feel is most appropriate.

This is how our contact form is looking so far. Nothing fancy, completely functional. Let’s add some CSS to make the form look a little better.

Building a Contact Page With Contact Form 7


/* To make our Asterisks stand out */
.req {
  color: red;
}
/* Styling the Submit button */
.wpcf7-submit {
  background-color: green;
  border-radius: 9px;
  color: #fdfdfd;
  font-size: 1.125em;
  padding: .5em 1.25em;
}
/* Making all the inputs look the same */
form input, textarea, select {
background-color: #e7dff3;
-moz-box-shadow: inset 0 1px 5px #f2d4a2;
-webkit-box-shadow: inset 0 1px 5px #f2d4a2;
border: 2px inset;
box-shadow: inset 0 1px 5px #f2d4a2;
color: #333;
display: block;
max-width: 90%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/* Highlight input currently in use */
form input:focus, textarea:focus, textarea#comment:focus, select:focus, select:active {
background-color: #fcfcfa;
box-shadow: 0 0 5px #db5f15;
outline: none;
}

Building a Contact Page With Contact Form 7

Customizing Error and Success Messages

The bottom part of the contact form builder allows you to customize the error, validation, and success messages as well. I like to tailor each of these to reflect the tone and voice of the specific website.

Contact Form 7 Messages

You can also style the backgrounds of these response messages with CSS to fit the color tone of the particular site. I add these to my main style sheet, so they won’t be overwritten when the Contact Form 7 plugin is updated.

Contact Form 7 Messages


/* Styling the Warning message */
.wpcf7 .wpcf7-form div.wpcf7-validation-errors {
background: rgba(224, 203, 43, .35);
width: 77%;
}
/* The warning and success messages */
.wpcf7 div.wpcf7-response-output {
background: rgba(35, 125, 15, .25);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.3125em;
line-height: 1.3em;
margin: 2em 0.5em 2em 0;
max-width: 20em;
padding: 1em 0.5em;
}
/* The error message */
span.wpcf7-not-valid-tip {
background: rgba(240, 114, 114, .35);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: #e01a1a;
font-size: .775em;
left: 0;
padding: .125em;
position: relative;
top: 120%;
width: 40%;
}

As you can see, you can build a contact page for your website, and with some extra effort, you can customize it to fit your site. I hope this gives you some ideas for places to start.

Fix Redirect Loop on WordPress Install

If you need to fix a redirect loop on a fresh install of WordPress, or if you have not_found URLs when trying to reach the admin panel, these steps might solve your problem.

In my scenario, I was manually doing a fresh install of WordPress on a new site.

I was having problems getting the domain name to sync up with the install.

The message I was getting was:

The webpage at http://mydomain.com/wp-admin/install.php has resulted in too many redirects. Clearing your cookies for this site or allowing third-party cookies may fix the problem. If not, it is possibly a server configuration issue and not a problem with your computer.

I was moving a site from a staging server to the live site, for an existing site that I was redesigning. Since I had only recently got the domain name transferred from the original owner, I thought perhaps it was some sort of domain propagation issue. I had already set the TTL (Time To Live) on the DNS records to a low number, so that wasn’t the issue. It turns out that there was no .htaccess file in the root.

After finishing the install, I had another problem. I could see the sample page, but trying to log in to wp-login.php or wp-admin sent me to http://mydomain.com/wp-admin/not_found. Curious.

Adding the following code to the .htaccess fixed all the remaining for issues for me.


# BEGIN WordPress

RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

# END WordPress

Let me know if this solves these particular issues for you!

Learning When To Say No

Throughout our lives, we have been taught that saying yes is how we will find success.

Saying yes to our responsibilities is something we should do, but saying yes to everything is a recipe for disaster.

Learning to prioritize where our time and energy goes is the first step in deciding what tasks and projects we can take on, and learning when to say no.

Over-commitment is a problem for many of us. We do not want to close the door on opportunities, and we want people to be happy with us, so saying no is difficult. When we over burden ourselves with busy work, we leave ourselves no time to do meaningful work. Learning to respect our limits is not shirking responsibility — it is having self-respect.

We look to successful people and wonder how they do it. The truth is we all have the same 24 hours in a day, we must choose how to spend it wisely. Time is your greatest resource.

I spend a couple of hours each day growing my business. I must say no to something else in order to have the time to do this. Things that get in the way of that, like aimlessly surfing the internet or watching TV get kicked to the curb.

I also have to say no to things that seem helpful, but are unsustainable, like working into the wee hours on a daily basis. It’s important to have room in your routine for healthy habits like proper diet and sleep, so that you can do the best work possible. Having enough time and energy to continue my professional development also helps me deliver the best work possible to my clients.

For those people who work on a team or in an office, being able to say no is also important. Being a people-pleaser is a slippery slope. In an office setting, if you are not familiar with a routine, or you are already overloaded and you say yes to a colleague request, that is akin to dishonesty. It isn’t fair to you or your teammate. It is better just to say you are not familiar with that procedure or have several other deadlines that cannot be pushed back.

There are several reason people refuse to say no. They may be scared they will lose their job, or people will be angry with them. Teammates in a good workplace will understand if you explain the reasons you cannot fulfill their request. Setting reasonable boundaries for yourself is also a survival skill.

Conclusion

Your health and sanity are important, protect them by not overloading yourself. Saying no isn’t about being unfair, it’s about realizing what you can and cannot do and managing expectations.

Guest Blogging for SEO is Dead

Yesterday’s news that Google is taking a dim view of guest blogging for SEO is a bombshell going off in the search marketing world. No one can say this came without warning.

No less than four videos posted by Google’s Matt Cutts in the past year hinted that guest blogging for backlinks was a bad idea.

Yesterday’s post by Cutts was the end of beating around the bush.

In an act of clairvoyance, Moz.com posted a Whiteboard Friday video three days ago that said guest blogging is a slippery slope of doom.

What Google seems to have grown tired of is bloggers trying to outsource production of stories and submitting guest posts at scale to sites for backlinks. Quality content, written by authority contributors, seems to be OK, but guest posts should probably carry rel="nofollow" links just to be safe.

SEOs destroyed forums, blog comments, links, genuine sharing, web anonymity and eventually SEO itself. – Matt Soczywko on the Makeshift blog

Joost de Valk had a more deeply nuanced view of the issue on his blog yesterday, stating that branding is just as important as link building, and that it’s time for SEOs to become real marketers, not just tacticians. Joost also stated that the people who write on his site either work with him or are closely affiliated, because he respects his brand. I highly recommend reading that article for an idea of what building a brand audience is going to be like from now on.

Where Does Guest Blogging Go From Here?

I see not only quality of content being important from now on, but who is writing it, and who is endorsing it. Shortcuts and tactics aren’t going to cut it anymore. To be ranked like an expert, you’re going to have to produce quality content like an expert. Reaching out to authority creators in your category is going to become pretty damn important.

Guest blogging isn’t going to be done for link juice anymore—too many links from too many low quality sites have killed that tactic. I see guest blogging being done for exposure and indirect traffic back to an author’s site, but not page rank.

Sites are going to be extremely cautious about who they let on their stage and hand the microphone to. You’re going to have to have something to say that really helps people, and that enhances the sites you’re featured on. Sites and brands are going to have to be more cohesive than ever to thrive.

Value Pricing vs Cost Based Pricing

One of the biggest decisions a business can make is whether to value pricing or cost based pricing for their product or service.

Cost based pricing, also known as commodity pricing, is based on what the competitive market will bear.

Value based pricing centers around the perceived or actual value added to the customer.

Let’s look at some of the pros and cons of each.

Cost Based Pricing

Cost based pricing identifies the cost of selling a product, and leaves enough margin to make a profit. There is a base price, determined by fixed costs to the business, that the product cannot go under to be profitable, called the floor price. The ceiling price is the most that the market will bear, and the price of the product is somewhere in between the two. Commodity pricing is good for products or services that can be bought and sold in bulk. Hourly services would also be considered cost based pricing in most cases.

The major competitive advantage in cost based pricing is price. If the business can make the product for less than their competitors, they can price it lower, and do more in bulk sales. A business can also set a higher margin on their product than their competitors, but risk customers finding a similar quality product at a better price.

Cost based pricing works well for larger companies, as they can better withstand the race to the bottom. Smaller companies have to be competitive, but they cannot beat larger companies on price long-term without sacrificing quality.

The disadvantage in cost based pricing for services is that it punishes efficiency. If a service technician has an hourly rate, the faster they are able to solve a problem, the less they earn.

Value Based Pricing

Value based pricing focuses on how much value the product or service will add to the customer. This requires deeper analysis of the customer, what their needs are, and how they will benefit from the service.

While cost based pricing emphasizes features, value based pricing emphasizes benefits. Value pricing says “ here’s how these tools will help you”; cost based pricing says “here’s a bunch of tools—maybe they can help you”.

Luxury items and brands are also value priced. Products like Coach purses, Rolls Royce automobiles, Dom Pérignon champagne, Kobe beef, or Rolex watches are purchased in part because they add status, distinction, and a feeling of pride to their customers.

Value pricing is not simply a matter of artificially marking up a product. It requires an understanding of what those customers want and need, and the ability to provide that for them.

The disadvantage to value based pricing is that it alienates the customer base motivated by affordability.

Not all product companies have to use cost based pricing, and not all service companies use value based pricing. A good example of a product company that uses value based pricing is Apple, who sell their products based on increased efficiency, ease of use and quality of life.

Conclusion

For me, in the battle of Value Pricing vs Cost Based Pricing, value pricing wins hands down. Not every business model or industry is the same. You must decide for yourself which pricing system is the best for you long-term.

What Makes Your Business Unique?

Ask a hundred business owners in a category what their points of distinction are.

You’ll hear adjectives like high quality, affordable, fast, reliable, convenient or experienced.

These are all good, but how many of their competitors are claiming to deliver the same things?

Your business and marketing plans should consider what makes your business unique.

Defining your ideal customer and your unique value proposition are parallel tasks. Many businesses try to appeal to the widest possible audience, for fear of losing sales.

A business that is well-positioned does one or two things excellent, and is known as the best in a specific part of their industry.

An unremarkable business tries to do everything under the sun, and does not excel in any of their offerings.


It is counter-intuitive to narrow your focus on your main offering, but it does two things. First, positioning yourself as the expert for specific offerings ensures that you will be top of mind for people who are looking for that specific service. Second, it enables you to serve your ideal customers better, as your time and efforts are now focused on them. The broader the offering, the harder it is to be excellent at all of them.

An Example of Unique Positioning

Here in Sacramento, there are dozens upon dozens of doughnut shops. They are indistinguishable from one another, except for one. Doughbot Donuts offers unique recipe and hand crafted donuts that would be extremely difficult for other shops to duplicate. Their shop has simple decorations, retro science fiction adornments that reinforce their branding. They charge a premium price for their unique products. Customers travel from all over the city to buy their products, and most days they sell out by 11am. This is an example of a business with a unique position and offering, that stands out from their competition.

How Do I Make This Work For Me?

Think about what sets you apart. Refine what it is you do that no one else or very few other people can do. How does that relate to the customers that you want to attract? If you had just these ideal customers, would you be able to sustain your business?

Play to your strengths. Downplay or marginalize your weaknesses. Ask yourself if that the work that you want to be doing in a few years time. If you can answer affirmative to all of these, you have the beginnings of a unique value proposition.

Conclusion

Don’t be a commodity that customers can find anywhere. Position yourself as something unique, and show people you are unique, don’t just tell them. Deliver value to your target customers, and you won’t be one of the choices, you’ll be the only choice.

Content Marketing is the New Advertising

Until the late 1990s, people had only a few choices for getting information and entertainment: TV, radio, print, movies.

In order to get the content they desired, people had to suffer through ads at the beginning, end or throughout their entertainment.

The internet was built on the same model — using interruption marketing and advertisements to pay for bandwidth — like newspapers, radio and television did before.

Then some interesting things happened.

TiVo, DVRs, satellite radio, pop-up and ad blockers came on the scene, allowing people to skip advertisements. People in the street were too busy looking down at their cell phones to notice billboards anymore. People on the internet developed banner blindness and didn’t click advertisements like they did in the 1990s and 2000s.

New technology means new choices and options for consumers. Businesses still have to get their message out, but they have to do it in a way that is more clever, more entertaining, and more helpful to their audience. Content marketing is the new advertising, and winning customer attention is more critical and more accessible to everyone than ever before.

What Content Marketing Is and Isn’t

While advertising is about selling the features and benefits of a product quickly and directly, content marketing is more about helping the consumer first, and establishing the business as one that can be trusted. Content marketing and advertising both rely on making potential customers aware of the brand, and getting them into a funnel that eventually produces sales.

Advertising is about renting space on a page, screen, or airwaves for a set time and price. But content marketing centers around keeping possession of the material being produced. Building “evergreen” content that is always relevant and useful is a cornerstone of this strategy.

Content marketing can done through a number of channels. Blog posts, articles, microsites, podcasts, webinars, videos, virtual hangouts, infographics, case studies, e-books, white papers, and in-person events are all examples of content being used to market a brand, product or service. The end goal is to persuade people to do business with you by increasing brand awareness, showing expertise, and most importantly, giving value to the customer at each stage.

Social media is a part of content marketing as well, but in many cases, their terms of service dictate they own the content you publish on their platform.

Social should never be the end game. I like social media as another avenue to build on the brand story. But social content should lead back to the main website, where conversions can occur.

Content strategy is a term you might hear, and it is the most important part of content marketing. Content strategy involves the inventory, assessment, categorizing, re-purposing, creation, and publishing of existing and new content.

TL; DR

Traditional advertising hasn’t died and will probably keep evolving to survive, but it’s not as effective as it was in the 20th Century. Content marketing has risen to become an effective means of brand awareness and targeting customers in the Information Age. Creating content that helps customers, solves some of their minor problems, and establishes you as someone they can trust gets them into your conversion funnel. Each piece of content out there on the web is another way for customers to find, connect with, and trust in your brand. And best of all, content lives forever, while advertising does not.

Design And Creativity Are Not The Same

Many people talk about designers or anyone else in the web industry as creatives. This enforces a destructive fallacy. Design and creativity are not synonymous, even though that’s how they are perceived.

Allow me to explain.

When people think of creatives, they think of the Mad Men era team sitting around brainstorming—waiting for inspiration to strike them from out of the blue. “Creative” also carries the connotation of “artist”, someone who ruminates on a muse, creating a work that inspires powerful feelings in the observer.

Art is meant to elicit an emotional response, but design is created to solve a particular problem. Design works within constraints. In fact, the constraints on a project are what define design. Art has no particular constraints, and is subjective in nature, open to interpretation by the observer. Design is subjective in nature, and must solve a problem.

While design can be art, art cannot be design.

Calling Designers “Creatives” Is Dangerous

Referring to your design team as Creatives supports the idea that good design equals pulling ideas out of the ether. Design is much closer to science than it is to art, and is as much more about functionality than it is about decoration.

Remember…

While aesthetics are involved in the design process, creativity is merely a characteristic that many designers have. Problem-solving is the most consistent characteristic of a professional designer.