Every time when I develop a WordPress site, I am yet again left searching for the best WordPress contact form plugin. While most of the WordPress themes have built-in contact forms. Sometimes it’s often better to create your own contact form with a WordPress plugin because a good contact form gives your website a professional appearance.
It helps you manage your online communication with your clients or visitors.
Contact form 7 is one of the best and most popular plugin.
Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup.
I used this plugin for one of my client’s project. Added some contact forms and found that the password field is missing. Then I searched the google and found some codes to add a password field in contact form 7.
In this tutorial, I am going to share how I managed to get a password field in contact form 7.
I found a function by which we we can get the password fields in Contact Form 7.
Get Password Fields In Contact Form 7
First of all add this below code to your theme’s functions.php file.
function cfp($atts, $content = null) {
extract(shortcode_atts(array( "id" => "", "title" => "", "pwd" => "" ), $atts));
if(empty($id) || empty($title)) return "";
$cf7 = do_shortcode('Error: Contact form not found.
');
$pwd = explode(',', $pwd);
foreach($pwd as $p) {
$p = trim($p);
$cf7 = preg_replace('/<input type="text" name="' . $p . '"/usi', '<input type="password" name="' . $p . '"', $cf7);
}
return $cf7;
}
add_shortcode('cfp', 'cfp');You may also be interested in these articles:
Now we create a form with contact form 7 plugin with the following three fields:
username
email and
password
<p>Your Username (required)<br />
[text* username] </p>
<p>Your Email (required)<br />
[email* email] </p>
<p>Your Password<br />
[text* password] </p>
<p>[submit "Register"]</p>Now if we hide password field of the contact form then write following short code into your post:
[cfp id="7" title="Test" pwd="password"]Remember to change the ‘id’ and ‘title’ value according to your form.
That’s it, we have created a password field in contact form 7 plugin. Please comment if you have any queries.
Thanks for the tip on this. I’ve looked at several other solutions and this was the simplest to implement. I’ve got it working, but my question is,what if I wanted two different password fields in the same form?
For example, I have a form that asks for FTP login credentials and then also WordPress Admin login credentials. The input for each password field would be different, but I would like to mask them both in the same form. Any ideas how I could go about that? Thanks in advance!
hello,
I need help in adding password field
i added the code in themes functions.php but password file showing text type and unable to generate the password field
in shortcode, insted of [contact-form-7 id="... ], use [cfp id=” …. ].
This is absolutely correct. Thanks a lot!
[cfp id=”28″ title=”Contact form 1″ pwd=”password”] where to put this code???
Do you have code to handle password validation for this solution?
i added the code in function but could find password field…. any help ??thankx in advance
Your comment is awaiting moderation.
Here is the new plugin .
this the really helpful for login with contact form 7.
http://jquerybuilder.com/product/frontend-login-contact-form-7/
Hello, can i use this trick with password an confirm_password ?? i want to pass two password fields to this function, how can i do please ??
use this for password and confirm password.
http://1000hz.github.io/bootstrap-validator
Password Fields for ContactForm7
This short trick is working, use CF7 text field shortcode for password
[text password]
[text your-password]
[text my-password]
Code –> https://github.com/gmkhussain/wordpress#user-content-pwd4cf7
Thanks Poonam for the post! Unfortunately I didn’t get it to work with the given shortcode.
Question to @GMK Hussain: I’m trying to implement the password field with the shortcodes you provided. In the github page it says the following:
//Add this jQuery code in footer file. * Tested is working.
jQuery(“[name*=’password’]”).attr(“type”, “password”);
Where do I have to insert that code?!
Thanks!
Hi ,
Where do we have to put [cfp id=”7″ title=”Test” pwd=”password”] ?
Thanks
actually after adding a pssword in contactform7 i need to add a login form for that that registered profile wt should i doo
Hi i have added code in unctions created new form but i keep get [contact-form-7 404 "Not Found"].
What do i need to do. Thanks
I’m not sure if you have figured this out already.
Try changing the function in your theme’s functions.php file.
/* Add field type password in contact form 7 */
function cfp($atts, $content = null) {
extract(shortcode_atts(array( “id” => “”, “title” => “”, “pwd” => “” ), $atts));
if(empty($id) || empty($title)) return “”;
$cf7 = do_shortcode(‘[contact-form-7 id="' . $id . '" title="' . $title . '"]‘);
$pwd = explode(‘,’, $pwd);
foreach($pwd as $p) {
$p = trim($p);
$cf7 = preg_replace(‘/<input type="text" name="' . $p . '"/usi', '<input type="password" name="' . $p . '"', $cf7);
}
return $cf7;
}
add_shortcode('cfp', 'cfp');
I really like and appreciate your blog post. Much thanks again. Will read on…
please help me for showing password.
i tried all above but no luck.
please help i’m new to new to wordpress.
I have tried all above but still password is visible in text format.
thanks in advanced.
not working this code it is best time of using this blog