Customizing the boxes and layout of Contact Form 7

  • Resolved acknowledged74

    (@acknowledged74)


    12 years, 2 months 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

    https://www.ads-software.com/extend/plugins/contact-form-7/

Viewing 6 replies - 1 through 6 (of 6 total)

  • 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!

    Thread Starter acknowledged74

    (@acknowledged74)

    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.

    Thread Starter acknowledged74

    (@acknowledged74)

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

    Thank you very much, ack…

    That helps a lot.

    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.

    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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Customizing the boxes and layout of Contact Form 7’ is closed to new replies.