[Plugin: Contact Form 7] Fixed width for fields in the sidebar

  • For those who have been looking to fix the width of the fields in the sidebar, I have figured it out.

    First step= go to the CSS file for the plugin: /wp-content/plugins/contact-form-7/stylesheet.css

    add this class: .sidebarInput { width: 250px; }

    you can set the name and width to whatever you may need. you will use the class name in the next step.

    Second step= go to the CF7 settings under “Tools” choose the form you wish to fix and add the class name to the fields that you want the width changed on. Mine looked like this:

    <p>Your Name*
    [text* your-name class:sidebarInput] </p>

    <p>Your Email*
    [email* your-email class:sidebarInput] </p>

    All done. Let me know if any of you have different results. I will see what I can do to help.

    I am using WP 2.7.1 and the latest CF7 plugin.

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

  • cmburnett,

    Much much thanks for your post. It certainly did the trick. Quick and painless. What’s cool is you can just apply the css to the main style sheet, not the Contact Form 7 one, so it doesn’t get over-written when upgrading.

    Thanks again.

    Thread Starter cmburnett

    (@cmburnett)

    JHouse, many thanks to you. I just upgraded and it chucked the styling, so I added it to the main style sheet and it’s good to go. Nice addition. Thanks for the help!

    I have been trying to figure out how to target the fields for styling. Thank you for posting this!

    This particular method didn’t work for me on my main pages, but I found that using the id instead of class tag did work.

    So, for example, I added #contact-form { width: 150px; } to my stylesheet. Then, within the plugin, I used the id rather than class tag. So, for example, my “first name” form field looks like this: [text* your-name id:contact-form akismet:author].

    deewilcox: Thanks. That worked for me.

    Much easier way to control columns and rows in Contact Form 7
    [textarea your-message 40×10]

    this is right in the settings area, starts out [textarea your-message}. Add the 40×10 to get 40 columns, 10 rows!

    Or if you want to edit the width of the fields you can simply add something like this:

    <p>Your Name (required)
    [text* your-name 20/] </p>

    <p>Business Name (required)
    [text* Business-Name 20/] </p>

    <p>Your Email (required)
    [email* your-email 28/] </p>

    The numbers allow you to control the width of the filed size.

    ??

    Courtney Bostdorff
    https://sitesires.com

    Or you could just add something like this to control the field widths without creating columns and rows:

    [text* your-name 28/]
    [text* Business-Name 28/]
    [email* your-email 28/]

    Courtney Bostdorff

    Oooops, double posted ??

    Or you could just add something like this to control the field widths without creating columns and rows:

    [text* your-name 28/]
    [text* Business-Name 28/]
    [email* your-email 28/]

    Thanks for this post. I am using WP 2.9.2 and Contact Form 7 2.1.1.

    There is no stylesheet.css file under: /wp-content/plugins/contact-form-7/

    However, there is styles.css and styles-rtl.css under this directory. I have attempted to add CSS code here and reference it in the contact form unsuccessfully. CF7 functions well (can send all e-mails fine); however, I have yet to get the style to update. What css files need to be edited to get the style to update? I have tried css on the CF7 form, the contact me page the form is loaded to, and on my theme’s css. Nothing can change the style. What am I missing here?

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Plugin: Contact Form 7] Fixed width for fields in the sidebar’ is closed to new replies.