Styling contact form 7

Contact form 7 is a wonderful plugin for wordpress and it doesn’t even need an introduction in the wordpress community. This plugin will allow you to create all kind of forms from simple contact form to a fully organized survey.

Many contact form 7 users always have the same question on how to customize the look of their form. So here is a guide on styling it.

Here is the form i am going to style.
All the form elements are wrapped with p tag. (the syntax highlighter somehow doesn’t show that 🙁 )

<h2>Here are some text to go with the form</h2>
<p>Your Name (required)[text* your-name] </p>
<p>Your Email (required)[email* your-email] </p>
<p>Subject [text your-subject] </p>
<p>Your Message[textarea your-message]</p>
<p>[submit class:buttons_form "Send"]</p>

Here is the CSS to add in your style-sheet.

    background: #000;
    width : 375;
    height: 460px;
    overflow: hidden;
    margin: 20px;
    border: 2px solid #fff;
.wpcf7-form h2{
    font-size : 20px;
    text-align: center;
.wpcf7-form input, .wpcf7-form textarea {
    border-color: #808080 #C0C0C0 #C0C0C0 #D4D4D4;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
    line-height: 16px;
    font-size: 14px;
    width: 350px;
    float: none;
    margin: 0;
.wpcf7-form textarea {
    line-height: 16px;
    font-size: 14px;
    height: 100px;
.wpcf7-form p{
    font-size : 14px;
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 290px;
    padding: 0 0 10px;
    color: #fff;

The button uses the following css class.

.buttons_form {
     padding: 0px;
     height: 30px;
     width: 150px !important;
     border: none !important;
     cursor: pointer;
     color: #fff;
     -webkit-border-radius: .5em;
     -moz-border-radius: .5em;
     border-radius: .5em;
     color: #faddde;
     border: solid 1px #980c10;
     background: #d81b21;
     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');

How it will look after the styling

If you have any questions regarding this let me know through the comments.


Published on December 11th, 2010


Embedly is a wonderful wordpress plugin (there is also a jQuery version available) to embed almost everything (Ok. not everything but the ones you wish to embed.) easily into your wordpress posts and pages. With the help of this plugin you just have to paste a URL and it will display the content in your post properly. For example, if you paste a URL it will display the video.

Currently Embedly supports 160 services. The implementation of the plugin is very simple. All you have to do is upload the plugin to wp-content/plugins folder and activate it.

There is an option panel where you can select or deselect the service.


Published on November 24th, 2010

Calender Archives

Calender Archives is a wonderful plugin to display your archive. It is a very straight forward plugin to display all your posts in a big yearly calender with thumbnail images. It also comes with two styles.

The implementation is also very easy as any other plugin.

  1. Upload the plugin to the wp-content/plugins folder and activate it
  2. Add [calendar-archive] short code in one of your page, where you want to display the calender.

There is an options page to modify the basic settings of the plugin, which allows you to

  1. Choose the style
  2. Set the size of the calender boxes.
  3. Change the color of the day box and Weekday.

If you want more customization in the style, you can also edit calendar-layout-2.css.php or calendar-layout-1.css.php and then set it as the style in the plugin settings.


Published on November 24th, 2010