Title: input fields extend outside form
Last modified: August 22, 2016

---

# input fields extend outside form

 *  [Kiki6778](https://wordpress.org/support/users/kiki6778/)
 * (@kiki6778)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/input-fields-extend-outside-form/)
 * I have worked for 8 hours trying to get this to work…nothing is working. The 
   input lines are extending beyond the form, outside the text widget,which is in
   my right column.
    I tried dozens of answers from forms and it still happens and
   none of the solutions worked. I suspect it is because I need something in the
   class field but have no idea what.
 * I also tried loading it with Enhanced Text Widget which allow one to add a line
   of CSS….but couldn’t get that to work either.
 * Right now it looks awful…the email field, and other fields go beyond the entire
   website. I tried controlling the amount of content allowed, and it didn’t improve
   it.
 * thanks for your help.
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

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

 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/input-fields-extend-outside-form/#post-5588240)
 * Please include a link to your Contact Form 7 form so we can examine your form
   in detail.
 *  Thread Starter [Kiki6778](https://wordpress.org/support/users/kiki6778/)
 * (@kiki6778)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/input-fields-extend-outside-form/#post-5588244)
 * Here is where it is located…. [http://192.185.21.123/~highland/](http://192.185.21.123/~highland/)
 * Here is the code:
    <h3><font color=#00FF00>**REQUEST A QUOTE:**</h3></font color
   >
 * <font color #ff3300>
 * <p></p>
    <p> [text* name placeholder “Your Name (Required)”] </p> <p></p> <p>
   </p> <p> [email* your-email placeholder “Email Address (Required)”] </p> <p></
   p>
 * <p>[tel* phone /34 placeholder “Your Phone Number”]
    <p></p> <p> [text* area 
   28 placeholder “Length x Width (Sq. Ft.) Required”] </p> <p></p> <p>[text* location
   28 placeholder “City/Additional Info (Required).”] </p> <p></p> </font color>
   <font color = #fffffff>** <p>[submit “Send”]</p> </font color>
 * Thanks so much for helping me with this. It has been driving me over the edge.
 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/input-fields-extend-outside-form/#post-5588366)
 * This is most likely due to CSS styling applied to standard HTML form elements
   within your current WordPress theme.
 * I can’t see the cause of your problem ​​using both [Firebug](https://getfirebug.com/)&
   [Chrome Dev Tools](https://developers.google.com/chrome-developer-tools/) (which
   is very unusual for me) but I see that you are using Bootstrap which is known
   to make styling of forms sometimes difficult.
    ​ Nevertheless you should be able
   to fix your problem with something like:
 *     ```
       .wpcf7-form input[type="text"],
       .wpcf7-form input[type="email"],
       ​.wpcf7-form input[type="tel"] ​​{
             width: 150px;
       }
       ```
   
 * Add via [Child Theme](http://wplift.com/customise-wordpress-child-theme) or [custom CSS plugin](http://wordpress.org/extend/plugins/search.php?q=custom+css)​.
 * 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.

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

The topic ‘input fields extend outside form’ 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

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

 * 3 replies
 * 2 participants
 * Last reply from: [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * Last activity: [11 years, 5 months ago](https://wordpress.org/support/topic/input-fields-extend-outside-form/#post-5588366)
 * Status: not resolved