Contact Form 7
2 forms with different styles (9 posts)

  1. bobrock4
    Posted 3 years ago #

    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


  2. zavhara
    Posted 2 years ago #

    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;
  3. Andrew Bartel
    Posted 2 years ago #

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

  4. davejampole
    Posted 2 years ago #

    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.

  5. praveen68
    Posted 2 years ago #

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

  6. izamarvirafuentes
    Posted 2 years ago #

    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! :)

  7. PsYcHo jEsTeR
    Posted 2 years ago #

    it doesnt work

  8. davejampole
    Posted 2 years ago #


    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.

  9. PsYcHo jEsTeR
    Posted 2 years ago #

    @davejampole - sorry my bad, it works :) i figure it out, how the code works :) thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.