Installing CF7 Skins

Installing CF7 Skins and its Add-ons is easy and simple. Installing Contact Form 7 Skins (free version) Use one of the following methods to install Contact Form 7 Skins on your WordPress website: Directly on your WordPress website By uploading the CF7 Skins ZIP file Directly on your WordPress website 1. Log into your WordPress […]

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

Create a form with CF7 Skins

Once you have downloaded and activated the Contact Form 7 plugin and the CF7 Skins plugin, you are ready to get started. 1. Log in to your WordPress dashboard. 2. Under Contact > Contact Forms, click Add New. 3. Scroll down until you see the Skins section.  The Visual Form Editor will be open by default, showing a basic form structure. Notice that […]

Choosing a Style for Your Form

CF7 Skins comes with many Styles which you can apply to any form with just a click (See Understanding Templates and Styles). Create a new form or edit an existing Contact Form 7 form. Scroll down to the Skins section and click on the Style tab to view the list of available styles to choose […]

Using a Custom CSS plugin to modify a CF7 Skins Style

Custom Styling your Contact Form 7 Form With CF7 Skins you’re able to apply a Style and get a great looking Contact Form 7 form quickly and easily without having any HTML or CSS skills. Sometimes, though, you might want to make small changes. Using a Custom CSS plugin is a relatively easy way to […]

Edit your CF7 Skins Form (Contact Form 7 Editor)

This tutorial is about using the Contact Form 7 tag editor. To learn how to edit your form using the CF7 Skins visual editor, see Edit your CF7 Skins Form (CF7 Skins Visual Editor). Starting a new form with Contact Form 7 gives you a default Contact Form within Contact Form 7’s form tag editor: Select a Template […]

Making your form easy to read by using Fieldsets

When creating your CF7 Skins form, you may notice that your form is starting to get a little long or confusing to follow. To help solve these problems, rather than creating separate forms or having one long form, you can section apart your content using the fieldset and legend elements. The grouping and labelling of […]

Choosing a Template for Your Form

When you select a CF7 Skins Template, it instantly generates a form with predefined HTML fields and Contact Form 7 tags. All of your available templates are on the Template tab. Choosing a Template To begin, select your Contact Form from the admin panel. Scroll down to the Skins section. Click the Template tab to begin exploring […]

How to Customise Your Selected CF7 Skins Style

Before you begin This article will only be useful if you: Have a basic understanding of HTML and CSS. Learn more. Understand and know how to use developer tools such as Firefox Firebug or Chrome Developer Tools – Learn more. Understand child themes and/or how to update the CSS of your WordPress theme using a […]