WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Contact Form 7] Fixed width for fields in the sidebar (12 posts)

  1. cmburnett
    Member
    Posted 5 years ago #

    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.

  2. JHouse
    Member
    Posted 5 years ago #

    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.

  3. cmburnett
    Member
    Posted 5 years ago #

    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!

  4. auxano
    Member
    Posted 5 years ago #

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

  5. deewilcox
    Member
    Posted 4 years ago #

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

  6. BataviaModelrs
    Member
    Posted 4 years ago #

    deewilcox: Thanks. That worked for me.

  7. julieadc
    Member
    Posted 4 years ago #

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

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

  8. selfmade64856
    Member
    Posted 4 years ago #

    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
    http://sitesires.com

  9. selfmade64856
    Member
    Posted 4 years ago #

    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

  10. selfmade64856
    Member
    Posted 4 years ago #

    Oooops, double posted :)

  11. selfmade64856
    Member
    Posted 4 years ago #

    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/]

  12. surfITin10
    Member
    Posted 4 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.