The Login & Signup form element is available when you have OptimizeMentor installed and activated. OptimizeMentor is part of our Suite & Agency plans.
If you have a membership site and would like to have a fully customizable login form, or signup form, you can add the Login and Signup Form element to your page. This element is new as of February 2022 in OptimizeBuilder version 1.1.24
We’ll have a video walkthrough on this element soon, but in the meantime you may read the guide below for an overview of all the features built into this awesome element.
How to add the Login and Signup Form element to your page
To add the element, simply click on one of the “+” icons either in the page builder or on the top left of the page builder.
You can then search for it by typing “login” into the search box on the element sidebar
Once you locate the element, just click and drag it to the spot you want to add it to.
After you add the element, you can pick a design (there is currently just one at the time of writing this guide). In the future if you want to select a different design, you can just click the magic wand icon in the inline element toolbar.
Login and Signup Form element Wizard
To configure the settings of the Login and Signup Form element, click the envelope icon in the inline element toolbar, and then click “Edit Integration.” Then, you’ll be walked through a series of screens in a popup step by step setup wizard to select what features you want activated.
On the first screen, you’ll choose which form (or both) that you want to use.
Then you can choose the Login Form Fields (whether you want the “remember me” feature. The Remember Me feature keeps someone signed in for up to 2 weeks, or longer depending on your site setup and configuration as well as security features you have.
On the next screen, you can edit what Signup Form Fields you would like to have. Minimum required is Username, email, and Password.
The Login Post Action screen in the wizard is where you’ll find the settings to determine what happens after someone logs into the site using this form.
In some advanced setups, the login form could be on the same page that has hidden membership content. Refreshing the page in that case will then make that content available if the user should have it. Otherwise, just redirect to your membership dashboard or course page from here.
The Signup Post Action screen you can select what happens after someone is registered using the signup form. You can refresh the page or redirect – and you will also select what user role to add them to.
The last screen is a summary of your settings. Just click the green “close” button to save the options and return to the inline element toolbar.
Before we dive into the options you will see in the inline element toolbar, it should be noted that there are actually multiple elements within this element. Click on the links below to open those guides in new tabs in case you would like to see how those work. Since these live within this element, you can not move, clone, or delete them, nor edit some advanced settings, however the rest of the editing options are available.
The “Log into Your Account” text is a Headline Element
The Button is essentially a Button Element.
The text with links below the button is our Text (Paragraph) Element
Login and Signup Form Element Options
The inline toolbar can be accessed by clicking into the element and then clicking either the up arrow on the toolbar you see, or clicking the “Login and Signup Form” link in the breadcrumb at the top of the editor. For example, if we click on the button, you’ll see we can access the main inline toolbar easily
Now you should see the inline element toolbar.
The first icon in the inline toolbar is for the preset design (as mentioned above). Here you can choose which design you want (at the time of this article was written, only one design was available) .
The next icon, the envelope icon, is used for being abled to edit the form options (see section above titled “Login and Signup Form element Wizard” for how that works.
The next option in the inline toolbar is to change the state of the element so you can see what it will look like, and also be able to edit those options as well. You can edit each of those separately, however some settings will be the same for all element states.
You can also set the form styling (width, field layout, and alignment) on the Form Styling tab
The Field Sizing tab allows setting the default field width, as well as the gaps between the fields.
To set the form background color (solid or gradient) click the color icon
You can also set the borders and shadows by clicking the border icon
You can 1) reposition the element, 2) clone, 3) or Delete the element if you like.
The settings icon will allow you to add space above and below the element, as well as align the element.
You can also open the advanced element options sidebar from there as well by clicking the blue “Advanced Options” button
Advanced Options Sidebar
In the Advanced Options Sidebar, you’ll be able to edit the Fields order and whether a field is hidden or not.
See here how to re-order the fields by clicking on them and moving them around (and also how to hide/unhide a field).
You can also adjust the Padding and Margin of the form. click on either the dashed or solid line and drag the padding/margin with your mouse – or just type in the numbers you want to use.
You also have the same options here like most elements where you can modify the Responsive behavior, setup animations and delay, as well as other advanced options.
Editing the form fields
You an click on any field in the form and change its options as well. You can change the text, colors, and other settings quite easily. We won’t go into details here on these as the field options work the same as the field options on the optin form and contact form elements.
Frequently Asked Questions
Why can’t I choose a member level for Wishlist Member or other membership plugins on this form?
The registration form can only add a user to a specific user role. Not all membership plugins utilize the user roles in WordPress in the same way. Wishlist and other plugins do add all users to the “Subscriber” role and then have their own capabilities for each membership level. We may add specific options for membership plugins in the future but currently we would suggest using the built in registration forms on those plugins, or use our checkout forms to add buyers to the levels you want.
Can I add custom fields to these forms?
This is actually quite an advanced form, unlike any other login form features in any other WordPress plugin. As such, in order to not over complicate these options, and keep things simple, we do not support custom fields at this time.
If you require any further help with this, or any other elements please reach out to our support team and they’ll be happy to help anytime during the normal work week