WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
want to clear placeholder onfocus (6 posts)

  1. Yipiki
    Member
    Posted 10 months ago #

    I'm using Contact Form 7 Version 3.7.2, trying to clear placeholder on input & textfield when user click on it... couldn't figure out how, changing onfocus in text.php not showing, I realized there are lots of php pages are (inactive)... not sure how things works...

    try to write a script but don't know where to insert...

    right now place holder will only clear out when user start typing... else even you click on it, value still show and it confused user where to start on typing...

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 10 months ago #

  3. Yipiki
    Member
    Posted 10 months ago #

    Thanks for the link, I did went to that page already... I want the placeholder value to clear out once you click on it, not when start typing...

  4. Ph59
    Member
    Posted 10 months ago #

    I have the same issue with Contact Form 7. When the user clicks on "Send" the form stays the exact same on the screen and no confirmation of sent message does appear, even though a confirmation has been sent to the user.

    Thanks for your help.

  5. Stagger Lee
    Member
    Posted 6 months ago #

    Target placeholders and make elegant labels to move to the right, and cursor stay on left side. Or put color of placeholders on focus as background color to make them invisible (display:none doesnt work there).
    I prefer text-align:right, more inituitive. If widths of input fields are small then color as background is better idea, maybe for small devices. But better to fix it with media selectors for responsive.

    Or whatever you want, just play with CSS3.
    Target inputs for contact form only if you dont want this change globaly on website.

    input:focus::-webkit-input-placeholder {
    text-align:right;
    }
    input:focus:-moz-placeholder { /* Firefox 18- */
    text-align:right;
    }
    input:focus::-moz-placeholder { /* Firefox 19+ */
    text-align:right;
    }
    input:focus:-ms-input-placeholder {
    text-align:right;
    }

  6. Stagger Lee
    Member
    Posted 6 months ago #

    Here is for texarea, tested all and working fine. Keep those lines separate, it is important.

    .wpcf7-form textarea:focus::-webkit-input-placeholder {
    text-align:right;
    }
    .wpcf7-form textarea:focus:-moz-placeholder { /* Firefox 18- */
    text-align:right;
    }
    .wpcf7-form textarea:focus::-moz-placeholder { /* Firefox 19+ */
    text-align:right;
    }
    .wpcf7-form textarea:focus:-ms-input-placeholder {
    text-align:right;
    }

Reply

You must log in to post.

About this Plugin

About this Topic