[Plugin: Contact Form 7] 2 forms with different styles

I know this was asked 3 months ago but I think I’ve just found a solution for those who may be still looking. I’m not an expert in CSS but it works for me.

Wrap the form in a div id for example in your Contact Form 7 panel.

<div id = "myform1">
<p>Your Name (required)<br />
    [text* your-name] </p>
<p>Your Email (required)<br />
    [email* your-email] </p>
<p>Subject<br />
    [text your-subject] </p>
<p>Your Message<br />
    [textarea your-message] </p>
<p>[submit "Send"]</p>
</div>

Then in your styles.css file
refer to your form using #

#myform1{
    background: #F7F7F7;
    width : 230px;
    margin: 10px auto;
    position: relative;
    height: 275px;
    border: 2px solid #D4F4FF;
    border-radius:10px;
-moz-border-radius:10px;
    box-shadow: 10px 10px 5px #888888;
}

Use the forms’ ids to differentiate them in your style sheet.

zavhara, thank you so much for this code. It does exactly what I want. And Andrew, your comment causes one of those ‘ah ha’ moments.

Thank you Zavhara, this is the exact solution I was looking for. Thank to bobrock also for the question.

For others to know, this is what andrew was talking about, which is a great idea!

#yourcontactformID a-pre-existing-tag {
margin: 230em 0.5em 1em;
padding: 0.2em 1em;
color:#000;
}

ex:
#wpcf7-f443-p440-o1 div.wpcf7-response-output {
margin: 230em 0.5em 1em;
padding: 0.2em 1em;
color:#000;
}

worked like a charm for me! ??

it doesnt work

PsYcHojEsTeR,

Your comment is extremely helpful. Thanks for the detail you provided. Have you wondered why it worked for all the others who used it?

Where did you put the code? Did you retype the code or did you copy and paste? Provide DETAILED answers and maybe, just maybe, you’ll get a useful response.

@davejampole – sorry my bad, it works ?? i figure it out, how the code works ?? thanks