How to Use Contact Form CSS in WordPress

July 30, 2025
No Comments

To use custom CSS for a Contact Form in WordPress, you can style Contact Form 7, WPForms, or any form plugin by targeting their HTML structure with CSS. Here’s a step-by-step guide to apply CSS to a contact form in WordPress:

Step 1: Identify the Form’s Class or ID

📌 Example: Contact Form 7

Insert the shortcode into a page:

Example

[contact-form-7 id="123" title="Contact Us"]

The rendered HTML will look like this:

Example

<div class="wpcf7" id="wpcf7-f123-p1-o1"1>
  <form class="wpcf7-form"1>
    <p1><label1>Your Name [text* your-name]</label1></p1>
  </form1>
</div1>

📌 Use class selectors like .wpcf7-form to style it.

Step 2: Add Custom CSS

Option 1: Via Customizer

  1. Go to Appearance > Customize > Additional CSS

  2. Paste your CSS code:

    Example
    
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
}

.wpcf7-form input[type="submit"] {
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #005177;
}
  3. Click Publish

Option 2: In Your Theme’s CSS File

  • Go to Appearance > Theme File Editor
  • Edit style.css in your child theme
  • Add the same CSS code there

Step 3: Apply Class to a Specific Form (Optional)

If you want to style one specific form, add a custom class in the Contact Form 7 shortcode:

Example

[contact-form-7 id="123" html_class="custom-contact"]

Then in CSS:

Example

.custom-contact input[type="text"] {
    background-color: #f9f9f9;
}