Tag: contact form 7 | WordPress Villain

Basic Contact Form 7 CSS styling is horrible. Here a basic setup in CSS I have been working on and will update from time to time. A gist at Github I set up based on one by codehandling. Make sure you do not use the labels and that you check the configuration.

Basic Form Configuration

In Contact Form 7 remove the labels and add placeholders. This will make the form look way more modern and appealing. Here is the basic setup:

[text* your-name placeholder "name"] 

[email* your-email placeholder "email"] 

[textarea your-message class:comment-form] 

[submit "Send"]

As you can see the basic labels have been removed and placeholders have been added for the name and email fields.

Complete Contact Form 7 CSS Boilerplate

So here the actual Contact Form 7 CSS Boilerplate I was talking about. Take it and tweak it to your liking. This setup is responsive and shows a decent form without labels and with placeholders. I have made the fields cover the full width of the form, not just half. I also gave the fields nice rounded corners and a decent submit button.Text in the fields is styled too.

Here is the complete Contact Form 7 CSS Boilerplate:

/***********basic************/

/*Form width*/
.wpcf7 {
    text-align: left;
    width: 90%;
}

/*Input Field widths*/
.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
}

.wpcf7-text {

	height: 50px;
    padding-left: 10px;

}
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}

/*Label Font*/
.wpcf7-form p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
}

/*Submit button Font*/
.wpcf7-submit {
    width: 85%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
    padding: 20px;
}

/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #3b86b0 !important;
}

/*Response messages - Error & Success*/
.wpcf7-response-output {
    margin-bottom: 30px !important;
}

/***********borders************/

/*Form border*/
.wpcf7 {
    padding: 20px 25px !important;
    padding-bottom: 0px !important;
}

/*Input Field borders*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #8F8F8F !important;
}

/*Submit button Background*/
.wpcf7-submit {
    background: #7E7E7E !important;
    color: #fff !important;
}

/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #5F5F5F !important;
}

/***********colors************/

/*Submit button background & border*/
.wpcf7-submit {
    background-color: #1d2731 !important;
    border: 2px solid #5A5050 !important;
    color: #5A5050 !important;
    font-weight: bold !important;
}

/*Submit button Hover styles*/
.wpcf7-submit:hover {
    background-color: rgba(29, 39, 49, 0.66) !important;    
    border-color: #4CAF50 !important;
    color: #4CAF50 !important;
}

/*Label Text color*/
.wpcf7-form p {
    color: #FFF;
}

.wpcf7-form label{
	/*display: none;*/
}

/*Input Field Text color*/
.wpcf7-text, .wpcf7-textarea {
	color: #777;
}

/****background-images********/

/*Form background*/
.wpcf7 {
    /*background-image: url(http://i.imgur.com/iAFPf0G.jpg);*/
    background-color: rgba(255, 255, 255, 0.2);
    background-position: center;
    background-size: cover;
}

/*Label Text color*/
.wpcf7-form p {
    /*display: none;*/
    /*color: #000000;*/
}

/*Submit button background & border*/
.wpcf7-submit {
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

/*Submit button Hover styles*/
.wpcf7-submit:hover {
    border-color: transparent !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #FFFFFF !important;
}

/*Input Field border*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #5A3D3D !important;
}

NB Here the Gist File at Github Gists.

End Result

The end result I will show you now with a screenshot. The theme itself is not quite done yet. Once it is up for sale I will update this post.

Fork it, adjust it to your liking. If you enjoyed it do leave a comment or link to the blog post. Appreciate it.

contact form 7

Every time I use Contact Form 7 I fall for it. I commit the same error over and over again. I enter the wrong data for the from field on the mail tab. And every time it takes me precious time figuring out this silly error. And it is isn’t correctly told in the documentation either I am afraid. So let’s write it down here so we all remember how to properly configure the Contact Form 7 Mail From Field.

Form Data

Let’s say you create a standard form like so:

<label> Your Name (required)
 [text* your-name size:30 maxlength:60]</label>

<label> Your Email (required)
 [email* your-email]</label>

<label> Your Phone Number
[tel your-tel "012345678"]</label>

<label> Subject
 [text your-subject]</label>

<label>Your Message
 [textarea your-message] </label>

[submit "Send"]

Mail Tab Data

You also add all this data to the mail tab:

to:

jasper@ianua.dev

NB localhost domain

from:

[your-name][your-email]

subject:

iauna "[your-subject]"

additional headers:

Reply-To: [your-email]

message body:

From: [your-name] <[your-email]>
Subject: [your-subject]

Message Body:
[your-message]

--
This e-mail was sent from a contact form on Iauna (//localhost:3000/ianua/site/web)

You check all and see all is well. Well, you think..

Configuration Error Found

Then you save the form and see:

What? So you go to Contact Form 7 Documentation to resolve configuration errors and see nothing that is wrong. Zilch! So you check all again. You decide to go to the mail tab and you see:

Solution

But…but the your-email tag should load the email address of the client right? It says so here in the documentation that you can. Nope. It is the one connected to the domain. It should be the email address you use to send email to clients. As DavidFB said here:

On the Form, [your-email] is the form fillers address.
On the Mail tab, the settings are for Routing the mail. To is who you want the form data to go to and From is the address SENDing the form data. In this case, it’s not actually the person sending, it’s the web site. So From should match the server domain so it’s not seen by mail servers as spoofing or relaying.

So what you need to add is:

Company Name<name@domain.tld>

After that all will be well. Emails will be sent properly and clients will be happy. Let’s hope we can all avoid this mistake the next time!

Bonus

Do not forget to add the additional headers:

Reply-To: [your-email]

This will make it loads easier to reply to clients when they email you. Saves you time copying their address from the body of the email!

Let us Set things up for you

[product id=”6974″]

contact form 7 email