Contact form 7 customisation

[bablingua]

I’m really sorry to bother you with this because I’ve seen there’s plenty of information in the forum and the website, but I haven’t been able to make a couple of changes in my Contact Form after following the tutorials.

I’ve got a simple contact form on this site: https://bablingua.com/contact-us/
And I’ve been editing another using one of your templates for this: https://bablingua.com/purchase-orders/

I’m happy with the results of my editing but there are 3 things I still don’t know how to change:

1. The color of text fields. I’d like them to be plain white, like in my main content form. How could I change it?
2. I’d like the send button to look like the default one in my theme. I’ve followed the tutorials and I know how to change the background editing the CSS (which I did). But how could I have exactly the same design from my main contact form button (the theme’s default) applied to that button from the template?
3. I’ve successfully organised the fields in columns, but there’s a field that it’s a big too long (Number of schools). Is there an easy way to make it smaller? My customers will just pick a number between 1 and 40, so I don’t need so much space.

Thanks!!!

[friech]

Hi Alvaro,

Thank you for writing in, 1) Sorry I am not entirely certain what do you want to do with the field background, It is already white, and you can’t make it transparent because it will blend with the gray background.

2.) You can use the selector below to override the styling of that button.

input.wpcf7-form-control.wpcf7-submit {

}

The CSS property that you need are:

• background-color
• border
• border-radius

3.) Add a class on that field, then use that class to target that field and apply a
max-width CSS property on it.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[bablingua]

Thanks! I’ve got number 2 done and I’ll work on 3.

But please take a look at the form: https://bablingua.com/purchase-orders/
The text fields are not white but some kind of salmon.

[jade]

Hello Alvaro,

There is this CSS block that is setting the background color if the input elements:

.wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"] {
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid #efefef;
    box-shadow: none;
    padding: 20px;
    margin-bottom: 10px;
    background-color: #fef6eb;
}

Did you import this form from the Design Cloud? If so, please check the Element CSS of the section there the form is and that is where you’ll find the CSS code I mentioned.

Element CSS | Themeco Docs

Hope this helps.

[bablingua]

Wow, Jade, it helps a lot. Thank you so much!!!

[friech]

We are delighted to assist you with this.

Cheers!