input fields extend outside form

  • Kiki6778

    (@kiki6778)


    11 years, 5 months ago

    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://ww.wp.xz.cn/plugins/contact-form-7/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Neil Murray

    (@buzztone)

    11 years, 5 months ago

    Please include a link to your Contact Form 7 form so we can examine your form in detail.

    Thread Starter Kiki6778

    (@kiki6778)

    11 years, 5 months ago

    Here is where it is located…. 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

    (@buzztone)

    11 years, 5 months ago

    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 & Chrome Dev 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 or custom CSS plugin​.

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