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.
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.
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:
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: