WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: Contact Form 7] Custom css in header

[Resolved] [Plugin: Contact Form 7] Custom css in header

  • T B
    Member

    @bekefitibor

    Hi there, I would like custom my contact form but I am new in css so I need some advice about it.

    <style type="text/css">
    
    .textfield {
    width:180px;
    height:20px;
    margin:0px;
    border-style:solid;
    border-width:2px;
    border-color:#f29e9b;
    padding:1px;
    position:relative;
    top:10px;
    left:20px;
    }
    
    .emailfield {
    width:180px;
    height:20px;
    margin:0px;
    border-style:solid;
    border-width:2px;
    border-color:#f29e9b;
    padding:1px;
    position:relative;
    top:0px;
    left:20px;
    }
    
    .textfield2 {
    width:180px;
    height:20px;
    margin:0px;
    border-style:solid;
    border-width:2px;
    border-color:#f29e9b;
    padding:1px;
    position:relative;
    top:0px;
    left:20px;
    }
    
    .textarea {
    width:250px;
    height:200px;
    margin:0px;
    border-style:solid;
    border-width:2px;
    border-color:#f29e9b;
    padding:1px;
    position:relative;
    top:0px;
    left:20px;
    }
    
    .submit {
    position:relative;
    top:0px;
    left:200px;
    }
    
    </style>
    <p>[text* your-name class:textfield watermark "Your Name"]</p>
     <p>[email* your-email class:emailfield  watermark "Your email"]</p>
     <p>[text* your-subject class:textfield2 watermark "Subject"]</p>
     <p>[textarea* your-message class:textarea watermark "Your Message"]</p>
    
    <p>[submit class:submit "Send"]</p>

    http://wordpress.org/extend/plugins/contact-form-7/

Viewing 10 replies - 1 through 10 (of 10 total)
  • Interesting question!
    Based on original Contactform7, i think it’s only work by an element-style like this:
    <p style="width:180px;height:20px;margin:0px;border-style:solid;border-width:2px;border-color:#f29e9b;padding:1px;position:relative;top:0px;left:20px;">[text* your-name class:textfield watermark "Your Name"]</p>

    Another way is maybe via PHP’s include and some insertations at the /plugins -Folder in File /contact-form-7/modules/special-mail-tags.php instead of Line 67 ff as shows now this:

    elseif ( '_post_author_email' == $name )
    		$output = $user->user_email;

    …into this…

    elseif ( '_post_author_email' == $name )
                    // add here your css into $output
    		$output = $user->user_email;

    or something like this

    – just as a short, unproofed idea and answered “by the way” 😉

    T B
    Member

    @bekefitibor

    Hi man, I am not professional too but the first version looks better in the life :DDD

    T B
    Member

    @bekefitibor

    http://cheapgoodwebsite.com/2012/10/03/custom-contact-form-7-css-or-design-after/

    I am going to create several custom css for contact form 7
    This is the first one, but I would like only 1px space between boxes

    T B
    Member

    @bekefitibor

    fcvolunteer
    Participant

    @fcvolunteer

    I’d love to help you out with the css but I’m not sure what you’re asking. Are you trying to condense the css you provided in your first post? Are you trying to replace it?

    T B
    Member

    @bekefitibor

    I would like only 1px space between boxes, but that does not work even with `position:relative;
    top:0px;`
    left:20px;. May be if there is a shorter version of that like.emailfield, textfield, textfield2 {…`

    fcvolunteer
    Participant

    @fcvolunteer

    @tib here’s what I would suggest.
    In your form html add a class to the first <p> tag (I used “form1” as an example) and remove the remaining <p></p> tags and replace it with
    tags like in the code below. Make sure to leave the </p> tag after the message textarea.

    <p class="form1">
    [text* your-name class:textfield watermark "Your Name"]<br/>
     [email* your-email class:emailfield  watermark "Your email"]<br/>
     [text* your-subject class:textfield2 watermark "Subject"]<br/>
     [textarea* your-message class:textarea watermark "Your Message"]</p>
    
    <p>[submit class:submit "Send"]</p>

    Now for the css code:

    p.form1 span input, p.form1 span textarea {
        border-color: #F29E9B;
        border-style: solid;
        border-width: 2px;
        margin: 0 0 1px 20px !important;
    }
    
    .textfield, .emailfield, .textfield2 {
        height: 20px;
        width: 180px;
    }
    
    .textarea {
        height: 200px;
        width: 250px;
    }

    Hope this helps

    T B
    Member

    @bekefitibor

    Much better, easier, siple! Thx

    I made that, because your .textarea not changed

    p.form1 span input, p.form1 span .textarea1, .emailfield1, .textfield1 {
        border-color: #F29E9B;
        border-style: solid;
        border-width: 2px;
        margin: 0 0 1px 20px !important;
    }
    
    .emailfield1, .textfield1 {
        height: 20px;
        width: 180px;
    }
    
    .textarea1 {
        height: 200px;
        width: 250px;
    }
    <p class="form1">
    [text* your-name class:textfield1 watermark "Your Name"]<br/>
     [email* your-email class:emailfield1  watermark "Your email"]<br/>
     [text* your-subject class:textfield1 watermark "Subject"]<br/>
     [textarea* your-message class:textarea1 watermark "Your Message"]</p>
    
    <p>[submit class:submit1 "Send"]</p>

    But the space still not 1px there as you can see there http://cheapgoodwebsite.com/custom-contact-form-7-css-or-design/

    fcvolunteer
    Participant

    @fcvolunteer

    try this for your form code

    <p class="form1">
    [text* your-name class:textfield1 watermark "Your Name"]<br/>[email* your-email class:emailfield1  watermark "Your email"]<br/>[text* your-subject class:textfield1 watermark "Subject"]<br/>[textarea* your-message class:textarea1 watermark "Your Message"]</p>
    
    <p>[submit class:submit1 "Send"]</p>

    For your css, I don’t understand what wasn’t working.
    Was it this code?

    p.form1 span textarea

    or this?

    .textarea {
        height: 200px;
        width: 250px;
    }

    Either way, if you want to keep it how you have it now, that’s fine but you can replace

    p.form1 span input, p.form1 span .textarea1, .emailfield1, .textfield1 {
        border-color: #F29E9B;
        border-style: solid;
        border-width: 2px;
        margin: 0 0 1px 20px !important;
    }

    with

    p.form1 .textarea1, p.form1 .emailfield1, p.form1 .textfield1 {
        border-color: #F29E9B;
        border-style: solid;
        border-width: 2px;
        margin: 0 0 1px 20px !important;
    }
    T B
    Member

    @bekefitibor

    ok I find the problem, There were some extra <br> so 1px of margin: 0 0 1px 20px !important; did not work. I’ve remove extra ‘
    ‘ now I can set the vertical space between boxes.

    Like that

    <p class="form1">
    [text* your-name class:textfield1 watermark "Your Name"]
     [email* your-email class:emailfield1  watermark "Your email"]
     [text* your-subject class:textfield1 watermark "Subject"]
     [textarea* your-message class:textarea1 watermark "Your Message"]</p>
    <p>[submit class:submit1 "Send"]</p>
    p.form1 span input, p.form1 span .textarea1, .emailfield1, .textfield1 {
        border-color: #F29E9B;
        border-style: solid;
        border-width: 2px;
        margin: 0 0 1px 20px !important;
    }
    
    .emailfield1, .textfield1 {
        height: 20px;
        width: 180px;
    }
    
    .textarea1 {
        height: 200px;
        width: 250px;
    }

    Thank you very much everybody!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘[Resolved] [Plugin: Contact Form 7] Custom css in header’ is closed to new replies.