Inspired by my Creating Front End Registration and Login Forms and Change Password Form Short Code tutorials, this plugin provides a suite of front end registration and login forms that are a great way to customize the feel of your website, and make it feel more integrated. The plugin includes a short code and widget each for registration, login, and change password forms.
Aside from providing a great piece of functionality that is generally missing from WordPress, the forms included with the plugin are also beautifully designed, and there are several themes to choose from.
Features
- Registration Form
- Login Form
- Change Password Form
- Widgets for Each Form
- Short Code for Each Form
- Data Validation
- Beautiful Error Messages
- Efficient Code
- Plugin Settings Page
- Light
- Dark
- Blue
- Green
- Red
Screenshots
Usage
The plugin is exceptionally easy to use. You can the short codes, and place them in a post, page, or text widget.
The following short codes are provided:
[login_form redirect=”"]
[register_form]
[password_form]
There are also three widgets provide:
- Login Form Widget
- Register Form Widget
- Change Password Form Widget
Changelog
Version 1.0.2 – 02-01-2012:
Updated the Redirect Page option in settings to include private pages
Version 1.0.1 – 01-24-2012:
Added the redirect="" parameter to the login_form shortcode. Added a redirect option to the login form widget. Add a logout link to the login form for users that are logged-in.
As a premium subscriber, the plugin is free to download and use as much as you wish.
Already a premium subscriber? Login below to download this plugin for free
The password reset wasn’t working because the javascript wasn’t transferring the plain text password to the value of the password field. I removed the plain text fields and took out the ID on the passwords so that javascript wasn’t hiding them and all works well.
It might not have been transferring because of a jQuery conflict.
Could you send me the code for this please so that I can get my change password page working?
Thanks,
Nick
The code for what exactly?
Hi, just bought it and I already love it, anyway I tryied to add a few more fields like: phone,address….
I can see them in the registration page but I can’t find them in DB ’cause I don’t know how to write the code to $post the data.
Could you please help me find where have I to add these lines of code so I’ll be able to save more informations about registered users?
Thank you!
If you want to take a look to my code here it is: http://pastebin.com/0Wf1ibMU
Take all of the custom fields out of the wp_insert_user() function and use update_user_meta() instead. You should use update_user_meta() once for each field that you have added, and it should be placed after wp_insert_user(). Does that make sense?
Hi Pippin,
I signed up and downloaded this plugin a few months back, and have been using it on a site i’ve been working on locally – everyhting working great. Today I’ve uploaded everything to the live version and for some reason i’m getting 2 password entry boxes (on the sign in form), and both the registration form and sign in form are missing the field titles…any ideas why this may be?
Thanks, Rhys
It sounds like you have a jQuery conflict. There are actually two password inputs on the registration form, but one of them is hidden. Some jQuery is then used to create the final effect. If you right click, choose Inspect Element (from Chrome or Safari), does it show a red error indicator in the bottom right?
This is what appears in inspect element:
Password
And these are the errors under the error indicator :
Uncaught SyntaxError: Unexpected token . jquery.js:3
Uncaught ReferenceError: jQuery is not defined
No changes were made since the upload of the localhost site, which does;t have any errors…
Thanks for your help
missed off a bit on the error indicator…
element.style {
}
Matched CSS Rules
/category/all/media=”all”
#feralf_login_form #feralf_user_login, #feralf_login_form .password {
margin-left: 25px;
}
/category/all/media=”all”
.feralf_form input[type="text"], .feralf_form input[type="password"], .feralf_form input[type="email"] {
padding: 12px 20px;
color:
#666;
font-size: 100%;
width: 203px;
border: 1px solid
#CCC;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:
white;
}
input:valid, textarea:valid {
}
aside input {
width: 290px;
border: 1px solid
#E5E5E5;
border-radius: 3px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 10px;
margin-bottom: 10px;
color:
#666;
}
button, input {
line-height: normal;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
}
html, button, input, select, textarea {
font-family: sans-serif;
color:
#222;
}
user agent stylesheetinput, input[type="password"], input[type="search"], isindex {
-webkit-appearance: textfield;
padding: 1px;
background-color:
white;
border: 2px inset;
border-image: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
}
user agent stylesheetinput, textarea, keygen, select, button, isindex {
margin: 0em;
font: -webkit-small-control;
color: initial;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: -webkit-auto;
}
Pseudo ::selection element
::selection {
background:
#0C70C0;
color:
white;
text-shadow: none;
}
Inherited from body
body, html {
font-size: 14px;
color:
#666;
font-family: Arial,Helvetica,sans-serif;
}
body {
font-size: 12px;
line-height: 1.4;
}
Inherited from html.js.flexbox.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
body, html {
font-size: 14px;
color:
#666;
font-family: Arial,Helvetica,sans-serif;
}
html, button, input, select, textarea {
font-family: sans-serif;
color:
#222;
}
html {
font-size: 100%;
}
Metrics
Properties
DOM Breakpoints
Event Listeners
Uncaught SyntaxError: Unexpected token . jquery.js:3
Uncaught ReferenceError: jQuery is not defined feralf-scripts.js:1
Yep, you have a jQuery conflict. Can you give me a site URL?
I have tried sending a couple of messages via the contact form on this site, not sure if you have received them though?
Did you send them from this page? http://pippinsplugins.com/contact/
I’m almost done going through all of my emails, but I don’t think I’ve come across yours . . .
I would like to purchase this plugin but I am not willing to put my cc information on a non-encrypted page. Do you have a page (https:) that I can purchase this from?
Sorry about that. I did an update this morning that broke the HTTPS. It has been restored.
I tried to look in the support form for help, but couldn’t find anything covering this plugin.
Anyways, I just purchased the plugin – and it’s awesome. I am restyling some themes to fit my wordpress theme, which isn’t hard at all. Everything is simple to edit and well laid out. I am running into a small problem that has nothing to do with the plugin, but trying to extend it, and I could use some help.
With normal forms, the submit button is inside of it. In my case, I need to submit button outside the form. I have a simply jQuery script that links the outside submit button with the form, and it’s worked in previous cases, but I am having trouble linking the outside submit button, to the login form.
The login and registration forms will be included in separate tabs, and their submit buttons will either switch tabs or submit the forum (if you’re on that current, appropriate tab). I’ve had no issues with this, just explaining why I need the submit button outside the form.
Here is what I am using to join outside submit button’s to their forms:
var loginForm = document.forms['feralf_login_form'];
var loginSubmit = document.getElementById(‘feralf_login_submit’);
loginSubmit.onclick = function(){
loginForm.submit();
}
Here is a submit button that I had previously linked to a submit form:
I found your submit button but I just can’t link them correctly…
<input id="feralf_login_submit" name="wp-submit" type="submit" class="feralf_submit" value="”/>
Thanks
Ryan, thanks for looking in the support forums first. You didn’t find it because apparently I never created the forum for this plugin. I’ve just created it and you can access it here.
I know it’s a pain, but can I get you to repost your question there (now that the forum exists)? It’s just much easier to follow a thread on the forums than in these comments.
Hi,
I’d like to build a personal multilanguage website and, well, it’s almost done but I’ve been struggling a lot trying to set up the user login/registration/activation processes in such a way that users stay always in their chosen language site, while loggin in or regestering, and receive the activation email in their language, that is from their language site and not from the main site (unless the spoke the language of the main site obviously).
The fact that WordPress Multisite ‘runs’ login, registration and activation through the main site, which means only one language, isn’t right for a multilanguage website. Actually it wouldn’t matter at all if users ‘weren’t brought’ onto the main site and didn’t receive an email in the language of the main site..
Does your plugin work with WordPress Multisite (subfolders)?
Can it ‘keep’ users on their sites and let them receive emails in their language, from those sites, when they sign up?
Thanks you..
Best regards,
Luca
Yes, this should work just fine with a multisite setup, and it should add the user to the site they registered on. If you have any troubles with it, I will be happy to help figure them out as well.
I think I have just found a solution to my problem, otherwise it’s good to know that I can always come back and buy your plugin.
Thank you!
Best regards,
Luca
That’s great to hear!
Hi Pippin,
first thanks for a great site.
I’d like to combine your slide down form and this plugin function wise.
Though I will go for a fade in modal look as that is what I have at the moment. The current plugin I use is not maintained and uses standard WP functions (and currently partially broken due to that I think) so I like the extra work to make your own forms/functions/errors.
How about login with email? I’m assuming I just need to compare the user name field with username || email in the wp_users entry.
How about completely and thoroughly hiding the standard WP login backend and admin bar?
Any pointers or hints would be most welcome.
thanks
Bren
Bren,
Adding the ability to login with email is pretty straight forward. You will want to use the get_user_by() function and get the user like this:
Hiding the backend completely is a bit different, and I’ve just advise that you use an existing plugin to do that.
Is there a short code for a front end logout option? Thanks, great product.
No, sorry, not at this time.
Thanks for the reply, however I had no joy with the Widgets or short codes.
Using 3.1.4 and PHP 5.1.6 (on my dev setup)
Will end up at 3.4.2 hopefully after migration
I have a mountain of work to get done on the migration so once that is out of the way I will have another go.
Did they give you an error of any kind?
Is it known if this works for logging into a multisite install also running bbpress and Pippin’s incredibly awesome member only plugin (free version)? specifically, it would be great to have a single point of access for logging in that also provides access to the user’s bbpress creds, member only content etc.
Thanks,
Drew
Yes it does
The button for purchase doesn’t work mate. It just loads.
Hmm, it’s working for me. Can you try again now? I’ve just updated it to double check it’s working.
Hello I bought your plugin and I really liked it. Sorry for bad english, I’m from Russia.
That’s the problem:
How do I remove a redirect when a user logs?
The fact that I only have two pages:
Contacts and Map
And when a user logs throws in the site map or contact.
Or you can make the spread to the home page?
Do you want to redirect users back to the home page after logging in?
“Do you want to redirect users back to the home page after logging in?” – YES
“You will have to modify the CSS for that. Are you comfortable with CSS?” – Yes, I’m familiar with the CSS. I just can not find the line number?
For the login redirect, update your short code to this:
For the CSS, try this:
You might need to adjust the width a little to make it work just right.
And more. Tell me, how do I move the registration form on the center page?
You will have to modify the CSS for that. Are you comfortable with CSS?
Thank you, it worked. Now it is necessary that the registration form was also redirect on the Home Page.
Can I purchase this in codecanyon.net? Your purchase system does not give me much confidence.
You can purchase it from MojoCode. What about my system doesn’t make you comfortable? I’d love to hear it so that I can better improve it.
Would you do customization for this plugin for me? I would like to use the buddypress registration and I would like to have all requests to wp-login redirected to the page this login form will be placed on.
Please let me know if you would be interested in doing customized work.
NO, sorry, I don’t do any customizations at this time.
Hi Pippin,
I’m using your registration login frontend plugin and it works fine !
Some users asked me if it’s possible to add the possibility for them to choose an avatar.
Is it possible to combine choosing an avatar and go on using your plugin ?
Thanks in advance for you answer.
The best thing to do is ask your users to use gravatar.com for their profiles. There is a really nice plugin from 10UP called Simple Local Avatars that would let users upload an image after registering.
OK, I’ll do what you suggest !
Thank you Pippin !
But is it possible to modify something to you front-end registration form so that avatar upload can be managed by the users there instead letting them access the dashboard ?
Yes it’s possible, but it requires a lost of custom PHP and a high level of knowledge of how the WordPress registration / file upload systems work.
hi admin
I want after user logined,still on current post before login
sorry for my bad english…but hope ur undstand
You will want to set the “redirect” input to the URL of the current page.
Wanted to know if with this plugin, people can register, but I have to be able to decide
if they have access or not to our bbpress forum after?
Seems that if i open “registration”, users can have access directly, without approval…
Thanks in advance, Roman
Yes you can do that, though it has nothing to do with this plugin. There is a setting in bbPress that allows you to determine who can access and post in the forums.
Thamks Pippin, effectively, it was the “Default role” settings that i have to turn on “Blocked”.
Like your plugins, lets become a member
Great! I appreciate your membership
Hi, I bought this plugin and have been using it for a while on my site but just now noticed a slight problem. I’m using Buddypress and when users sign up it uses the username field as their full name instead of the First and Last name fields.. Also, I was hoping there was a way to add a birth date field to keep under 13 year olds from joining.
What version of the plugin do you have?
If I have a forced SSL login properly configured for my wordpress blog, do I have to do anything to force this plugin to always use HTTPS to authenticate users?
No.
thanks
Hi
Totally new to wordpress and plugins. Sorry if this is a really silly question but I have uploaded the plugin and activated it, I want to put a login form on a page, how do I do this? Thanks in advance.
Place [login_form] in the main page content of the page you want the form on
I forgot to mention this is what I see above and this may be because I am a free member here but I did purchase the plugin.
Usage
The plugin is exceptionally easy to use. You can the short codes, and place them in a post, page, or text widget.
The following short codes are provided:
Where do I find the shortcodes and how do I put them into a page.
Thank you
Hi there, does this plugin work with Register Plus Redux? I have setup some extra fields for the registration process but they don’t appear on the front end registration form? Is this possible? I noticed on this page there is a registration form with extra fields, was that made with this plugin? Thanks heaps, I’ve bought the plugin and it looks really good but having this feature would make it possible to use on my current project. – Mike
No, sorry, custom fields created through Register Plus Redux will not be added to this registration form.
The registration form on this site is done with Restrict Content Pro.
hello Pippin!
As Karen I’m looking for these shotcodes.
Thx for quick answer, best regards
rE
Did you see the short codes mentioned at the bottom of the plugin details (Above)?
hey!
Thx for answer!
I guess there were only 2 shortcodes [login_form] and [register_form]. Correct?
By the way I don’t see them above.
Is there something more to do after install the plugin and insert the shortcode in a page?
And also [password_form].
Inserting them on the pages is all you need to do.