Replace form label tags with input tag placeholders

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.

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