Reduce (or Resize) Contact Form 7 Text Input Boxes

Sometimes, Contact Form 7 text boxes go outside the sidebar or they are too wide than required. CSS doesn’t even work while resizing or reducing the text box (input box) sizes of the WordPress plugin Contact Form 7.

C:UsersDeepakDesktoptempatechplanetReduce Size of the Contact Form 7 Input Boxes.png

I had the same problem and didn’t find a single answer on Google which could solve the problem of the Contact Form 7’s Text Boxes going outside of the Sidebar. After researching a bit, I found a working solution. Here’s it…

Reduce the Size of Contact Form 7 Text Input Boxes

  • Step 1: Log in to your wp-admin

First of all log in to your site’s wp-admin, install the contact form 7 and create a Form if not already did.

  • Step 2: Open the Contact Form to Edit

Click Edit and the form editor will open where you can edit your contact form.

Edit the Contact Form 7 Form

Your screen will look something like the above image when the Edit option is clicked.

Step 3: Do Some Changes in the Code

Add “25/” after text* your-name in the form as shown in the image below.

Edited Contact Form 7 to Reduce the Text Input Boxes Size

You can add this “25/” to all or any specific fields of your contact form.

Wrapping it up

If you want your text boxes to be a little smaller or a little larger then you can use “20/” or “30/” respectively.

Any doubts or suggestions are welcomed in the comments.

Comments

28 responses to “Reduce (or Resize) Contact Form 7 Text Input Boxes”

    1. Deepak Avatar

      Well, I’m not sure what went wrong. But, it did work for me.

    2. Ankur Avatar
      Ankur

      worked for me too

    3. Mark Avatar
      Mark

      Worked for me as well. I going to guess there are maybe some theme settings that are overriding this.

  1. MorkieNation Avatar

    Thanks, appreciate the tip!

    1. Deepak Avatar

      Thanks, buddy. Made my day.

  2. Smartphones Trend Avatar

    i was facing this problem since a week … finally i found solution hear i appreciate your work …. Thanks alot

    1. Deepak Avatar

      Glad you liked it.

  3. Stuart Campbell Avatar
    Stuart Campbell

    this doesn’t work i have tried it and the cf7 form your name section on my website is the same size as the rest of the options

    1. Deepak Avatar

      It used to work back then. Maybe it doesn’t work after the update.

  4. Shashank Avatar
    Shashank

    Doesn’t work

  5. vanvadas Avatar
    vanvadas

    Worked for me, thanks! 🙂

    1. Deepak Avatar

      Glad it worked, thanks.

  6. Alan Brady Avatar

    Hi Deepak, Just tried this (April 2021) it works brilliantly! Thank you so much 🙂

    1. Deepak K Avatar

      Glad it worked for you, Alan.

  7. Pete Avatar

    Bravo ! A good solution for a, usual problem without solution in a lot of forums ! Thanks a lot !
    How can you do for “text area” box ? Your super solution works for text, tel mail but not for text area ? Thanks

    1. Deepak K Avatar

      Glad it worked, Pete.

      No, I haven’t figured out yet how to resize text-area box. But once I do, I’ll update.

      Thank you.

  8. ivan Avatar
    ivan

    for textarea box use:
    [textarea* your-message x3 class:form-control]

    1. ivan Avatar
      ivan

      by the way, thanks for the text fields fix

      1. Deepak K Avatar

        Glad you found it useful.

        Thank you.

    2. Deepak K Avatar

      Thanks for the solution, it’ll help people coming to the page.

    3. Abhishek Avatar
      Abhishek

      it worked.. thanks

  9. shushank Avatar
    shushank

    Hey Deepak and Ivan
    It really worked for me although I bit new to WordPress and don’t have any technical background as I use drag and drop builder for creating the website.

    1. Deepak K Avatar

      Glad it worked, Shushank.

  10. Andrew Avatar

    Awesome… NOV 21
    25/
    and then I used
    [textarea* your-message x3 class:form-control] for text box

    THANK YOU ALL FOR YOUR HELP!!!!!!!!!
    I spent about fours before this popped up….. hahaha that’s the way it goes for me and web building…. takes 30 seconds after hours of research…..
    So please recognize that your efforst are appreciated. Simply fantastic job to all.

  11. Sue Avatar

    Thank you, it worked for me. Putting together a all-one-form for orders at our Event Rental Company. Trying to do as much as I can myself to keep on budget. Now our clients can go on their phone, fill out the form and order their items. Next an app to get to this page.

    Wish me luck. Keep up the good work.

    1. DeepakNess Avatar

      Glad it worked! All the best for your setup.

  12. Evgenia Avatar
    Evgenia

    Magic!
    Thank you very much!!!!!

Leave a Reply to Deepak K Cancel reply

Your email address will not be published. Required fields are marked *