Title: How do I decrease the size of the text boxes?
Last modified: August 30, 2016
---
# How do I decrease the size of the text boxes?
* Resolved [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/)
* I have put my form on a page which uses columns (which I want), causing the text
boxes go off the page: [http://imgur.com/ImpO1jz](http://imgur.com/ImpO1jz)
* How do I decrease the size of the textboxes so they fit nicely within the page?
* The code for my whole form is as follows:
* ```
Your Name:
[text* your-name]
Contact Email:
[email* your-email]
Beds (Private): [select* menu-969 "0" "1" "2" "3" "4"] Beds (Dorm): [select* menu-69 "0" "1" "2"]
Check In:
[date date-52]
Check Out:
[date date-753]
[submit "Request Booking"]
```
* For the textbox ‘your name’, for example, I tried adding ‘size:30’ to it like
it said in the tutorial, so it looked like this:
* ```
Your Name:
[text* your-name size:30]
```
* But nothing happened.
* Looking for some advice. Thanks
* [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)
Viewing 14 replies - 1 through 14 (of 14 total)
* Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
* (@takayukister)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635399)
* See [Styling Contact Form](http://contactform7.com/styling-contact-form/)
* [davmerit](https://wordpress.org/support/users/davmerit/)
* (@davmerit)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635415)
* At [Styling Contact Form](http://contactform7.com/styling-contact-form/) 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 find you need more detailed advice, after reading and working through
the above links, please include a link to your Contact Form 7 form, so others
here can examine your form in detail using [Firebug](https://getfirebug.com/)
or [Chrome Dev Tools](https://developers.google.com/chrome-developer-tools/)
to understand the CSS used for your CF7 form elements and provide you with a
possible solution.
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635625)
* I’m sorry, I’m still a bit confused.
* Here is a link to my Contact Form 7 form: [http://goo.gl/ZoLliR](http://goo.gl/ZoLliR)
* I’ve tried modifying a bit over the past few days, but to no avail. All I want
is to shorten the text boxes so they fit within the page. I thought this was
a simple request 🙁
* Code for the contact form:
* ```
Your Name:
[text* your-name]
Contact Email:
[email* your-email]
Beds (Private): [select* menu-969 "0" "1" "2" "3" "4"] Beds (Dorm): [select* menu-69 "0" "1" "2"]
Check In:
[date date-52]
Check Out:
[date date-753]
[recaptcha]
[submit "Request Booking"]
```
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635636)
* Tried this way, and it doesn’t work:
* [https://wordpress.org/support/topic/plugin-contact-form-7-change-textbox-size?replies=3](https://wordpress.org/support/topic/plugin-contact-form-7-change-textbox-size?replies=3)
* [davmerit](https://wordpress.org/support/users/davmerit/)
* (@davmerit)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635640)
* The problem comes from code below.
* ```
input[type="text"], input[type="email"], input[type="password"], textarea {
padding: 1%;
border: 1px solid #EAEAEA;
line-height: 20px;
width: 98%; /* this is causing the problem */
margin: 0px 0px 20px;
background-color: #F8F8F8;
border-radius: 3px;
}
```
* You can find this code on line 281 of style.css in your theme. To fix the problem
simply comment out the that like so
* ```
input[type="text"], input[type="email"], input[type="password"], textarea {
padding: 1%;
border: 1px solid #EAEAEA;
line-height: 20px;
/* width: 98%; */
margin: 0px 0px 20px;
background-color: #F8F8F8;
border-radius: 3px;
}
```
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635647)
* Thank you for your help. But I did that, and it didn’t work 🙁
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635649)
* I just updated it, and it works now. Thanks!!!
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635669)
* Still having issues.
* Yes, the textboxes now appear much smaller and better, but the page width remains
too wide (as you can see at the bottom when you go to the page, there’s a slider
at the bottom of the internet browser).
* I’m 100% sure this is to do with this plugin, because when I delete the contact
7 shortcode from the webpage, the problem disappears.
* Also, when I use my mobile and access the webpage with the mobile version, the
textboxes still shoot off across the webpage and look to big.
* Please solve this for me. Thank you
* Link to my contact 7 form: [http://goo.gl/ZoLliR](http://goo.gl/ZoLliR)
* [davmerit](https://wordpress.org/support/users/davmerit/)
* (@davmerit)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635672)
* I can see your form still has the problem. The code has still not been commented
as I suggested to you. Kindly get that resolved first then I can assist you on
the next one. Also you may have to start a new thread with your next question.
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635681)
* I originally tried that and it didn’t work. I deleted that code you suggested
to request help from the theme creators, but they haven’t replied yet.
* I added it again, and the textboxes still take up half the page (why is it even
that long? No-one’s name is that long). I rearranged the page, but even that
didn’t help.
* Please help.
* > [View post on imgur.com](https://imgur.com/QxMXeHE)
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635682)
* So, this thread remains unresolved.
* [davmerit](https://wordpress.org/support/users/davmerit/)
* (@davmerit)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635683)
* I think all you need to do is to comment on that line – please follow my reply
above to so solve this problem 🙂
* Thread Starter [ryan94](https://wordpress.org/support/users/ryan94/)
* (@ryan94)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635684)
* I commented on that line like so before your last comment:
* ```
}
input[type="text"], input[type="email"], input[type="password"], textarea {
padding: 1%;
border: 1px solid #EAEAEA;
line-height: 20px;
/* width: 98%; */
margin: 0px 0px 20px;
background-color: #F8F8F8;
border-radius: 3px;
}
```
* It seems to be much shorter now, which is good. I’m not sure why it took so long
to shorten itself. Very strange.
* [Neil Murray](https://wordpress.org/support/users/buzztone/)
* (@buzztone)
* [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635686)
* > I’m not sure why it took so long to shorten itself. Very strange.
* Could have been due to browser caching – you may need to clear your browser cache
whenever you make these sort of changes.
Viewing 14 replies - 1 through 14 (of 14 total)
The topic ‘How do I decrease the size of the text boxes?’ is closed to new replies.
* 
* [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
* [contact-form](https://wordpress.org/support/topic-tag/contact-form/)
* 14 replies
* 4 participants
* Last reply from: [Neil Murray](https://wordpress.org/support/users/buzztone/)
* Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/how-do-i-decrease-the-size-of-the-text-boxes/#post-6635686)
* Status: resolved