Contact form 7 custom CSS

Support
#1

Hello,

In recent past you have advised me to setup Contact 7 form css as per below

// Contact Form 7 field background
*/
.wpcf7-form {
  margin: 0;
}
/*
//form fields background
*/
input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea{
    background-color: #4d4d4d
}

/* //contact 7 input text color*/
#wpcf7-f7816-p9646-o1 input, #wpcf7-f7816-p9646-o1 textarea {
    color: white;
}

I have deleted old contact 7 form from WPress Contact 7 list and created a new one. However, the font is not white. I cant change to any color.

#2

Hi there,

That is completely natural as in the code given the selectors have the ID which was valid for that case and that specific instance, it will not work for other instances. You need to find the newly generated IDs of the new form items and replace them in the code.

You need to use the Google Chrome developer toolbar to find the proper IDs in each case:

Thank you.

#3

can you show where in your code the contact form ID is stipulated? I see no IDs.

#4

Hello @VitaliKon,

Thanks for updating the thread. :slight_smile:

Upon inspecting the page using dev tools you can find out the id. Here is the screenshot that you can take a look. https://screencast.com/t/kOYBgqWL831O

Thanks.

#5

Thanks but I asked where in the code you provided the ID is manually created. I was not aware that your code has manual Contact 7 ID.
#wpcf7-f7816-p9646-o1 input, #wpcf7-f7816-p9646-o1 textarea
Should I change 7816 above to new ID?

Is there a way to automate the code contact form ID upon changes iof the ID? What if I create a number of contact forms with different design and different IDs for different areas of the site?

The smarts of X may need to have a flexible way of using this Contact 7 element. Now, it is nightmarish MANUAL.

#6

Hi there,

The first intention of the suggestion of a code with the ID was to restrict the code to only the form in question and not other possible contact form 7 forms on the website.

Please kindly consider that this a customization request and outside of our support scope, we can not give you code for each part of changes you want to do and you either need to hire a developer for that or learn how to utilize CSS and proper selectors.

I suggest that you remove the ID from your code altogether. But you need to add an HTML class instead which will represent the styling you want. You can wrap the whole form in the contact form 7 options with a div tag with proper class. For example, the code below wraps the whole form with a div tag with the class of light-form:

Now in the CSS code, you can use the code below instead of the ID:

.light-form textarea {/* YOUR CSS CODE HERE */}

Now you can apply the styles you want for the light-form class. If you want to have another styling for your forms you can wrap it to a div tag with other class name and add the CSS code to that class.

This is indeed not part of our theme or normal usage of the contact form 7 with default styling of the theme. This is a customization request and the implementation of the code is on your shoulders. The last thing that we can be of a help is to give you resources that you can read for further customization. I did a Google Search regarding this that might get you started with proper coding.

Thank you for your understanding.

#7

thanks very much

#8

You’re welcome :slight_smile:

#9

Ok, I have Contact form ID in the code. The forms works on home page. The same form has been selected for other pages in the same location in footer area. In principle the form should take the css directive and ID from the code. Why other pages still use wrong grey text in contact form which defined correctly in the very same widget as home page?

#10

Hello There,

Unless there is no css conflicts, the css code should always work in all of your pages. Would you mind providing us the url of the page in question so that we can take a closer look?

Thank you in advance.

#11

Hi there,

As I already mentioned in the previous answer of mine you better not use the ID and use the way I already mentioned.

The ID generated on the homepage seems to be different from other pages, actually, each page has a unique ID generated, so you can not rely on ID for this case:

You need to use the way I already mentioned in my answer:

Thank you.

#12

Ok. Pls explain why you put name in code’s curly brackets YOUR CSS CODE HERE. which code? where do I poset HTML stuff and div?

.light-form textarea {/* YOUR CSS CODE HERE */}

#13

Hi there,

It depends in your code, and you can only add the CSS code. Example,

.light-form textarea {
border: 1px solid #ccc;
color: #ccc;
}

Please note that it’s a sample and you don’t need to copy it, place add your own preferred styling/code. We only added /* YOUR CSS CODE HERE */ as a placeholder which you need to replace.

As for HTML and Div, add it to your form content/template. Right in this screenshot that has been provided.

Thanks!

#14

Hello,

I got it done. The form appearance is ok on all pages. thanks
However, the font control is applied only to the message field. other fields keep some greyish color that you cant see when typing.

I think there something missing which should apply font color to all fields universally.
this is the code I used:

/Contact Form 7/
.wpcf7-form {
margin: 0;
}
input.wpcf7-form-control.wpcf7-text, textarea.wpcf7-form-control.wpcf7-textarea{
background-color: #4d4d4d
}

.light-form textarea {
color: #fff;
}

#15

Hi there,

Please try this:

.light-form textarea,
.light-form input[type="text"],
.light-form input[type="email"] {
    color: #fff !important;
}

Hope this helps.

#16

Great! Thanks.
Jade. I have setup contact form correctly but no message is beiing received, just empty email.

Your Name (required)
[text* your-name]

Your Email (required)

[email* your-email]

Your Message

[textarea your-message]

[submit “Send”]

In message field:

From: [you-name] <[your-email]>
Subject: [your-subject]

I receive email with this content:
From: [you-name] xyz@xyz.com
Subject: [your-subject]

I actually typed the message in the online form. that message is not captured.

any idea? should I open another tread

#17

Hi There,

Please provide us with your admin account so we can take a closer look.

Thanks.

#18

Hi,

The login provided doesn’t seem to work. Please check again.

Please make sure you have added [your-message] in the body.

#19

Yeah I fixed that silly form. Can you suggest some product that create stunning and easy creatable form fields so I stop macking around with brackets and codes.

Also I tried to add Tel in your code but color for font is not applied
.light-form textarea,
.light-form input[type=“text”],
.light-form input[type=“email”]
.light-form input[type=“tel”],
{
color: #fff !important;}

HTML for tel
Your Phone
[tel* your-tel]

The field created but without (required) even though I put asterik.

right now the form takes #fff for Name and Mesage fields only. This has occured as soon as I added Tel. My god! if that is programming I’m done.

#20

Hi,

Please try this code instead.



.wpcf7 .light-form input[type="text"],
.wpcf7 .light-form input[type="tel"],
.wpcf7 .light-form input[type="email"],
.wpcf7 .light-form textarea {
    color:#fff !important;
}

With regards to required fields, please provide us your wordpress admin login so we can take a closer look.

For the mean time kindly review the link below for your guide in creating your form.

As an alternative you might want to look at gravity forms

Hope that helps.