Title: Change form field width
Last modified: August 22, 2016

---

# Change form field width

 *  Resolved [goshenw](https://wordpress.org/support/users/goshenw/)
 * (@goshenw)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/)
 * Hi folks,
 * Is the ‘size’ tag in the form settings meant to change the width of the input
   field?
 * I think my theme’s css is overriding this setting, and all the fields default
   to full width no matter what I set it to.
 * Any idea which part of the (themes?) css I need to change, to force an input 
   width: “width: 170px;”
 * Or, is there a better way of controlling this? eg using the “Class” setting in
   the form editor.
 * My form is at: [http://wattspermaculture.com.au/contact-us/](http://wattspermaculture.com.au/contact-us/)
 * Many thanks
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

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

 *  Thread Starter [goshenw](https://wordpress.org/support/users/goshenw/)
 * (@goshenw)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5699920)
 * hm, I think I’ve found the right bit in the css file. Copied it to my custom.
   css, but changes are having no effect.
 * The { width: 170px; } tags are my additions.
 *     ```
       /*  base : forms
       /* ------------------------------------ */
       input, textarea, button, select, label { font-family: inherit; }
       .themeform input, { width: 170px; }
       .themeform textarea,
       .themeform button,
       .themeform select,
       .themeform label { font-size: 14px; }
       .themeform input::-moz-focus-inner,
       .themeform button::-moz-focus-inner { border: 0; padding: 0; }
       .themeform input[type="text"], { width: 170px; }
       .themeform input[type="password"],
       .themeform input[type="email"],
       .themeform input[type="submit"], { width: 170px; }
       .themeform button,
       .themeform textarea { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; }
       .themeform input,
       .themeform textarea,
       .themeform button { -moz-appearance: none; -webkit-appearance: none; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; }
       .themeform input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }
       .themeform input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
       .themeform label { font-weight: 600; color: #444; }
       .themeform input[type="text"], { width: 170px; }
       .themeform input[type="password"],
       .themeform input[type="email"], { width: 170px; }
       .themeform textarea { background: #fff; border: 2px solid #ddd; color: #777; display: block; max-width: 100%; outline: none; padding: 7px 8px; }
       .themeform input[type="text"]:focus,
       .themeform input[type="password"]:focus,
       .themeform input[type="email"]:focus,
       .themeform textarea:focus { border-color: #ccc; color: #444; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1); box-shadow: 0 0 3px rgba(0,0,0,0.1); }
       .themeform label .required { color: #3b8dbd; }
       .themeform input[type="submit"],  { width: 170px }
       .themeform button[type="submit"] { width: 170px; background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; }
       .themeform input[type="submit"]:hover,
       .themeform button[type="submit"]:hover { background: #444; }
       ```
   
 *  Thread Starter [goshenw](https://wordpress.org/support/users/goshenw/)
 * (@goshenw)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5699939)
 * ok, after more searching, I’ve found the wpcf7 part of the css file, but even
   changing this has no effect. So frustrating!
 * /* plugin : contact form 7
    /* ———————————— */ .wpcf7 { }
 * For example: Just trying to make the Submit button 40% rather than 100% should
   be easy?
 * .wpcf7 input[type=”submit”] { width: 40%; padding: 10px 0; font-size: 18px; }
 *  Thread Starter [goshenw](https://wordpress.org/support/users/goshenw/)
 * (@goshenw)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5700030)
 * turned out the simplest solution was to use another plugin. pity that the hueman
   theme, despite using contact form 7 by default, wasn’t flexible in it’s css /
   width layout.
 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5700041)
 * > RE: Is the ‘size’ tag in the form settings meant to change the width of the
   > input field?
 * The “size” you use in CF7 tags refers to the standard HTML [size attribute](http://www.w3.org/TR/html401/interact/forms.html#adef-size-INPUT)
   which may or may not control overall element size. Its main purpose is to limit
   the number of characters and/or rows you can enter.
 * Back in the 1990s the HTML size attribute probably did what you want, but with
   modern CSS based websites the overall size of the form elements is more generally
   controlled by the CSS in your current WordPress theme.
 * I suspect that CSS changes required to force an input width: “width: 170px;” 
   may be pretty simple.
 * Did you see ​[Styling Contact Form](http://contactform7.com/styling-contact-form/)
   for a general explanation of styling CF7 forms using CSS.
 * There is a link at the bottom of the page to a comprehensive and detailed article
   on **Styling Contact Form 7 Forms**. The article shows people, with suitable 
   HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms
   to meet their particular requirements.
 * If you can setup your CF7 form somewhere on your site (do it where visitors don’t
   have access if you want) and post a link here I’d be interested to take a look.
 *  Thread Starter [goshenw](https://wordpress.org/support/users/goshenw/)
 * (@goshenw)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5700044)
 * ok, thanks for the reply… sorry I was a bit hasty. the site is not yet ‘live’,
   so I put the WPCF7 form back up (on the same contact page).
 * Thanks for the link, I don’t think I’d seen that one.
 * I added the following to my theme’s custom.css file:
 *     ```
       /* contact form 7: Change form width */
       .wpcf7 input[type="text"],
       .wpcf7 input[type="email"],
       {
           width: 40%;
       }
       ```
   
 * But, still no effect 🙁
 * If you can see something I’ve got wrong, please let me know – otherwise no need
   to spend too much time, as I do have the other form going.
 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5700150)
 * The following CSS is currently controlling the width of your input form elements
   in
    [http://wattspermaculture.com.au/wordpress/wp-content/themes/hueman/style.css](http://wattspermaculture.com.au/wordpress/wp-content/themes/hueman/style.css)?
 *     ```
       .wpcf7 input[type="text"], .wpcf7 input[type="email"] {
           display: block;
           float: left;
           padding: 10px;
           width: 100%;
       }
       ```
   
 * Use [Firebug](https://getfirebug.com/) or [Chrome Dev Tools](https://developers.google.com/chrome-developer-tools/)
   to examine the HTML and CSS of your CF7 form in detail. Once you understand how
   the HTML and CSS is configured in your CF7 form, you should be able to see the
   CSS changes you need to change the appearance of the form to suit your requirements.
 * I tested changing the elements within Firebug to ​width: 40% without problems.
 * See [Styling Contact Form](http://contactform7.com/styling-contact-form/) for
   a general explanation of styling CF7 forms using CSS.
 * There is a link at the bottom of the page to a comprehensive and detailed article
   on **Styling Contact Form 7 Forms**. The article shows people, with suitable 
   HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms
   to meet their particular requirements.
 *  Thread Starter [goshenw](https://wordpress.org/support/users/goshenw/)
 * (@goshenw)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5700164)
 * thanks… yes, ok – got it to resize correctly using that stylesheet. And chrome
   dev tools did help too – will use in the future. cheers.

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

The topic ‘Change form field width’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [field](https://wordpress.org/support/topic-tag/field/)
 * [form](https://wordpress.org/support/topic-tag/form/)
 * [width](https://wordpress.org/support/topic-tag/width/)

 * 7 replies
 * 2 participants
 * Last reply from: [goshenw](https://wordpress.org/support/users/goshenw/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/change-form-field-width/#post-5700164)
 * Status: resolved