Contact Form 7
CSS Style Guide

01 / Understand the starting point

Where does Contact Form 7 styling come from?

Your form's appearance is the result of the CSS loaded on the page. Contact Form 7 supplies form markup and styles for its own interface states. Your theme, page builder, custom CSS and addons can all contribute additional rules.

Find the rule before replacing it

Open the published page, right-click a field and choose Inspect. Select the actual input, then check Styles and Computed for its color, padding or border. The stylesheet reference tells you where the winning rule comes from.

02 / Limit the change

Style one form or all Contact Form 7 forms

For one form placement, add a class to its shortcode. CF7 places html_class on the rendered form element, inside the .wpcf7 wrapper.

[contact-form-7 id="829d9e6" title="Contact form 1" html_class="cf7t-skin"]

Use your own existing form ID on another website. Add the class to each placement that should receive this style. Another placement of the same saved form will stay outside these rules if its shortcode has no cf7t-skin class.

To make the example below global, replace every .wpcf7 form.cf7t-skin prefix with .wpcf7 form and load that CSS sitewide. Review every affected form before publishing.

03 / Apply a small, useful style

Basic Contact Form 7 CSS for fields and labels

This starter style gives text fields a consistent border, readable text and visible keyboard focus. It covers common text inputs, selects, textareas and feedback spacing. It leaves field order, column structure and submit-button design to their own guides.

Where to put the CSS

Use one maintained CSS location: WordPress Additional CSS where available, your builder's page or site CSS setting, or an enqueued child-theme stylesheet. In Bricks, use page-level Custom CSS for one page or site-level Custom CSS when the same class is used across pages.

Paste the snippet as plain CSS in a CSS editor. Do not put it in the CF7 Form tab, and do not edit the Contact Form 7 plugin stylesheet. If using an HTML Code element for CSS, wrap the rules in <style> and </style>.

.wpcf7 form.cf7t-skin {
  color: #3F2C23;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.wpcf7 form.cf7t-skin p { margin: 0 0 18px; }
.wpcf7 form.cf7t-skin label {
  color: #3F2C23;
  font-size: 16px;
  font-weight: 600;
}
.wpcf7 form.cf7t-skin .wpcf7-form-control-wrap {
  display: block;
  margin-top: 6px;
}
.wpcf7 form.cf7t-skin input[type="text"],
.wpcf7 form.cf7t-skin input[type="email"],
.wpcf7 form.cf7t-skin input[type="tel"],
.wpcf7 form.cf7t-skin input[type="url"],
.wpcf7 form.cf7t-skin input[type="number"],
.wpcf7 form.cf7t-skin select,
.wpcf7 form.cf7t-skin textarea {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #A18C7E;
  border-radius: 8px;
  background: #FFFFFF;
  color: #3F2C23;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}
.wpcf7 form.cf7t-skin textarea {
  min-height: 120px;
  resize: vertical;
}
.wpcf7 form.cf7t-skin :is(input, select, textarea):focus-visible {
  outline: 2px solid #774F3E;
  outline-offset: 3px;
}
.wpcf7 form.cf7t-skin :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #B42318;
}
.wpcf7 form.cf7t-skin .wpcf7-not-valid-tip {
  margin-top: 6px;
  color: #B42318;
  font-size: 14px;
  line-height: 1.5;
}
.wpcf7 form.cf7t-skin .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.5;
}

Change the color values to match your brand. The example uses a white field surface, brown text and an 8px corner radius. It targets specific input types so checkboxes, radio buttons, hidden fields and submit buttons do not receive full-width text-field sizing.

04 / Use visual controls

How to style a form without writing CSS

A visual styling addon lets you edit supported appearance settings through controls. For CF7 Layout Builder, use this short appearance workflow after setup. Control labels and available options depend on your installed version.

1. Open the form you want to style

   Open that form in the addon editor. Keep a copy of the existing form and note the page where it is displayed. Leave its fields and their order as they are for this styling pass.

2. Start with the available style controls

   Choose readable label and field text, then set the field background and border where those controls are provided. Use your site's existing colors as the reference.

3. Refine the field appearance

   Adjust available padding, text-size and corner settings a little at a time. If the installed editor has no control for a property, do not assume it can change that property without CSS.

4. Save and review the published page

   Save the form, reload the page and clear the relevant page or CSS cache if needed. Review the result outside the editor, including a narrow screen and keyboard focus.

5. Resolve competing styles

   If a setting does not appear, inspect the field on the front end. Remove or adjust the older rule that controls the same property instead of stacking two styling methods blindly.

For the addon itself, see CF7 Layout Builder. For product-specific setup and operating instructions, use CF7 Toolbox documentation.

05 / A controlled before-and-after check

The same fields, with and without the CSS

These read-only examples use identical name, email and message fields. The second example adds cf7t-skin and the exact CSS above. The first uses a defined 14px baseline with 8px padding; it is not presented as the default appearance of every CF7 website.

Isolated, read-only HTML examples. No data is collected or submitted. Each example can receive keyboard focus so you can inspect its focus appearance.

06 / Finish on the front end

Check the form on its actual page

• Readable labels: keep visible labels and enough contrast between text and background.
• Keyboard focus: move through the real form with Tab and confirm that the active control is clear.
• Narrow screens: check that fields, long labels and feedback fit inside the form container.
• Validation: submit an incomplete test form on your test site and confirm that the error text remains visible and associated with the field.
• Successful submission: send an authorized test on your own site and check both the confirmation and the expected notification.
• Other forms: confirm that the same CSS has not changed an unrelated form placement.

If the style does not appear

First confirm that the rendered form has the class. Then check that the stylesheet loads on that page and that your selector matches the actual field. Inspect any crossed-out declarations, refresh the relevant cache, and repeat the check outside the editor.

When a styling addon generates the form markup, spacing wrappers may differ from the standard CF7 paragraph structure. Inspect the markup before changing paragraph margins. Keep the fix scoped to the intended form.

07 / Common questions

Contact Form 7 styling questions

08 / Continue with the right task

Need to change a different part of the form?

Keep appearance changes focused. The topics below cover separate tasks, so you can go deeper without rebuilding the whole form.