Contact form 7 incorrectly rendering the placeholder attribute

  • Resolved andru26

    (@andru26)


    10 years, 6 months ago

    I am on Chrome and using the latest version of Contact Form 7 (3.9.1) and I am trying to implement a form that uses the HTML5 placeholder attribute. The problem I have is that the only field that is correctly rendering this attribute is the email field. The other type=”text” fields or textarea field DO NOT have the placeholder attribute. Instead the placeholder attribute is rendered as value attribute, and is removed when focusing the fields. Also, all required fields that have the FAKE placeholder attribute DO NOT validate on submit.

    I JUST NOTICED that the on page load the placeholder attributes appear just fine on all fields for a split second and then they are replaced with the value attributes. So, this is most likely a javascript issue.

    You can see an example of the form I am using here: https://dev.betterhtml.com/cognitive_assessment/placeholder/

    Here is the code I am using:

    <div class="form_row">
   [text* your-name placeholder "Your Name"]
</div>
<div class="form_row">
      [email* your-email placeholder "Your Email"]
</div>
<div class="form_row">
      [text your-phone placeholder "Your Phone"]
</div>
<div class="form_row">
    [textarea your-message placeholder "Your Message"]
</div>

<div class="form_button">[submit "Send"]</div>

    Please help.

    https://www.ads-software.com/plugins/contact-form-7/

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

    (@takayukister)

    Apparently JavaScript in your theme is doing this. Try switching to the default theme.

    Thread Starter andru26

    (@andru26)

    Thank you for the quick reply. You’re right, the theme is doing that. However, there is still the second issue. If the form fields have default values, they are not considered as invalid on form submit (the default value is preventing these fields to be validated ).
    It there a fix for this issue?

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Yes, solve the first issue first, then you can keep the placeholder text as a placeholder, not as a value.

    Thread Starter andru26

    (@andru26)

    Thanks again for the quick reply! I fixed the issue and the form is now working great, including in older IE not supporting placeholder attribute.

    andru26 it would be more than helpful if you shared some more details about your problem and how you solved it, if possible.

    Thread Starter andru26

    (@andru26)

    The problem was generated by the theme I was using, as it contained a js piece of code which was converting the fields placeholder attributes into the field values. Once I removed that code, everything went back to normal. Hope this helps.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Contact form 7 incorrectly rendering the placeholder attribute’ is closed to new replies.