In Sci & Tech

Wordpress Compare Password Fields

I recently hit a wall with the Contact Form 7 plug in for WordPress. I needed to do something that the plug in is unable to do at this point. It is assumed that you have some clue what I’m talking about and are not afraid of getting into a little bit of hand coding. Backup your work before trying this.

The goal is as follows. Create a form which may be used to compare email address or password fields using the Contact Form 7 for WordPress and report back in real time if the two form elements match. And hide the text that is typed if we are using password fields.

In my case I needed a password field in a form with the ‘password’ type of input field which hides the actual letters with bullets as they are typed. I also needed to compare the contents of the password fields since I would no longer be able to see what I was typing. Contact Form 7 (CF7) doesn’t allow the password type of input field let along field comparison checking. But with a little bit of ‘outside of the box’ thinking I quickly found a way around this lacking feature.

While there are hacks out there which can be applied directly to the CF 7 plug in you will quickly find that whenever you update your plugin’s you need to re-apply your changes.

Here’s the work around.

Simply put, install the “Real-Time Search and Replace” plugin by Marios Alexandrou. You may also see it named as “Real-Time Find and Replace.” Make this plug in part of your regular arsenal of WordPress plugin’s. We also need to add a little bit of JavaScript to the mix.

STEP 1.

Write some JavaScript which will handle the form input field checking and report back the status.

<script type="text/javascript">
   function checkPass(){
      //Store the password field objects into variables ...
      var pass1 = document.getElementById('password1');
      var pass2 = document.getElementById('password2');
      //Store the Confimation Message Object ...
      var message = document.getElementById('confirmMessage');
      //Set the colors we will be using ...
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      //Compare the values in the password field and the confirmation field
      if(pass1.value == pass2.value){
        //The passwords match.
        //Set good color and inform user of correct password
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;

        message.innerHTML = "Passwords Match!"
      }else{
        //The passwords do not match.
        //Set bad color and notify the user.
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
      }
    }
  </script>

STEP 2.

Create your form that has the password fields in it. Be sure to paste the JavasScript from above into the CF7 form editor above your form elements.

Desired Username (required): [text* username]
Email Address (required) [email* your-email]
Password (required) [text* password1]
Confirm Password (required) [text* password2]
Code [captchac code fg:#ffffff bg:#5393b4 size:m]
Re Type Code (required) [captchar code /5]
[submit "Apply"]

Note: the added <span> code which is used to display the status of the comparison of the input fields.

STEP 3.

Use the ‘Real-Time Search and Replace’ plug in to make some modifications to the CF7 form before sending it to the browser.

Navigate to Dashboard > Tools > Real-Time Search and Replace. We will add two entries. Click the ‘Add’ link TWO times in the plug in.

In my example I will use my form names. But you should use your own if they differ from mine or if you are using the CF7 email input type.

In the ‘Find’ field enter:
type=”text” name=”password1″

In the ‘Replace’ field enter:
type=”password”  name=”password1″ id=”password1″

For the second ‘Find’ field, enter:
type=”text” name=”password2″ id=”password2″

For the second ‘Replace’ field, enter:
type=”password” name=”password2″ id=”password2″ onkeyup=”checkPass(); return false;”

Click the ‘Update Settings’ and you should be done.

Now embed your CF7 form short code (example: [contact – form 7 ”Register”]) into your page, publish,  and take a look at it.

I am using this same bit of code on a project which can be seen here:
http://www.walshtrails.com/register

Recommended Posts
Showing 35 comments
  • John Crumpton
    Reply

    Great tutorial, thank you!

    Bizarrely the plugin is called Real Time Find and Replace in the wordpress repository, however once installed it’s Real-Time Search and Replace

    http://wordpress.org/extend/plugins/real-time-find-and-replace/

  • Arkanos
    Reply

    Hi.
    I’m sorry, but I follow every step to validate 2 mail fields, but it can’t work for me.
    Any suggestion?

  • Toni
    Reply

    Hi,

    I’m trying to figure out where to put the javascript code. When you say Be sure to paste the JavasScript from above into the CF7 form editor above your form elements. Are you refering to the page where you edit the contacts form fields?

  • Toni
    Reply

    Opps i figured it out after i confused myself!!!!!!!pls disregard. Great plugin!!!!

  • brett
    Reply

    hello

    im trying to implement this hack – i’ve even used the demo you’ve provided.

    basically no box is popping up to tell me the fields are wrong (or right).

    any help would be greatly appreciated

  • Dragos
    Reply

    Sorry, but with WordPress 3.1.2 it doesn’t work. It transforms the fields in password fields, but it doesn’t validate. And also, I think your code is wrong for the second Find field. If I write it like it is, it doesn’t do the replacement. If I cut the id atribute, and maintain it only for replacement, it shows the second field, too. But it doesn’t match the two passwords, no matter what I do.

    Any ideas?

  • Tom
    Reply

    This mod does work with the latest version of WordPress. I suspect there is probably a javascript conflict with your theme or a plugin you are using. It is up and running here http://www.walshtrails.com/register without any errors.

    Do you have a site I can look at?

    -Tom

  • Felix Maier
    Reply

    you forgot the

    onkeyup=”checkPass();

    in your tutorial

  • Tom McGuire
    Reply

    Felix, You are absolutley correct. I had added the onkeyup in the code that is in place but failed to add it to this tutorial. Great find. Please see above for the addition/correction.

  • Laimis
    Reply

    The quotation marks in your code are different:

    type=”text” name=”password1″

    should be ”

    type=”text” name=”password1″

    The code worked for me only when changed to the latter quotation marks.

  • Michael
    Reply

    Works great as a way to confirm a user’s email. Thanks so much!

  • Kim
    Reply

    wow! really nice plugin… can solve a lot of little fixes without touching the plugin-code itself 🙂 thx mate!

  • Max W
    Reply

    I have tried this with no luck.
    The password text field is showing up as *** (dots) when something is typed in but the validation is not working.
    Can someone confirm this works with the latest wordpress and CF7?

    The code I have put in my form is the same as above:

    function checkPass(){
    //Store the password field objects into variables …
    var pass1 = document.getElementById(‘password1’);
    var pass2 = document.getElementById(‘password2’);
    //Store the Confimation Message Object …
    var message = document.getElementById(‘confirmMessage’);
    //Set the colors we will be using …
    var goodColor = “#66cc66”;
    var badColor = “#ff6666”;
    //Compare the values in the password field and the confirmation field
    if(pass1.value == pass2.value){
    //The passwords match.
    //Set good color and inform user of correct password
    pass2.style.backgroundColor = goodColor;
    message.style.color = goodColor;

    message.innerHTML = “Passwords Match!”
    }else{
    //The passwords do not match.
    //Set bad color and notify the user.
    pass2.style.backgroundColor = badColor;
    message.style.color = badColor;
    message.innerHTML = “Passwords Do Not Match!”
    }
    }

    Desired Username (required): [text* username]
    Email Address (required) [email* your-email]
    Password (required) [text* password1]
    Confirm Password (required) [text* password2]
    Code [captchac code fg:#ffffff bg:#5393b4 size:m]
    Re Type Code (required) [captchar code /5]
    [submit “Apply”]
     

  • Becky
    Reply

    This works great except that when my passwords do not match the form still submits. Any ideas?

  • Martin
    Reply

    Excelente explicación!!!, me fue muy útil. Gracias, Martín

  • Sherry
    Reply

    Thank you! I was able to follow your instructions get this working for email fields (not passwords) on the enquiry forms for our campervan hire business in Australia – you can see it working on any of the ‘Get a Quote’ buttons on our vehicle pages at campervan-australia-hire.com – hopefully no more invalid emails coming though. Thanks for taking the time to post this tutorial!

  • Mike White
    Reply

    @Tom – you just gave me 1.5 hours back into my life. #impactinglives – Thanks a ton!

    Mike White
    Urban Shuffle
    urbanshuffle.com

  • Travis Naughton
    Reply

    Awesome code. thanks. Also note if you want you can copy the HTML CF7 displays in the code view of the site. copy and past into your template and you can make as many changes as you want to the form. only downside is if you change info in the wp backend it obviously wont take effect on your form.

  • kansas
    Reply

    Thanks for the code it works great!

    I have a question:
    I would like to have only one password field that is checking only one pre-chosen password.
    So if the password is correct it should work.
    And the password should not be case sensitive (e.g. wordpress and WordPress should work).

    At the moment I’m using your code
    if(pass1.value == pass2.value){…

    Thats the completely code:

    Would appreciate help. Thanks a lot

    • Pinwire
      Reply

      You could set Pass1 to a hidden field with the value of your real password. The problem with this is that the source password hard coded in the javascript which would NOT be secure at all. I would recommend a completely different approach / solution.

  • kansas
    Reply

    Thank you pinwire for your answer.

    I’m using Pass2 as a hidden field already with a value.
    It will be compared with the typed in password in Pass1.
    But how can I make it not case sensitive?
    Or how can I use two different passwords?

    If there is no solution what other solution could you recommend me?

    Thanks

  • Jimmy
    Reply

    Unfortunately this doesn’t work anymore. I followed all the steps exactly 3 times now and nothing seems to change.

    • Pinwire
      Reply

      It still works. There is probably a conflict with a plugin or your theme.

  • Christian Suter
    Reply

    I do not quite understand where I place the javascript code
    I saw your example and is exactly what I need

    Could you explain where you insert the code
    thank you very much
    cordially

    Christian Suter

  • george
    Reply

    I’ve tried two different themes and I can’t get it to disquise the 2nd password field. I also can’t get the verification for 2nd password to work. See this link: http://www.groovecreative.com/test-form-1

    any ideas?
    (please excuse my styling of the form, trying to get functionality first)

    • george
      Reply

      ok, I noticed that deleting the [ id=”password2″ ] from the 2nd “Find” field of Real-Time Find and Replace plugin, it disguised the 2nd password now. However, it still does not live verify

  • Surgeon
    Reply

    The Real-Time Search and Replace plugin definitely doesn’t work with the latest version of WordPress (3.5). After much experimenting, I found out that I had to downgrade to WordPress 3.1 and Contact Form 2.4.6 in order for the plugin to work as per abovementioned. Obviously this is not ideal due to the inherent bugs and instability of the older versions, so the author of the RTS&R plugin needs to be contacted and advised that the plugin is buggy.

  • Ben
    Reply

    Tom,
    Is there a way to simply hide the input in a field from Contact Form 7 without requiring double password entry and verifying one against the other?

  • Tom
    Reply

    There is a plugin which extends the functionality of CF7 which can be found here: http://wordpress.org/plugins/contact-form-7-modules/installation

    I haven’t tried it, but the developer says it will allow you to create hidden input fields among other things.

    -Tom

  • Matt
    Reply

    Thank you for providing this tip! I used it to successfully add a “Verify Email” entry on a CF7 form.

    For some reason, I got some paragraph tags () inside the JS code, which didn’t work too well, of course. I fiddled around with some stuff I had commented out (I didn’t need the message), and I got the paragraph tags to go away. Namely, I changed some comments from // to /* … */.

    I would like to know why they were inserted, though, for future reference. Any ideas?

  • Franco
    Reply

    Hi Tom,
    works fine 😉 Thanks for sharing it with us.

  • Rogair
    Reply

    Hi Tom you mention your form names in your tutorial and say to use your own form names…where exactly were they in your code? I thought I only see field names.

    • Pinwire
      Reply

      By form names.. I meant form element names. This demo is for a VoIP service..so you would of course want to use your own.

  • Joe
    Reply

    Hi,

    I’m really trying to get this working for email validation, but it keeps returning an error. I see this: ‘Note: the added code which is used to display the status of the comparison of the input fields.’ in your notes above, but see no additional code, only a ? in a diamond… is something missing.

    Do the email fields need to be of type ‘text’ to work?

    Thank you
    – Joe

  • weber
    Reply

    Dont worked for me… the js script breaks my website…

Leave a Comment

Start typing and press Enter to search

Do NOT follow this link or you will be banned from the site!