WordPress.org

Forums

Contact Form 7
[resolved] Contact form 7 incorrectly rendering the placeholder attribute (7 posts)

  1. andru26
    Member
    Posted 9 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: http://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://wordpress.org/plugins/contact-form-7/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 9 months ago #

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

  3. andru26
    Member
    Posted 9 months ago #

    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?

  4. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 9 months ago #

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

  5. andru26
    Member
    Posted 9 months ago #

    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.

  6. tomicakorac
    Member
    Posted 3 months ago #

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

  7. andru26
    Member
    Posted 3 months ago #

    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.

Reply

You must log in to post.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic