WordPress Contact form 7 is one of the most essential plugin for a blog or a website. I have seen almost all the bloggers are using this. It allows users to contact the website owner. And it gives more recognition to your website or blog improving your reputation.
Nowadays people are using different contact form WordPress plugins on their websites. As I said the most commonly used WordPress plugins is “Contact form 7 plugin”. The plugin is very easy to use and has a wide range of functionality. Therefore it outranked the other plugins with same functions.
Installation of WordPress plugin is not a difficult process. Therefore webmasters tend to use a plugin rather than adding a contact form manually by coding.
To install start with WordPress “Dashboard”
Now download WordPress contact form 7 plugin from contact form 7 official page.
Then sign in with your WordPress user name and password. Now you are on your “Dashboard”. Select “Plugins” and then “Add new” on the left side bar of the dashboard.
Upload the downloaded file and install it.
Now go to your plugin. You can do this by visiting your “Dashboard”. Then click on “Contact” link on right navigation plane. Check the screenshot below.
Contact forms you have will display on this page. On the above screenshot, I have 2 forms. Copy the shortcode in front of the form you want to display on your blog.
Create a new page and paste your WordPress contact form 7 short code
Now create a new page on your website/blog. Give it a tile “Contact us”. Paste the short code you copied on the last step. Then publish the page.
Your contact form is ready to use. Now I have completed the first part of this tutorial. Let us get into the second part.
Back to your Dashboard and change appearance of WordPress contact form 7 plugin
Now go back to your “Appearance” link on your dashboard and click “customize” on the drop-down menu.
On the next page scroll down and select the link “Additional CSS” on right side navigation plane.
Just copy the following code and paste it in your themes additional CSS area. Then click the button “Publish” at the top of the page.
div.wpcf7 {
background-color: #FED3D2;
border: 1px solid #FEA7A6;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#FEA7A6;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#A13230;
width:100%;
text-align:center;
text-transform:uppercase;
}Edit the hex color codes as your wish
You can play with the color hex codes (codes starts with # mark) and get different colors as your wish. You can use one of the best hex color code generator to get different colors which go with your website colors.
