• Skip to primary navigation
  • Skip to main content

RocketGeek

Home of WP-Members, The Original WordPress Membership Plugin

  • WordPress Plugins
    • WP-Members
      • FAQs
      • Quick Start
      • Documentation
      • Extensions
    • Advanced Options
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Download Protect
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Invite Codes
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • MailChimp Integration
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • PayPal Subscriptions
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Salesforce Web-to-Lead
    • Security
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Text Editor
      • Purchase the Plugin
      • Get the Pro Bundle
    • User List
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • User Tracking
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Memberships for WooCommerce
    • WordPass
  • Store
    • Cart
    • Checkout
  • Blog
    • Basics [Free]
    • Tips and Tricks
    • Filters
    • Actions
    • Code Snippets
    • Shortcodes
    • Design
    • Release Announcements
  • Contact
  • Sign In
  • Show Search
Hide Search
Home » Filters » Replace form label tags with input tag placeholders

Replace form label tags with input tag placeholders

Chad Butler · Feb 24, 2015 ·

For those that are looking to shape the forms into a specific design that may include using input tag placeholders rather than labels, this set of code snippets will describe how to do that.  

This article is only available to WP-Members Support Subscribers. If you have an existing subscription, please login below. If you do not have a current support subscription, you can purchase a support subscription here.

Already a Member? Log In Here
   
Forgot password? Click here to reset

To gain full access to WP-Members premium content, a current support subscription is required. You can purchase an annual support subscription for as little as $59, which provides you with access to priority support, a customer support forum, access to code snippets, and more.

Why wait? Choose your subscription option here.

[
Why join?]

Filters str_replace, wpmem_login_form_rows, wpmem_register_form_rows, wpmem_sidebar_form

Welcome to RocketGeek Interactive › Forums › Replace form label tags with input tag placeholders

Tagged: str_replace, wpmem_login_form_rows, wpmem_register_form_rows, wpmem_sidebar_form

  • This topic has 18 replies, 6 voices, and was last updated 2 years, 3 months ago by argyrg.
Viewing 12 reply threads
  • Author
    Posts
    • February 24, 2015 at 10:51 pm #7258
      Chad Butler
      Keymaster

      For those that are looking to shape the forms into a specific design that may include using input tag placeholders rather than labels, this set of cod
      [See the full post at: Replace form label tags with input tag placeholders]

    • March 24, 2015 at 9:02 pm #7468
      ssicindy
      Participant

      How might one add this CAPTCHA capability to your WP-Members Login widget?

    • April 7, 2015 at 9:33 am #7596
      fredvanhulst
      Blocked

      Hello, I put this filter in my functions.php
      Look Great but what can i do for the translation (eg. in french)?
      Thanks

      • April 7, 2015 at 10:36 am #7599
        Chad Butler
        Keymaster

        I’ve updated the snippets to hopefully incorporate localization.

        The first one, the login and password forms utilize strings that are part of the WP translation, so those should translate with the change.

        The registration form is a “best guess”. The “Choose a Username” string is in the WP-Members translation file. The rest, it loops through the rest of the fields.

    • January 11, 2016 at 1:14 pm #9294
      filgap
      Participant

      I used this code it’s working fine but mailchimp checkbox label also put inside placeholder how to exclude checkbox from this

      thanks

      • January 11, 2016 at 3:05 pm #9301
        Chad Butler
        Keymaster

        I updated the script to not only check to handle the placeholder for text and password fields only, but I added some logic to then also move the checkbox label to the side of the checkbox.

        I’ll probably re-update this later this week as the new 3.0.9 version that is expected to release tonight adds a key for the raw label text to the wpmem_register_form_rows filter. This eliminates the need for where the current snippet gets the labels in an extra array.

    • January 23, 2016 at 3:43 pm #9396
      filgap
      Participant

      Hi
      It’s not working in widget login form plz check that too

      • January 23, 2016 at 5:01 pm #9399
        Chad Butler
        Keymaster

        The widget form and the main body login form are different and the filter hooks are not the same. The snippet in the example above is for the wpmem_login_form filter which is the main body login form (as well as password reset and password change forms).

        The widget form can be filtered with wpmem_sidebar_form, but this filter is a little less functional as it only filters the HTML as a complete string. You can use str_replace to replace the labels with empty values and to also slip in placeholder properties into the input tags like this:

        add_filter( 'wpmem_sidebar_form', 'my_sb_login_form_placeholders' );
        function my_sb_login_form_placeholders( $form ) {
        	
        	$old = array(
        		'name="log"',
        		'name="pwd"',
        		'<label for="username">' . __( 'Username' ) . "</label>",
        		'<label for="password">' . __( 'Password' ) . "</label>",
        	);
        	
        	$new = array(
        		'name="log" placeholder="' . __( 'Username' ) . '"',
        		'name="pwd" placeholder="' . __( 'Password' ) . '"',
        		'',
        		'',
        	);
        
        	return str_replace( $old, $new, $form );
        }
    • January 23, 2016 at 5:09 pm #9400
      filgap
      Participant

      Hi
      I can’t see ur msg, can u plz post it somewhere else bec in my email all codes are converted into Entity Name like this
      add_filter( 'wpmem_sidebar_form', 'my_sb_login_form_placeholders' );

      • January 23, 2016 at 5:19 pm #9402
        Chad Butler
        Keymaster

        The message isn’t all that necessary as I updated the post to include information on using the wpmem_sidebar_form filter.

        https://rocketgeek.com/filter-hooks/replace-form-label-tags-with-input-tag-placeholders/

    • May 23, 2016 at 7:15 am #10115
      liquidesign
      Blocked

      Hello, i used both function. All ok for login form. For registration form all ok, but Email* and Confirm Email are not displayed like a placeholder.
      Here the link:

      http://www.liquidesign.it/softpi/registrati

      Why?

      And for mandatory field don’t appear the symbol *.

      Thanks in advaced,
      best regards
      G

    • May 23, 2016 at 8:09 am #10122
      Chad Butler
      Keymaster

      In 3.1, the HTML5 email field specification was added for email fields. That particular tutorial was written before that so it did not account for the email field type. That’s is why the email and confirm email were not changed like the others.

      I updated the snippet in the tutorial to account for this and I also added to it to add asterisks if the field is marked as required (which it did not check for before).

      Try it out with the changes and that should solve the issues you mentioned.

    • November 22, 2018 at 2:19 pm #16604
      argyrg
      Participant

      When you say “As long as you haven’t made any other modifications via filters, this function will work as-is when you copy/paste it to your theme’s functions.php file:”

      I have filters within my functions.php using other snippets on this site such as sending validation emails and setting up 2 column forms. As part of my troubleshooting I’ve commented out these filters so that only this filter is active.

      The sidebar login widget works but nothing that I do seems to make the registration form work. Where should I start looking next?

      I’m using a storefront child theme and everything is fully up to date.

    • November 22, 2018 at 2:27 pm #16605
      argyrg
      Participant

      Please ignore my previous post. I’d completely missed the register form section, not really surprising that it didn’t work…

      • November 23, 2018 at 7:08 am #16615
        Chad Butler
        Keymaster

        No problem 😉

        Side note – with the register form, it is now possible to create placeholders for the fields directly in the Fields tab (editing the field). You’d still need to filter out the labels, but then you could eliminate the part to make the label the placeholder. Either way is OK, it’s more of a preference thing.

    • November 23, 2018 at 7:23 am #16617
      argyrg
      Participant

      Yes,

      I discovered that when for some reason I had changed the username label to “create your own username” and despite having reset it back to ‘username’ the function wouldn’t put any text into the box so I used the placeholder instead but…

      I then discovered that if I use the placeholder it doesn’t add the asterisk so I have to manually add an asterisk to the placeholder names of the required fields 🙂

      I also discovered that if the order of the fields in the settings/ fields table is different from the order in which the fields are placed in the form then things get decidedly wobbly…

      Russell

    • November 23, 2018 at 9:19 am #16622
      argyrg
      Participant

      Is there a tweak to allow the terms of service label and link to function as expected?

      The tos Field label is displayed twice side by side, once as a link to the TOS page and a second time as a label.

      This is all done in the context of a two column registration form.

      <div class=”div_text”>
      <input name=”tos” type=”checkbox” id=”tos” value=”agree”>
      <span class=”req”>*</span>
      Terms of service
      Terms of service
      </div>

      Thanks in anticipation
      Russell

      • November 25, 2018 at 5:15 pm #16628
        Chad Butler
        Keymaster

        This didn’t get resolved yet did it? If this is still an issue, let me know. Probably best to use contact form if necessary. My guess is this is the result of a filter you’re using so we’ll need to look at that.

    • November 26, 2018 at 3:12 am #16629
      argyrg
      Participant

      Hi Chad,

      I partially resolved the issue by removing this line of code from the original

      $rows[ $key ][‘field’] = $rows[ $key ][‘field’] . ‘ ‘ . $placeholder[ $key ];

      This prevented the second instance of text from being shown.

      The result now is that I have a clickable link which is the field label text. I was hoping to have some thing along the lines of…

      “Please confirm that you have read and agree to our [terms of service label]” Is this achievable?

      Thanks
      Russell

  • Author
    Posts
Viewing 12 reply threads
  • You must be logged in to reply to this topic.
Log In

Ready to get started?

Join Today!

© 2021 · butlerblog.com · RocketGeek is built using WordPress, WP-Members, and the Genesis Framework

  • butlerblog.com
  • WP-Members Support Subscription
  • Terms of Service
  • Refund Policy