Return to previous page

Contact form customization - by Webacto - on WordPress WooCommerce support

This topic has 10 replies, 4 voices, and was last updated 8 years, 7 months ago ago by Stan Russell

Webacto

Participant

May 9, 2016 at 15:50

Hello I need a little help for 2 little customization of my contact form:

1. I want to fullfill text area with the background-color:#f2f1f0

.form-control {
background-image: none;
background-color: #f2f1f0 !important;
border: 1px solid #ccc;
border-radius: 0 !important;
}

.compressed {
font-family:’Raleway’;
color: black;
font-size: 1.1em;
font-weight: 400;
background-color: #f2f1f0;
}

textarea.form-control {
background-image: none;
background-color: #f2f1f0 !important;

}
label.control-label {
font-family:Raleway;
font-size: 13px;
color:#282626;
}
I’ ve tried with these differents css, but doesn’t works. How put this background?

2. change the Name and Surname / Message / Subject labels color in #f2f1f0; and 2pt more size.
From which class?

I’ve searching a lot in Firebug but I hava no solution, can you help me?

Please, contact administrator
for this information.

#124738 Copied

9 Answers
Eva Kemp

Support staff

May 10, 2016 at 08:15
Hello,

1. As I see contact form has background color http://storage1.static.itmages.com/i/16/0510/h_1462864410_6299239_c046c4ed0d.jpeg .

2. Use this code in child style.css file:
```
.contact-form label {
    color: #f2f1f0 !important;
    font-size: 20px !important;
}
```
Also if you set this color #f2f1f0 for contact labels you won’t see them, because your background color has the same value.

Regards,
Eva Kemp.
#124804 Copied
Webacto

Participant

May 10, 2016 at 11:39

Hello,

contact form has a wrong background color.

I want to put it only inside to the 3 bordered text areas (and not in all around .div)
Do you undestand what I mean?

Which is the correct css?

Please, contact administrator
for this information.

#124890 Copied
Eva Kemp

Support staff

May 10, 2016 at 13:57
Hello,

Remove background-color attribute from this code:
```
.compressed {
    font-family: 'Raleway';
    color: black;
    font-size: 1.1em;
    font-weight: 400;
    background-color: #f2f1f0;
}
```
and check contact form then.

Regards,
Eva Kemp.
#124936 Copied
Webacto

Participant

May 11, 2016 at 14:20

Hello,

I’ve cleaned all my contact form css and only have, as you suggest:

.contact-form label {
color: #f2f1f0 !important;
font-size: 20px !important;
}

but still not have background color and text labels haven’t not formatting.

Which is wrong?

Please, contact administrator
for this information.

#125159 Copied
Jack Richardson

Support staff

May 11, 2016 at 16:23
Hello,

I’ve added this code in child style.css file:
```
.contact-form label {
color: #f2f1f0 !important;
font-size: 20px !important;
}

.compressed input[type="text"], .compressed .form-control {
background-color: #f2f1f0;
}
```
Please check contact form now.

Best regards,
Jack Richardson.
#125225 Copied
Webacto

Participant

May 11, 2016 at 16:46

Great!

Work fine!

In which css style have you added these proprieties?

I don’t see theme in my child css field and I need to modify a little bit more.

From where I can control them?

#125248 Copied

Jack Richardson

Support staff

May 11, 2016 at 18:46

Hello,

Go to Appearance > Editor > select Royal Child theme, changes are made in style.css file of the child theme.

Best regards,
Jack Richardson.

#125299 Copied

Webacto

Participant

May 12, 2016 at 11:49

Thanks Jack,

can I remove them from there and copy them in my child css file for protect them from future theme actualization or if they’ll remain there, at the next theme update, will not change?

#125454 Copied

Stan Russell

Participant

May 12, 2016 at 13:00

Hello Webacto,

all customization made in Child Theme will not be affected by theme update as Child Theme is placed in separate folder.

Regards,
Stan Russell.

#125480 Copied
Tagged: contact form customization, customizable design, optimized content, seo friendly meta keywords, user-friendly interface, wordpress woocommerce themes
Viewing 10 results - 1 through 10 (of 10 total)