How to add custom CSS in contact form 7?

Where to add the custom CSS to style your Contact Form 7 forms Add CSS to your theme's stylesheet, although I don't recommend doing this unless you have a child theme installed. Add CSS to the Additional CSS field under Customizer (This is the easiest way) More items...

How do I add a custom field in Contact Form 7?

Go to the “Settings” section and click on the “Custom fields” category. Here, click on the “Create custom field” button . Customize HelpDesk custom fields according to your preferences and needs. Take a look at the API key name — you'll need it to create Contact Form 7 in the Form and Mail panels in the CF 7 settings.

How do I add custom attributes in Contact form 7?

Can I Add A Class Or ID Attribute To A Form? As it turns out, you can use a very similar method to add class and id attributes to your contact form. Let's say you want to add a class=”my-class” and id=”my-id” to a Contact Form 7 form. Just use the html_ prefix in the shortcode , like you did to add a name attribute.

Can I use HTML in Contact form 7?

Contact Form 7 plugin allow editing forms with standard textarea . This addon allows adds HTML editor with code highlighter to each contact form. You can also hide the form from users using Test Mode. The form in this mode will be available only to the site administrator.

How do I make my contact form 7 look good?

How do I style contact form? This is a common question on the support forum. Contact Form 7 doesn't provide any customization for styling. Editing CSS style sheets is the best method to style contact forms.

How to style contact form 7 placeholder?

When you go an add a new text form, you'll see under the “Default Vault” a checkbox which says “Use this text as the placeholder of the field”. You can then put the placeholder text in this area, once you have done that and added a name to your field, add the tag. And that's it, it's. as simple as that!

How do I add another CSS?

Note: There are two different ways to import a CSS file into another using @import url(“style2. css”); or @import “style2. css”; or directly import any CSS file or multiple CSS files in the HTML file directly within <style>@import “style1.

How do I add custom CSS to Google Forms?

Right-click any element in the Google Form and choose Inspect Element . Next, switch to the Styles panel and experiment with different styles for colors, padding, font-size and any other CSS property. You can then copy the CSS and paste it into the custom CSS section.

How do I add a subject in Contact form 7?

Simply edit the Subject field in the Mail tab panel .

How do I add a conditional field in Contact form 7?

If you edit your CF7 form, you will see an additional tag called “Conditional fields Group”. Everything you put between the start and end tag will be hidden by default. After you have added the field group(s), go to the “Conditional fields” tab to create one or more conditions that will make the group(s) appear .

Add CSS to Contact Form 7: Ready-made Code Snippets (2024)

Welcome back to another WordPress tutorial. Do you enjoy using the Contact Form 7 plugin for your web forms? Are you struggling to add simple customizations to your forms? Well, you’ve hopefully arrived in the right place. In this tutorial, I’ll show you how to make your contact forms look clean and sleek by using some simple CSS.

I’ll assume that you have theContact Form 7plugin already installed on your website and you also have a contact form embedded into your contact page. If you don’t, then you canfind the plugin here.

What is Contact Form 7?

Well, the clue is in the name. It’s a very simple plugin designed for adding a contact form to your WordPress website. It’s free and probably the simplest contact form plugin there is.

The forms are easily customizable using simple markup. Contact Form 7 is installed on over 5 million WordPress websites (at the time of writing this tutorial), so you’re in good hands.

The plugin also supports CAPTCHA and Akismet for spam control and filtering, although we will not be covering these in this tutorial.

Recommended:How to customize WPForms in WordPress using Simple CSS

Where to add the custom CSS to style your Contact Form 7 forms

This depends on your setup and whether you are using a regular theme or a website builder plugin such as Oxygen or Bricks Builder.

You have a few options when it comes to adding CSS code snippets to your website –

Add CSS to yourtheme’s stylesheet, although I don’t recommend doing this unless you have a child theme installed.
Add CSS to theAdditional CSS fieldunder Customizer (This is the easiest way)
Install a plugin called WPCodeBox to add CSS snippets, which you can find here.
If you are using Oxygen Builder, you can simply add the CSS to your stylesheet.

For this tutorial, I will be usingoption 2, adding CSS to the Additional CSS field provided.

From your WordPress dashboard, you should be able to find this by navigating toAppearance > Customize > Additional CSS. (See images below).

Add CSS to Contact Form 7: Ready-made Code Snippets (2)

Add CSS to Contact Form 7: Ready-made Code Snippets (3)

Contact Form 7 form background and border CSS

Let’s start with the background and border of the contact forms.

The followingCSS codesnippet will style your Contact Form 7container backgroundsitewide. This means all the forms on your website will be affected.

If you don’t wish to add a custom background or border, just skip adding this piece of code.

A quick note on the padding values:These values help to add space between your input fields and the surrounding edges of the background-colored container. Again, you can adjust these accordingly for your forms. If you prefer to use REM values or Variables, feel free to do so.

If you use the code snippet below without modification, the result you will get is a medium gray background with a solid dark grey border.

/* Contact Form 7 Form Background And Border CSS -----------------------------------------------*/ .wpcf7 { background: #A3A3A3; border: 10px solid #494949; width: 700px; padding: 20px 20px 20px 50px !important; }

Contact Form 7 input fields and text area CSS

The following CSS code snippet will style thefont size, form input fields, text area,background color, font color, form width, and padding.

Once again, if you use the code below without modification, you should see each of the form fields in a light grey shade.

/* Contact Form 7 Input fields and text area CSS ---------------------------*/ .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], textarea { font-size: 16px; background-color: #f5f5f5; border: none; width: 95%; padding: 2%; }

Contact Form 7 ‘Submit Button’ CSS

The following CSS code snippet below will style theSubmit Buttonof yourContact Form 7 forms.

There are three rules here:input, input:hover, and input:active.Let me explain what each one of these rules mean, if you’re not familiar.

input –This is the state of the button before any action has taken place on it.
input:hover –This is the state of the button when someone hovers their mouse pointer over the top of it.
input:active –This is the state of the button when someone clicks on the button itself.

Again here, if you use the code below without modification, you should see a red button, and it should change to a grey shade when you hover your mouse cursor over the top of it.

/* Contact Form 7 Submit Button -------------------------------*/ .wpcf7 input[type="submit"] { color: #ffffff; font-size: 18px; font-weight: 700; background: #E2272E; padding: 15px 25px; border: none; border-radius: 5px; width: auto; text-transform: uppercase; letter-spacing: 5px; } .wpcf7 input:hover[type="submit"] { background: #494949; transition: all 0.4s ease 0s; } .wpcf7 input:active[type="submit"] { background: #000000; }

If you want to add a different style to the submit button, check out this post for more button CSS code snippets over on the FVM blog.

Contact Form 7 Checkbox CSS

Lastly, as shown in the ~~video tutorial above~~, the following CSS code will style the checkbox by making it slightly larger, as well as alignthetext labelwith the rest of the elements in your contact form.

/* Checkbox CSS----------------*/input[type="checkbox"] { transform: scale(1.3); margin-left: 5px;} span.wpcf7-list-item { margin: 0; padding-bottom: 20px;}

Output for the entire CSS code provided above ‘as is’

If you used all of the above CSS code provided without modifying a single line, your forms should look something like this (without the background and border CSS).

Add CSS to Contact Form 7: Ready-made Code Snippets (4)

Add CSS to Contact Form 7: Ready-made Code Snippets (5)

If you have some basic knowledge of CSS, you can play around with thevaluesin each property to personalize your contact forms further. If you’re new to all of this, the more practice you have, the better.

It’s a wrap!

So there you have it, this was a quick and easy tutorial foradding simple custom CSS to your Contact Form 7 web forms. I hope it worked for you.

Do you need help with this tutorial?

If you run into any problems implementing the techniques or the CSS code into your website, or if something isn’t working right, please consider becoming a member of Van Marciano Pro. As a subscriber, you’ll get access to support with implementing the tutorials via email and chat, not to mention access to over 250 combined course topics, videos, and expert tutorials on Van Marciano Pro.

Go straight to the main video