• Dave

    (@online-sports-betting)


    I’ve got an email field

    [email* footer-email size=30 placeholder “Email Address”]

    that ends up looking like this on the page:

    input name=”footer-email” value=”” size=”40″ class=”wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email” aria-required=”true” aria-invalid=”false” placeholder=”Email Address” type=”email”

    It doesn’t matter what I specify for “size” in the CF shortcode. It could be 1000 or 10. And it always ends up as ‘size=”40″‘.

    https://wordpress.org/plugins/contact-form-7/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    The overall size of the form elements is generally controlled by the CSS in your current WordPress theme rather than the “size” you use in the Form section of the CF7. This refers to the standard HTML size attribute which may or may not control overall element size.

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    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.

    Thread Starter Dave

    (@online-sports-betting)

    Yes, I’ve read the “Text Fields” page.

    There is no way to set the size attribute of an input element from CSS. CSS can control the appearance of that input element but cannot directly change the size attribute. I checked this with 1) CSS docs and 2) the inspector in Chrome.

    Thread Starter Dave

    (@online-sports-betting)

    Yes I will have to address the theme eventually. I’m using Avada and basically once I hit “ctrl+” enough the email input field is “bleeding” over into another text widget in the footer. I’m sure this is the CSS’ fault.

    But if I raise this issue with Avada support the first thing they are going to suggest is changing the size attribute on the input element. And in point of fact I *should* be able to change it via the CF page for that shortcode.

    Please include a link to your Contact Form 7 form plus all your input in the Form and Mail sections of the CF7 interface. If others here are able to understand your actual problem, they may be able to offer a possible solution.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Sizing an email field’ is closed to new replies.