{"id":113461301,"date":"2024-03-25T13:04:24","date_gmt":"2024-03-25T11:04:24","guid":{"rendered":"https:\/\/thrivethemes.com\/?post_type=ht_kb&#038;p=113461301"},"modified":"2025-10-31T10:26:04","modified_gmt":"2025-10-31T08:26:04","slug":"using-the-login-registration-form-element-in-thrive-architect","status":"publish","type":"ht_kb","link":"https:\/\/thrivethemes.com\/docs\/using-the-login-registration-form-element-in-thrive-architect\/","title":{"rendered":"Using the Login &amp; Registration Form Element in Thrive Architect"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Use the Login &amp; Registration Form Element in the Thrive Editor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/wy8en7j0lsc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This article will explain how to use and customize the &#8220;Login &amp; Registration Form&#8221; element from <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/architect\" target=\"_blank\" rel=\"noopener\">Thrive Architect<\/a>.<\/p>\n\n\n\n<p>This element is useful in situations where you want to offer the users the possibility to register and login to your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"add-the-element-to-the-postpage\">Add the Element to the Post\/Page<\/h3>\n\n\n\n<p>Firstly, you need to add the element to the page, in the Thrive Architect editor. For that, click on the <b>plus sign<\/b> from the right sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/0.plus-sign.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Then, in the list of elements that opens, look for the <b>&#8220;Login &amp; Registration Form&#8221; <\/b>element, or type its name in the search bar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/1.add-element.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>After you find the element, <b>drag and drop<\/b> it on your post or page, in the editor, where you best see fit:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/2.drag-and-drop.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>As soon as you add the element to your page, a new pop-up will open from where you have to <b>choose the template<\/b> for your \u201cLogin &amp; Registration Form\u201d:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/3.choose-template.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Once you do that, you can start using the options of the element (from the left sidebar) to customize it in the manner that fits your website:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/25.login_.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h_dd6cf4278d\">Choose the Template<\/h3>\n\n\n\n<p>If you take a look at the options from the left sidebar, you can see that the first section is the <b>&#8220;Template Options&#8221;<\/b> one. You can use this option if you want to pick another template from the library. Click on the field next to the option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/26.login_.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>This will open the same pop-up from where you initially selected the template. Decide on the one that you like the most, and once selected, click on <b>\u201cReplace Template\u201d<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/6.replace-template.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Note: <\/b><i>If you want to replace the template, make sure you do this before adding any content or customize the existing content of the \u201cLogin Form\u201d element. This is because, when changing the template, all the initial content and modifications will be lost.<\/i><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-the-colors-type-and-edit-form-elements-options\">Choose the Color<\/h3>\n\n\n\n<p>After choosing the template, you can proceed with changing the color of your element:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/8.colors.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Note:<\/b> <i>In case you&#8217;re using Smart Landing Pages or <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/themebuilder\/\" target=\"_blank\" rel=\"noopener\">Thrive Theme Builder<\/a>, you will have an extra option here:<b> &#8220;Inherit smart colors&#8221;<\/b>. If activated, the color of the element will match the smart color, set for the Landing Page\/Thrive Theme Builder Template.<\/i><\/p>\n\n\n\n<p><i>If the color toggle next to &#8220;Inherit page smart colors&#8221; is switched off, just as in the example above, then the &#8220;color field&#8221; box will become available in the sidebar.<\/i><\/p>\n\n\n\n<p>Click on the <b>\u201ccolor field\u201d<\/b> and, from the color picker choose the desired shade of color or insert a HEX\/RGB code. Once done, click on <b>\u201cApply\u201d <\/b>to save your changes:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/9.color-picker.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Note: <\/b><i>the \u201cColors\u201d option is only available for certain templates, so if you want to use this option, make sure to choose a template from the library that comes with this feature.<\/i><\/p>\n\n\n\n<p>The next button available in the \u201cMain Options\u201d sidebar is the <b>\u201cEdit Form Elements\u201d<\/b>. From here, you can edit various states of the form. For example, you can edit the way the form looks like in the normal state, in the &#8220;Password Recovery&#8221; state, or in the situation where someone is already logged in.<\/p>\n\n\n\n<p>However, <b>before proceeding with explaining the \u201cEdit Form Elements\u201d<\/b> button, we should<b> look into the form \u201cType\u201d <\/b>and what it implies.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"type\">Type<\/h4>\n\n\n\n<p>The <b>form \u201cType\u201d <\/b>is located in the same sidebar, right under the \u201cEdit Form Elements\u201d button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/27.login_.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>There are three different options you can choose from here, and they represent the type of form you would like to have displayed on your website, for your visitors. Depending on what you choose here, they can either see a &#8220;Login&#8221; type of form, or a &#8220;Register&#8221; type of form, each of them having different proprietis.<\/p>\n\n\n\n<p>You can also choose to display both, and this option covers the features available for the &#8220;Login&#8221; and &#8220;Register&#8221; types.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-the-edit-form-elements-option\">Use the Edit Form Elements Option<\/h3>\n\n\n\n<p>The options available when clicking on \u201cEdit Form Elements\u201d will be different depending on what type of form you have selected: <b>\u201cLogin\u201d, \u201cRegister\u201d or \u201cBoth\u201d<\/b>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"login-form-type\">Login Form Type<\/h4>\n\n\n\n<p>The \u201cLogin\u201d form type is how the form looks on the page <b>when the user already has an account<\/b> and just wants to log in.<\/p>\n\n\n\n<p>Make sure this form type is selected and then go ahead and click on the <b>&#8220;Edit Form Elements&#8221;<\/b> option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login_.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>When you do that, you will be taken into the<b> &#8220;Edit Mode&#8221;<\/b> of this element. You can edit various states of the form.<\/p>\n\n\n\n<p>By default, when entering the &#8220;Edit Mode&#8221;, you will be customizing the &#8220;Login Form&#8221; state. If you want to change the state that you are editing, click on this field, from the bottom side of the editor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>When you click on that, a list will open, with all of the available states that you can customize. Select the one that you want to edit, by clicking on it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Here are the options from each state:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Login Form State<\/b> <\/li>\n<\/ul>\n\n\n\n<p>When selecting the \u201cLogin Form\u201d state, the following options will become available in the left sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<ol class=\"wp-block-list\">\n<li> <b>Remember me<\/b> <\/li>\n<\/ol>\n\n\n\n<p>The <b>\u201cRemember me\u201d <\/b>feature let\u2019s you decide whether you want this text to appear in the form or not:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-5.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>&nbsp;If the toggle is enabled, then the option will appear on the form as well:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-6.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>2. <b>Show labels<\/b><\/p>\n\n\n\n<p>The same applies to the<b> \u201cShow labels\u201d <\/b>toggle:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-7.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If the toggle is activated, then the username\/email and password labels will be shown in the form:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-8.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>3. <b>Edit the form fields<\/b><\/p>\n\n\n\n<p>Going forward, you can choose whether you want to edit the actual form fields. Click on the <b>pencil icon<\/b> next to the element you want to edit:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-9.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>This will open <b>a small pop-up<\/b>, where you can change the placeholder and label text, as well as some other settings. Here is how to use all of the options from this pop-up:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><b>Pop-up Options<\/b><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-10.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You will notice that the <b>\u201cRequired\u201d<\/b> toggle is not clickable &#8211; this is because certain labels, such as the ones containing the \u201cemail address\/username\u201d and the \u201cpassword\u201d are mandatory by default when logging into an account.<\/p>\n\n\n\n<p>The last available option here is the <b>\u201cAutofill settings\u201d<\/b> one:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-11.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you open the drop-down, you will be able to choose the dynamic data which should be filled automatically:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/11.login-12.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you want to learn more about how to set it up and use it, you can read <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425862-how-to-use-the-smart-complete-feature\" target=\"_blank\" rel=\"noopener\">this dedicated article<\/a> from our knowledge base.<\/p>\n\n\n\n<p>When you finish customizing all of the options from this pop-up, click on<b> &#8220;Apply&#8221; <\/b>to save everything:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>4.<b> Edit each field individually<\/b><\/p>\n\n\n\n<p>Lastly, on top of the already explained option, you should keep in mind that each item from the form<b> is also editable<\/b> and <b>customizable<\/b>.<\/p>\n\n\n\n<p>You just have to select that individual element and customize it as you would do with any other Thrive Architect element.<\/p>\n\n\n\n<p>If we take the <b>\u201cRemember Me\u201d <\/b>checkbox as an example and select it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/remember-me-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You will notice in the left sidebar that you can change the color, the default style from a list of templates and the size of it, editing the checkbox as an individual element:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/remember-me.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Check out <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425905-how-to-set-up-the-checkbox-custom-field-type\" target=\"_blank\" rel=\"noopener\">this article<\/a> if you need help editing the <b>&#8220;Checkbox&#8221; type<\/b> of custom field.<\/p>\n\n\n\n<p>5. <b>Use the Dynamic Links feature<\/b><\/p>\n\n\n\n<p>Another feature you can use here is the <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425851-how-to-use-the-dynamic-links-feature-in-thrive-architect\" target=\"_blank\" rel=\"noopener\">\u201cDynamic Links\u201d<\/a> for all \u201cText\u201d elements.<\/p>\n\n\n\n<p>You can select a text link such as the <b>\u201cSign Up\u201d <\/b>one:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/sign-up.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>On the edit panel located on the upper side of the screen, select the \u201cLink\u201d option and then the \u201cDynamic\u201d feature:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/sign-up-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Now, from the drop-down field, you can insert the action that should be linked to the selected text (and which corresponds to the \u201cLogin Form\u201d, in this example):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/sign-up-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You can learn more about how \u201cDynamic Links\u201d work <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425851-how-to-use-the-dynamic-links-feature-in-thrive-architect\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<p><b>Important!<\/b><\/p>\n\n\n\n<p><i>The \u201cDynamic Link\u201d feature cannot be used for the \u201cButton\u201d elements located within the forms.<\/i><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Password Recovery State<\/b> <\/li>\n<\/ul>\n\n\n\n<p>The next state is the<b> &#8220;Password Recovery&#8221; <\/b>one. You can customize the form that the users have to fill in when they want to recover their password:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/12.password-recovery.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You can edit the form fields from the left sidebar. The options are fewer but identical to the ones described above for the \u201cLogin Form\u201d state:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/12.password-recovery-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Feel free to also use the rest of the general options from the left sidebar, for even further customization:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Password Recovery Confirmation State<\/b> <\/li>\n<\/ul>\n\n\n\n<p>The third state from the list is the one where the users are informed about the instructions for recovering the password.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/13.password-recovery-confirmation.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>This state does not have any particular options in the left sidebar, but you can select each element of the form directly from the editor, and customize it as you prefer:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/13.password-recovery-confirmation-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Already Logged In State<\/b> <\/li>\n<\/ul>\n\n\n\n<p>Lastly, you can customize the form that appears in the situation of someone already being logged in on the website:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/14.already-logged-in.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Again, every aspect of the form is visually editable, so you can easily modify the aspect of this form:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/14.already-logged-in-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>After you finish customizing each state, you can click on the orange &#8220;Done&#8221; button to go back to the element options:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/15.done_.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"register-form-type\">Register Form Type<\/h4>\n\n\n\n<p>Going back to the \u201cMain Options\u201d sidebar, we will proceed with seeing what options are available for editing for the \u201cRegister\u201d form type:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/16.register.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Entering the <b>&#8220;Edit Mode&#8221;<\/b> will allow you to customize the form states. If you want to change the state that you are editing, click on this field, from the bottom side of the editor:<\/p>\n\n\n\n<p>By default, the <b>\u201cRegistration Form\u201d<\/b> one is selected:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/16.register-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Registration Form State<\/b> <\/li>\n<\/ul>\n\n\n\n<p>When selecting the \u201c<b>Registration Form<\/b>\u201d state, the following options will become available in the left sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/16.register-4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>&nbsp;1. <b>Show labels<\/b><\/p>\n\n\n\n<p>This feature will allow you to hide or show the labels of the fields:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>2. <b>Add one or multiple connections<\/b><\/p>\n\n\n\n<p>After this, you have the connection settings, from where you can <b>add multiple connections<\/b> to the already existing one:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/16.register-6.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>The WordPress account is <b>added by default<\/b> and cannot be removed (it\u2019s mandatory for registration forms because this connection is required for the account creation).<\/p>\n\n\n\n<p>If you want to add a new connection, click on the blue <b>\u201cAdd Connection\u201d<\/b> button and proceed just like you would do for a \u201cLead Generation\u201d element (all steps are detailed in the \u201cAPI Connection\u201d in the article linked <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425779-how-to-use-the-lead-generation-element\" target=\"_blank\" rel=\"noopener\">here<\/a>):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/16.register-7.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Note:<\/b> <i>this comes in handy if you want to automatically add the newly registered users to a mailing list. This way you can send emails just to the ones that are registered on the site.<\/i><\/p>\n\n\n\n<p>From the next section available in the left sidebar, you can <b>add<\/b>, <b>edit (pencil icon) <\/b>or <b>remove (trash icon) <\/b>form fields:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/16.register-8.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You will notice that some fields, such as the \u201cEmail\u201d and \u201cPassword\u201d ones cannot be deleted, as they are mandatory fields.<\/p>\n\n\n\n<p>However, you can remove others or <b>add new ones<\/b> (depending on what kind of information you would like to capture during registration).<\/p>\n\n\n\n<p>We do have a separate article in which we&#8217;ve explained<b> how to add and customize each type of custom field,<\/b> and you can find it <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425882-how-to-add-a-custom-field-to-the-lead-generation-element\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<p>After you\u2019re done setting up the fields, you can proceed with setting up the <b>\u201cHidden Fields\u201d<\/b> option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>It can be added to the registration form and will behave as per the existing \u201cLead Generation\u201d form. You can find out more about <b>how to set up hidden fields<\/b> in <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425907-how-to-set-up-the-hidden-custom-field-type\" target=\"_blank\" rel=\"noopener\">this article.<\/a><\/p>\n\n\n\n<p>Lastly, the<b> \u201cAdvanced\u201d settings<\/b> of the form consist of the following options: <b>\u201cEnable asset delivery\u201d, &#8220;Form identifier&#8221;<\/b> and<b> \u201cCaptcha spam prevention\u201d<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/assetdelivery-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Here are some resources to help you understand how to use these options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <a class=\"intercom-content-link\" style=\"font-weight: var(--g-regular-weight, normal);\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4430207-asset-delivery-feature-automatically-send-download-links-to-new-subscribers\" target=\"_blank\" rel=\"noopener\">Asset Delivery Feature<\/a> <\/li>\n\n\n\n<li> <a class=\"intercom-content-link\" style=\"font-weight: var(--g-regular-weight, normal);\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425569-how-to-set-up-recaptcha-for-thrive-forms\" target=\"_blank\" rel=\"noopener\">How to Set Up ReCAPTCHA for Your Thrive Forms<\/a> <\/li>\n<\/ul>\n\n\n\n<p>The &#8220;Form identifier&#8221; allows you to easily and quickly search for this form in Thrive Ultimatum, simply by pasting this code in the form field.<\/p>\n\n\n\n<p>All of these work as per the \u201cLead Generation\u201d element set up in the \u201cAdd Connection&#8221; section.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"edit-error-messages\">Edit Error Messages<\/h4>\n\n\n\n<p>After clicking on this option you will see a pop-up window open with <b>various types of error messages<\/b> that you can customize.<\/p>\n\n\n\n<p>You can replace the default messages by typing in the messages that you want your users to see if they do not fill out the respective fields correctly:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:1024\/h:243\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/edit-error-message-1024x243.png\" alt=\"\" class=\"wp-image-113474593\"\/><\/figure><\/div>\n\n\n<p>You also have the option of adding an additional error message called <b>\u201cSignup failed\u201d<\/b>. If you activate this option you will be able to set one more error message for the rare cases when the sign-up will fail.<\/p>\n\n\n\n<p>Just type in the message you want to show in these cases in the field that appeared with the default \u201cError\u201d text:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:1024\/h:282\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/signup-failed-message-1024x282.png\" alt=\"\" class=\"wp-image-113474594\"\/><\/figure><\/div>\n\n\n<p>After you have finished setting up the error messages, click on the \u201cSave\u201d button to change them and apply them to the element.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>Already Logged In<\/b> <\/li>\n<\/ul>\n\n\n\n<p>The second state of this form is the <b>\u201cAlready Logged In\u201d<\/b> state, from where you customize the form for someone who is already logged in on the website:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/17.already-logged.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Once more, after you\u2019ve set up all the states for the \u201cRegistration\u201d form, click on \u201cDone and exit to the initial \u201cMain Options\u201d sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/15.done_-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"both-form-types\">Both Form Types<\/h4>\n\n\n\n<p>The last type of form that you can set in the \u201cMain Options\u201d sidebar is the \u201cBoth\u201d type of forms to be displayed:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration5.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Furthermore, you will notice a <b>\u201cDefault state\u201d<\/b> drop-down appeared right underneath the \u201cType\u201d field, from where you can select the default state that appears first when entering the \u201cEdit Form Elements\u201d mode:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration6.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Now, to enter the &#8220;Edit Mode&#8221; for the &#8220;Both&#8221; type, click on &#8220;Edit Form Elements&#8221;:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/Login-and-Registration7.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>In the editor, you will be able to set up the same states that have already been detailed above, only this time, they are all together in the same drop-down:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/18.both-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>The options from the left sidebar will correspond to the state you select here. So, as the \u201cRegistration Form\u201d was set as the default one, the left sidebar will have the corresponding options:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/18.both-4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>All five states are already described above, so don\u2019t hesitate to go through them again if you need additional information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-the-group-styling-feature\">Use the Group Styling Feature<\/h3>\n\n\n\n<p>There\u2019s one more thing you can edit here, before going back to the initial \u201cMain Options\u201d sidebar. If you click on <b>&#8220;Form State&#8221;<\/b> in the breadcrumbs when an item of the form is selected, you will be taken to some more options for this form:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/19-grouped-styling-0.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>&nbsp;&#8220;Group Styling&#8221; is applied in the case of the &#8220;Login Form&#8221; element. This feature will help you modify parts of the &#8220;Login Form&#8221; element in a fast and easy manner.<\/p>\n\n\n\n<p>In order to do this, click on the field below the &#8220;Currently Styling&#8221; section of the left sidebar:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/19-grouped-styling.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>This opens a list, with all of the available options:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/19-grouped-styling-2.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you select <b>\u201cGrouped Labels<\/b>\u201d for example, you will get all these extra options in the sidebar from which you can customize the labels:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/19-grouped-styling-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you don\u2019t want to <b>edit <\/b>the labels as a group, click on the <b>\u201clock\u201d icon<\/b> next to the field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/19-grouped-styling-4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>This will <b>disable group styling<\/b>, and allow you to only edit the label which you select within the form.<\/p>\n\n\n\n<p>Once you\u2019re done with the customization, <b>exit the &#8220;Group Styling&#8221;<\/b> by clicking on this button:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/19-grouped-styling-5.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>You can learn more about the &#8220;Group Styling&#8221; feature <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/5612642-the-group-styling-feature\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-the-rest-of-the-main-options\">Use the Rest of the Main Options<\/h3>\n\n\n\n<p>Besides the &#8220;Edit Form Elements&#8221; option, this <b>\u201cMain Options\u201d section<\/b> contains some more options, which you can use as described below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/20.main-options.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p><b>Important!<\/b><\/p>\n\n\n\n<p><i>We will enable the<b> \u201cBoth\u201d type of forms<\/b>, in order to see the options available for both the \u201cLogin\u201d and the \u201cRegistration\u201d forms in one place as they appear in the sidebar. However, the sidebar might look slightly different depending on what type of form you have selected. Regardless of which form is selected, you will find below all options described.<\/i><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"size-and-alignment\">Size and Alignment<\/h4>\n\n\n\n<p>Set up the size and the alignment of the form, by using the available options:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/20.main-options-2.gif\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>&nbsp;<b>Note:<\/b> <i>if you select the \u201cFull\u201d option for the size, the \u201cForm width\u201d option (which we describe below) will become not available.<\/i><\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"form-width\">Form width<\/h4>\n\n\n\n<p>Use this option to change the width of the form, by using the slider, and dragging it from slide to slide, or by entering a numerical value in the field next to it:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/20.main-options-3.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"submission-actions\">Submission action(s)<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>After Successful Login<\/b> <\/li>\n<\/ul>\n\n\n\n<p>You can choose what happens after someone successfully logs into the website. Click on this field to open a small pop-up and see the options for this field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/20.main-options-4.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Now go ahead and click on the pencil icon to see all the available actions:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/after-successful-login.png\" alt=\"\" class=\"wp-image-113474595\"\/><\/figure><\/div>\n\n\n<p>If you click on the first field here, a pop-up will open up, with all of the available options that can be performed after someone successfully logs in:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/after-successful-login-actions.png\" alt=\"\" class=\"wp-image-113474596\"\/><\/figure><\/div>\n\n\n<p>\u2192<b>Refresh page<\/b>: select this option and click on apply if you want to perform this action once the login was successful.<\/p>\n\n\n\n<p>\u2192<b>Redirect to custom URL<\/b>: if you want the users to be redirected to another page, you can choose the first option from the pop-up.<\/p>\n\n\n\n<p>You will be taken back to the \u201cMain Options\u201d sidebar, where you can add the redirect URL as shown below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/redirect-url-field.png\" alt=\"\" class=\"wp-image-113474597\"\/><\/figure><\/div>\n\n\n<p>\u2192<b>Switch to already logged in state<\/b>: this option comes in handy if you don\u2019t want to have any kind of action performed after the user has logged in.<\/p>\n\n\n\n<p>\u2192<b>Redirect to Apprentice course index<\/b>: the last available option will redirect the user to the \u201cApprentice\u201d course index (use this option if you have a <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/apprentice\/\" target=\"_blank\" rel=\"noopener\">Thrive Apprentice<\/a> course set up).<\/p>\n\n\n\n<p>These were the available actions for a successful login.<\/p>\n\n\n\n<p>After choosing one, you have the option of <b>displaying a \u201csuccess message\u201d<\/b> for the user, by activating this option:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/enable-success-message.png\" alt=\"\" class=\"wp-image-113474598\"\/><\/figure><\/div>\n\n\n<p>The message can be set using this field:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/edit-success-message.png\" alt=\"\" class=\"wp-image-113474599\"\/><\/figure><\/div>\n\n\n<p>The \u201ceye\u201d icon lets you preview the message as you are editing it.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li> <b>After Successful Registration<\/b> <\/li>\n<\/ul>\n\n\n\n<p>Now let\u2019s look into the actions available for when a registration is successfully done. Click on the field to open the sub-menu:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/20.main-options-13.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>Now click on the pencil icon to display the full list of actions:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/after-successful-registration.png\" alt=\"\" class=\"wp-image-113474600\"\/><\/figure><\/div>\n\n\n<p>You will notice that the actions available here are very similar to the ones already described above:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/after-successful-registration-actions.png\" alt=\"\" class=\"wp-image-113474601\"\/><\/figure><\/div>\n\n\n<p>The <b>\u201cRefresh page\u201d<\/b> option will simply refresh the page.<\/p>\n\n\n\n<p>However, if you select the<b> \u201cRedirect to Custom URL\u201d<\/b>, besides the URL redirect field, you&#8217;ll also notice an additional option in the sidebar &#8211;<b> \u201cSend form values to thank you page\u201d<\/b>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2024\/04\/send-form-values-toggle.png\" alt=\"\" class=\"wp-image-113474602\"\/><\/figure><\/div>\n\n\n<p>If you enable the toggle, you will send variables such as \u201cname\u201d and \u201cemail\u201d to your thank you page.<\/p>\n\n\n\n<p>The same option can be enabled for the<b> \u201cRedirect to Apprentice course index\u201d<\/b> action:<\/p>\n\n\n\n<p>You can check out the &#8220;Send form values to thank you page&#8221; section of <a class=\"intercom-content-link\" href=\"https:\/\/help.thrivethemes.com\/en\/articles\/4425779-how-to-use-the-lead-generation-element\" target=\"_blank\" rel=\"noopener\">this article<\/a>, should you need more information about this feature.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"advanced\">Advanced<\/h4>\n\n\n\n<p>The last section of the \u201cMain Options\u201d sidebar is the \u201cAdvanced\u201d one. From where you can decide whether you want to hide the form when the user is logged in:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/20.main-options-19.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h_cb6e46a173\">Use the Rest of the Options<\/h3>\n\n\n\n<p>Just like in the case of other elements, besides the \u201cMain Options\u201d, you can use some other general options, as well (such as <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/tkb_item\/how-to-use-the-layout-position-options\/\" target=\"_blank\" rel=\"noopener\">Layout&amp;Position<\/a>, <a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/tkb_item\/how-to-use-the-borders-and-corners-element-setting\/\" target=\"_blank\" rel=\"noopener\">Borders&amp;Corners<\/a>, etc.):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/mlpxhq8ztvyc.i.optimole.com\/cb:p0Z2.44bbf\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/thrivethemes.com\/wp-content\/uploads\/2023\/12\/generaloptions-1.png\" alt=\"\"\/><\/figure><\/div>\n\n\n<p>If you want to know how to use the rest of the options from the left sidebar, make sure to take a look at the articles and tutorials from our<a class=\"intercom-content-link\" href=\"https:\/\/thrivethemes.com\/thrive-knowledge-base\/\" target=\"_blank\" rel=\"noopener\"> Knowledge Base<\/a><\/p>\n\n\n\n<p>These were the ways in which you can use the above-mentioned sections to add and customize a &#8220;Login &amp; Registration Form&#8221; element in Thrive Architect.<\/p>\n\n\n\n<p>I hope this article was helpful to you. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article will explain how to use and customize the &#8220;Login &amp; Registration Form&#8221; element from Thrive Architect. This element is useful in situations where you want to offer the users the possibility to register and login to your website. Add the Element to the Post\/Page Firstly, you need to add the element to the [&hellip;]<\/p>\n","protected":false},"author":253020,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"ht-kb-category":[34053],"ht-kb-tag":[],"class_list":["post-113461301","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-thrive-architect-elements","post-wrapper","thrv_wrapper"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb\/113461301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/users\/253020"}],"replies":[{"embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/comments?post=113461301"}],"version-history":[{"count":0,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb\/113461301\/revisions"}],"wp:attachment":[{"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/media?parent=113461301"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb-category?post=113461301"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/thrivethemes.com\/wp-json\/wp\/v2\/ht-kb-tag?post=113461301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}