How to select a specific contact form to format in CSS

Question

I am 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 this contact form. Follow his short code.

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

How can I select it in css?

Answer 1

Add a class directly into your form’s shortcode:

[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: http://contactform7.com/faq/can-i-add-id-and-class-attributes-to-a-form-element/

Answer 2

put it 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