Ninja Forms is a powerful and flexible WordPress form plugin that allows users to build custom forms. While the default form styles work well out of the box, adding custom CSS can help you enhance the form's design and align it with your website's branding. In this guide, we’ll explore a CSS snippet to style Ninja Forms fields, buttons, and error messages.

Why Use Custom CSS for Ninja Forms?

Adding custom CSS to Ninja Forms allows you to:

  1. Match Your Website’s Style: Ensure the forms look consistent with your overall design.

  2. Enhance User Experience: Improve readability and usability with better spacing and styling.

  3. Make Forms Stand Out: Customize buttons, focus effects, and error messages for a polished look.

CSS Snippet: Stylish Form Fields and Buttons

Here’s a custom CSS snippet to enhance the look of your Ninja Forms:

/* General Form Styling */
.nf-form-cont .nf-field-container input, 
.nf-form-cont .nf-field-container textarea {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus Effect for Input Fields */
.nf-form-cont .nf-field-container input:focus, 
.nf-form-cont .nf-field-container textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;
}

/* Submit Button Styling */
.nf-form-cont .nf-field-container button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.nf-form-cont .nf-field-container button[type="submit"]:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

/* Error Message Styling */
.nf-form-cont .nf-error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
}

/* Success Message Styling */
.nf-form-cont .nf-response-msg {
    background-color: #d4edda;
    color: #155724;
    padding: 10px 15px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-top: 10px;
}

How It Works

  1. Input and Textarea Styling:

    • Adds padding, border, and smooth box-shadow focus effects.

    • The :focus pseudo-class highlights the field when a user interacts with it.

  2. Submit Button:

    • Styles the button with a blue background and white text.

    • Adds a hover effect with a darker blue and a slight lift using transform: translateY(-2px).

  3. Error Messages:

    • Red text with smaller font size for better readability.

  4. Success Messages:

    • Green background with padding and rounded corners for a user-friendly confirmation.

Steps to Add the CSS

  1. Add a Ninja Form:

    • Create or edit a form using the Ninja Forms plugin.

    • Place the form on a page or post using a shortcode.

  2. Insert the Custom CSS:

    • Go to Appearance > Customize > Additional CSS in WordPress.

    • Paste the CSS snippet provided above.

    • Alternatively, add it to your child theme’s style.css file.

  3. Save and Publish:

    • Save your changes and preview the form.

Customization Options

You can easily tweak the snippet:

  • Colors: Change #007bff (blue) to match your brand colors.

  • Font Size and Padding: Adjust the input fields and button sizes for larger or smaller forms.

  • Error and Success Messages: Customize the colors for better visibility.

Example Result

With this CSS applied, your Ninja Forms will have:

  • Clean and modern input fields with smooth focus effects.

  • Stylish submit buttons that respond to hover.

  • Clear error and success messages for better user feedback.

Customizing Ninja Forms with CSS is a simple way to make your forms look professional and match your website’s design. Use the snippet above to enhance the appearance of your forms and provide a better experience for your users. Give it a try and take your forms to the next level!