WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Custom css in header (11 posts)

  1. T B
    Member
    Posted 1 year ago #

    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/

  2. freuter
    Member
    Posted 1 year ago #

    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" ;-)

  3. T B
    Member
    Posted 1 year ago #

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

  4. T B
    Member
    Posted 1 year ago #

    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

  5. T B
    Member
    Posted 1 year ago #

  6. fcvolunteer
    Member
    Posted 1 year ago #

    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?

  7. T B
    Member
    Posted 1 year ago #

    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 {...`

  8. fcvolunteer
    Member
    Posted 1 year ago #

    @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

  9. T B
    Member
    Posted 1 year ago #

    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/

  10. fcvolunteer
    Member
    Posted 1 year ago #

    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;
    }
  11. T B
    Member
    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags