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

  • bobrock4


    Hi all,

    I have created a nice form with Contact 7 plugin and I put it in the lower part of the template customizing it with CSS. I have also needed to make a different form, with more fields. to be put in a specific page “contact”: I’ve made it with Contact 7 but I’m not able to customize it in a different way from the previous one. In fact classes to use are the same of the previous form, if I change one of them I change two forms. How could I make two different forms in styles?

    Thanks and ciao

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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>

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

        background: #F7F7F7;
        width : 230px;
        margin: 10px auto;
        position: relative;
        height: 275px;
        border: 2px solid #D4F4FF;
        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;

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

    worked like a charm for me! 🙂



    it doesnt work




    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Plugin: Contact Form 7] 2 forms with different styles’ is closed to new replies.