Contact Form 7 is a great and widely utilised plugin within WordPress. At the time of writing the plugin has over 5 Million active installations which is an incredible amount!
Below we’ve featured a few styling examples and tips to get you started with customising your Contact Form 7 forms.
1. Editing Labels
If you’ve created a label for your input sections for example ‘name’ or ‘telephone’ you may want to tweak the styling of these labels if they haven’t carried over any styling from your theme or if you’d like them to be more unique to the specific form.
Changing the label colour example:
.wpcf7 label {
Color: orange;
}The above example will change the colour of the form label to orange. The use of .wpcf7 ensures that only the labels associated with contact form 7 change colour.
You can add to this class to further style the labels for example:
.wpcf7 label {
Font-size: 24px;
}
This will increase the size of the labels to 24px.
.wpcf7 label {
Text-transform: uppercase;
}
This sets the font style to be uppercase.You can style this text just like any other css element so for example adding padding or background colours to the text.
2. Customising the form width and alignment:
Aligning the form:
To align the form to the left, right or center simply set the text align class to the main form CSS container class. For example:
.wpcf7 {
Text-align: center;
}
This will align both the labels and the text within the form.If however you wanted to align only the input boxes to the center but leave the text aligned to the left you could set the form to display as a table and then position the table elements via the use of margin or float for example:
So let’s say you wanted to have the form sit to right you’d use:
.wpcf7 {
Display: table;
Float: right;
}This way the table is aligned independently of the text alignment of the labels.
As you can’t float items to the center you simply follow the same steps but use the auto margin:
.wpcf7 {
Display: table;
Margin: auto;
}Setting form width:
The form is wrapped within a container, this container will depend on how you’ve added the form to your page for example if it’s simply a shortcode added to a basic editor it may be larger as a form than if it’s added to a specific element e.g. a column.
However to set widths within the form you can target the individual classes of the fields for example:
.wpfc7-form-control {
Width: 50%;
Margin: auto;
}This will set every field within the form including the buttons to 50% of the container. And the margin auto will then align the form to the center of that box.
If you’d prefer to set this for specific items within the form you can use code similar to this:
.wpfc7-text {
Width: 50%;
}This will set all text areas within the form to 50% width.
Another example would be:
.wpfc7-email {
Width: 50%;
}
3. Styling the submit button:
When styling the submit button for the form you can target the specific class for that which is:
Wpcf7-submit
So for example you could add code such as:
.Wpcf7-submit {
Background-color: orange;
Border: none;
Width: 25%;
}The above code will create a submit button for the form that has the background colour orange, with no border and is 25% of the width of the container.
4. Setting a form background:
Setting a background for your form uses the same selector as mentioned earlier so:
Wpcf7
With this you can assign a background to the overall form for example:
.Wpcf7 {
Background-color: orange;
Padding: 5%;
}5. Styling the fields such as email etc.
Styling the fields uses a similar approach to the earlier mentioned setting of the width / alignment for the contact form and fields. You will need to use the class selector specific to the type of field that you’re styline for example:
Wpfc7-textarea
Wpfc7-email
Wpfc7-text
Each of these selectors can be used to style the specific field but will style all relevant fields e.g. if you have 5 text fields the styling for that one would apply to all of them.
An example of this is:
.Wpfc7-text {
Background-color: orange;
}This would set all of the text fields to have the background colour orange.
Further Reading:
How to centre the submit button with Contact Form 7
This is a quick tutorial on using some styling elements of Contact Form 7.
We’d appreciate a share or any comments if you found this useful, thanks!
