Articles

Export and Import Contact Form 7 form

Sometimes, you may need to duplicate a Contact Form 7 (CF7) form on your current website to another website. Manually copying the form can be time-consuming and prone to human errors. Contact Form 7 Skins now offers a better way to duplicate a Contact Form 7 form across multiple websites by exporting it from one […]

Creating selectable email addresses in Contact Form 7

Sometimes, while designing a Contact Form 7 (CF7) form on your website, you may need to use selectable email addresses in your Contact Form 7 form. For example, assume that you are designing a suggestion form where users can select a specific department of your company to send the suggestion. Here, you can create a […]

Matching Mail Tags with Form Tags in Contact Form 7

Contact Form 7 (CF7) is popular among millions of the WordPress (WP) users. However, for beginner users, getting used to Contact Form 7 can be challenging. A common mistake beginners make is not adding Mail Tags which match with their Form Tags. In this article, we explain how to match mail tags with form tags […]

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 […]

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 […]

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 […]

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 […]

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 […]

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 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 […]

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 […]

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 […]

JavaScript Conflict Problems

Contact Form 7 is a good WordPress community member in regards to it’s use of JavaScript and plugs correctly into the WordPress architecture. However there are many plugins and themes that are not so well written and a host of problems can be due to a JavaScript conflict with either your current WordPress theme or […]

Plugin or Theme Conflicts

Plugin and theme conflicts are unfortunately a fact of life with WordPress. Contact Form 7 plugs correctly into the WordPress architecture so that it does not cause conflicts with other plugins and themes. However there are many plugins and themes that are not so well written. Like many other popular plugins, CF7 is frequently reported […]

Contact Form 7 Email Issues

Though the Contact Form 7 (CF7) plugin successfully sends millions of emails every day, there are a host of issues that can delay or stop emails on both the sending and receiving ends of a typical email. This article was set up to help people, who are having trouble sending and receiving emails from CF7, […]

Yahoo DMARC Issue

There is a general problem with Yahoo email addresses in Contact Form 7 forms (and lots of other applications) due to changes made by Yahoo to their DMARC security policy. In April 2014, Yahoo published a DMARC “p=reject” record, telling all receiving email servers to reject emails from yahoo.com addresses that don’t originate from a […]

Contact Form 7 Configuration Validator

The release of Contact Form 7 – version 4.4 introduced the Configuration Validator which validates Contact Form 7 form configurations to detect errors leading to mail delivery failure or other troubles. This article explains the expected input for each Mail setting field, common mistakes, and how you can resolve those errors. The Contact Form 7 […]

on_sent_ok not working in Contact Form 7

Beginning January 2018, on_sent_ok has been deprecated in Contact Form 7 (version 5.0). If you have been using on_sent_ok in your Contact Form 7 forms, your forms may no longer work as expected. Contact Form 7’s author, Takayuki Miyoshi, now recommends you use Contact Form 7 DOM events to achieve the same result. This article […]

Save Contact Form 7 to WordPress database using 5 free plugins

Contact Form 7 (CF7) is popular among millions of the WordPress (WP) users. However, many people may not know that there are some really useful and free Contact Form 7 extensions that allow you to save Contact Form 7 form submissions in the WordPress database. Advantages of Save Contact Form 7 extensions No need to […]

Use default values for Contact Form 7 Radio Buttons

Starting with version 4.9, Contact Form 7 (CF7) has made it mandatory to have an option checked for radio buttons. It also shows a validation error when no option in a radio buttons group is checked, effectively making all CF7 Radio Buttons required. This change is because the Contact Form 7 author, Takayuki Miyoshi, believes […]

Add text, links and paragraphs in Contact Form 7 forms

A Contact Form 7 (CF7) form can have much more than just some fields for taking user inputs and a submit button. You can make your form more flavored by adding just the right combination of input fields, paragraphs, links, text, labels, and buttons. In this article, we show you how to add links, paragraphs, […]

Using CF7 Skins Fieldsets to improve your Contact Form 7 forms

While designing a Contact Form 7 (CF7) form using CF7 Skins, it is recommended to group the form into fieldsets with their respective legends. Use of fieldsets in a form helps you divide the inputs into logical groups. Apart from being a good form design principle, it also helps the users fill out the form […]

Tips to structure your Contact Form 7 forms

Your forms are one of the main sources of direct communication between you and your users. You should take particular care while designing the Contact Form 7 (CF7) forms on your website. However, creating a well-designed form is easier said than done. There are many factors that affect a user’s experience while filling out an […]

Add Better Contact Form 7 Placeholders

Almost every one of us has used placeholders – whether it was to signup for a Gmail account or completing a feedback form. Contact Form 7 (CF7) also lets you add placeholders on your contact forms to enhance your users’ experience. In this article, we teach you different ways to add placeholders in your Contact […]

Change Type of CF7 Tag: a Quick Guide

With the release of Version 2.1, Contact Form 7 Skins (CF7 Skins) introduces an easy way to change the type of Contact Form 7 (CF7) Form Tag, while creating or changing a form for your WordPress site. In this article, we cover how you can change the CF7 Tag type in the CF7 Skins Visual […]