How to select a specific contact form to format in CSS

Question

How to select a specific contact form to format in CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'm working on a quick contact form on my page, and I need to format it in css with the following code:

form.wpcf7-form {
position: absolute;
width: 250px;
top: 165%;
left: 65%;
text-align: center;
background-color: rgba(89, 89, 89, 0.5);
background-size: 300px 442.95px;
}

The above code applies formatting to all contact forms on the site, but I need this formatting to apply only to that contact form. Follow his short code.

[contact-form-7 id="4831" title="Contato Rápido"]

How can I select it in css?

css wordpress plugin

asked by anonymous 16.05.2016 / 19:41

2 answers

0

put like this:

form#4831.wpcf7-form {
    position: absolute;
    width: 250px;
    top: 165%;
    left: 65%;
    text-align: center;
    background-color: rgba(89, 89, 89, 0.5);
    background-size: 300px 442.95px;
}

# indicates the ID of the html element you want to apply the style

17.05.2016 / 01:28

How can I see the versions of packages updated via composer? How do I extract the field values from a javascript Object (JSON)?

score 1 · Accepted Answer

Add a class directly to the shortcode of your form:

[contact-form-7 id="4831" title="Contato Rápido" html_class="form_rapido"]

And change your CSS:

form.form_rapido {
    position: absolute;
    width: 250px;
    top: 165%;
    left: 65%;
    text-align: center;
    background-color: rgba(89, 89, 89, 0.5);
    background-size: 300px 442.95px;
}

source: link