Contact Form 7 Custom Button

Some users of Contact Form 7 prefer to use an image as their form button, instead of the default submit button. In this tutorial, we’ll walk you through how to accomplish this using Contact Form 7 and our popular Contact Form 7 Skins plugin.

But before we get started, there are a few things you need to know:

1. Have a basic understanding of HTML and CSS. Learn more.
2. Understand and know how to use developer tools such as Firefox Firebug or Chrome Developer Tools – Learn more.

By the end of this article you should be able to use a selected image as your submit button on a Contact Form 7 form.

Create Button Images

First of all, we need to create two button images, one will display as the button and the other will show up when hovered over with the mouse.

Creating the images might require some knowledge in using an image editing tool like Photoshop. However to make this article useful to most users, we shall use dabuttonfactory’s online tool to generate images for our buttons.

This tool is very simple and intuitive to use. In the Text field on the left, type the text you wish to display on your image. You can choose from several fonts available in dabuttonfactory.com, select the text color and background color that suits your theme.

Once you are done with your styling, select the image extension (.png .jpg) of your choice, click download and save the image on your local computer. In this article we’ll use the images below as our Contact Form 7 button.

     

Now you just need to upload those images to the WordPress Media Library and get the full URL of each file in your WordPress installation. In our case we have the following files:

• http://cf7skins.com/wp-content/uploads/button_main.png
• http://cf7skins.com/wp-content/uploads/button_hover.png

Create a CF7 Skins – Contact From 7 form

Now create a Contact Form 7 form and select the Contact TemplateTemplate CF7 Skins Templates are the structure of your form, providing the content and layout. They act as an easy to follow guide that can be adjusted to your particular needs. and Caspar StyleStyle When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. as follows.

Tip: You can use Firebug or Chrome Dev Tools to see how we’ve styled this form.

There is no need to make any changes to the default Contact From 7 submit button tag – we’ll make all the changes we need using CSS only.

Modify the form’s CSS Styling

First we need to use Firebug or Chrome Dev Tools to examine the classes added to your form by the CF7 Skins Caspar Style.

Launch Firebug by right clicking the Submit button and selecting Inspect element with Firebug.

Initial Code

If you do this correctly you should see that the following CSS code is styling the Submit button:

.wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="submit"] {
    padding: 5px 15px;
    color: #1a1a1a;
    border: 1px solid #c3c3c3;
    background: #ededed;
}

Tip: See Using Firebug to inspect the form for step by step instructions on using Firebug.

Additional Code

To get the Submit button using the selected images we need to add the following CSS code:

.wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="submit"] {
  background-image: url(http://yoursite.com/wp-content/uploads/button_main.png);
  border: none;
  border-radius: 5px;
  width: 102px;
  height: 48px;
  color: transparent;
}

.wpcf7 .wpcf7-form.cf7s-caspar input[type="submit"]:hover {
  background-image: url(http://yoursite.com/wp-content/uploads/button_hover.png);
} 

Tip: You only need to add CSS statements for those elements you wish to add or change.

Completed Form

When the code above is added using a custom CSS plugin or a Child Theme we get a form as shown below.

Tip: Use a custom CSS plugin or a Child Theme to add your CSS.

Have Questions or Need Help

If you are using the free version of CF7 Skins and have any questions, get in touch via the CF7 Skins community and also the Contact Form 7 Support forum.

If you are using the premium version, CF7 Skins Pro, then Premium Email Support is provided to deal with your questions and problems.