WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Customizing the boxes and layout of Contact Form 7 (7 posts)

  1. acknowledged74
    Member
    Posted 1 year ago #

    Hi

    I have looked this up on Google etc as at the very least I need to make the field boxes much longer as its just a thinnish line of boxes over to the left of my contact page.

    I want it to look something like

    Link

    So wider fields, with coloured background.

    I have found various forum answers but they tend to be

    <p>Your Name (required)[text* your-name 33/] </p>
    or
    <p>Your Name (required)[text* your-name 40/100] </p>

    and this doesn't make any difference at all to the actual form.

    The style.css only has 64 line with div.wpcf7-validation-errors { etc nothing to actually style the appearance only content.

    I dare say this is simply but i can't find it.

    Please help.

    A

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

  2. dustycat
    Member
    Posted 1 year ago #

    I'm having the same problem.

    I've always used the defaults on previous forms but I'm trying to style a form to fit a different layout now and setting the field widths doesn't alter anything

    I don't know if this is peculiar to the latest version of CF7 as I had just updated the plugin before attempting this.

    I tried deleting my browsing history in case it was a caching issue but still no joy.

    Hope it's easily solved as my project is ground to a halt until this is sorted!

  3. acknowledged74
    Member
    Posted 1 year ago #

    Ok so I've added

    .wpcf7 input[type="text"]{ background-color:#FFC90D; border:0px; margin-bottom:6px; padding:8px 5px; font-size:11px; width:50% }

    to the style.css and this has styled the [text] fields what is the name of the message field [ ? ] i thought it might be .wpcf7 input[type="textarea"] but its not.

  4. acknowledged74
    Member
    Posted 1 year ago #

    .wpcf7 textarea.wpcf7-textarea { background-color:#FFC90D; border:0px; margin-bottom:6px; padding:8px 5px; font-size:11px; width:50% }

    Try the two ways above dustycat, Ive just worked it out I think.

  5. pikkabbu
    Member
    Posted 1 year ago #

    Thank you very much, ack...

    That helps a lot.

  6. bukavu
    Member
    Posted 1 year ago #

    Thank you acknoledged74, I used this code on the css of my theme and it worked fine, Here.

    .wpcf7 input[type="text"]{ background-color:#89D4FF; border:0px; margin-bottom:6px; padding:8px 5px; font-size:11px; width:50% }
    .wpcf7 textarea.wpcf7-textarea { background-color:#89D4FF; border:0px; margin-bottom:6px; padding:8px 5px; font-size:11px; width:75% }

    Now the other issue is "Send", it remains plain, I would like something like a button type or at lease a border.

  7. SSpearjr
    Member
    Posted 1 year ago #

    Hi,
    Where exactly do I adjust the height of the textarea?

    .wpcf7 textarea.wpcf7-textarea { background-color:#89D4FF; border:0px; margin-bottom:6px; padding:8px 5px; font-size:11px; width:75%; height:100px }

    Do I place code anywhere in style.css

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic