Bug in WordPress 3.6 – Qmail based Hosts only

There is a bug in the WordPress 3.6 release that causes Contact-7 forms to fail to be emailed – but it only affects those hosts using Qmail based email systems. It appears that WordPress used a few month old version of class-phpmailer.php, one where a bug had been introduced for Qmail based email systems. The […]

Better Contact Form 7 Checkboxes & Radio Buttons

Checkboxes and radio buttons are commonly used on many types of forms, and you’ll most likely find yourself using them. Contact Form 7 even offers a few different types of modifications for your checkboxes and radio buttons. Even though checkboxes and radio buttons are common, they are frequently used incorrectly. Your forms will be easier […]

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. Before you begin But before we get started, there are a […]

Contact Form 7 form in columns

There are a number of common stying options that many Contact Form 7 (CF7) users like to add to their forms, like evenly spaced columns & and several fields on a single line. However adding these styles requires detailed HTML & CSS knowledge which is beyond the current skills of many WordPress users. CF7 Skins […]

Contact Form 7 fields side by side

One of the preferred styling options of Contact Form 7 users is to display commonly used form fields like “name” and “email” side by side on a single line. However many users find this task challenging due to their limited knowledge of HTML and CSS. CF7 Skins Ready, an add-on for our popular Contact Form […]

Styling Contact Form 7 Forms

Contact Form 7 (CF7) is one of the most popular plugins available for WordPress. It allows users to quickly create customised forms, anywhere on a WordPress website. While the forms are easy to create and implement, the fields within them are styled minimally – allowing them to blend in with most websites. The appearance of […]

CF7 Form Structure

Default CF7 Form We used Firebug to produce the following diagram which shows the overall structure of the default CF7 form we are using in this article. The diagram shows how each element of the form is created using standard HTML form elements and how those elements are arranged in relation to each other. The […]

Default CF7 CSS style

The Contact Form 7 plugin uses very minimal CSS styling to allow CF7 forms to blend in with most websites. Default CF7 CSS style: div.wpcf7 { margin: 0; padding: 0; }   div.wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; }   div.wpcf7-mail-sent-ok { border: 2px solid #398f14; }   div.wpcf7-mail-sent-ng { border: 2px […]

Styling a Specific Contact Form 7 Form

Each CF7 form has a unique id which can be targeted in your CSS changes. Use Firebug or Chrome Dev Tools to find this unique id in your CF7 form. Then target only this CF7 form using CSS heirachy as follows: You can also add id and class attributes to a CF7 form by adding […]