website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
24min

How Users Edit their Email and Password Front End

These features allow users to change the key information that identifies them on your site.

Document image

Prerequisites

  • Install the Secure Zones Module
  • Users must remember their existing password
  • Users must be already logged in

Introduction

This Article shows how Users who remember their Email address and Password can change these using a Form. If you need a feature for Users who have forgotten their password, try the Password Reset feature.

Step 1 - Set up a Form

Create a Form which will be used to update Users' email address or password.

Document image

This Form should have a Secure Zone attached- but this can be an existing Secure Zone that you use for Accounts e.g. "My Account" or an equivalent.

You do not need to add any custom fields in the Siteglide Admin in order to use this feature. Instead, the feature will be added solely in the Form Layout. You may wish to use one Form for updating an email and a separate Form for updating password. This is fine- just adjust these instructions accordingly.

Step 2 - Create a Custom Form Layout

We'll need to modify the Form Layout, so head to Code Editor and create a new Form Layout liquid file. This should be in the same folder as the Form you created in step 1.

Document image

Step 3 - Add your Form to a Page

You can add your Form to any Page.

Document image

Select your Custom Form Layout you made in step 2.

Step 4 - Add a Secure Zone to that Page

Editing email and password will only work if the User is already logged in. We recommend adding a Secure Zone to your Page to ensure this is the case.

Step 5 - Add new fields to the Form Layout

In this step we'll be adding fields to the Form Layout which will allow the User to submit new email and password values. Pay close attention to the IDs of these elements, as this is what Siteglide will use to identify them.

HTML
|

Purpose - In this field the User will submit a new value for their email address.

HTML
|

Purpose - In this field the User will submit a new value for their password.

On most Siteglide Forms you'll see an email address and password fields with the HTML ID s_email and s_password. These fields are specifically used for Users to enter their current email address and password. Notice that the fields below we use for Users to provide new values for their email and password use different IDs s_email_edit and s_password_edit.

Remember, you do not need to use a single Form to edit both email and password. You can include these on separate Forms if you wish. You can use custom JavaScript to show or hide the fields when needed. Only when a value is given to the fields will they validate and throw an error if there is a mistake. Things to check at the end of this step:

  • The ID attribute of each field will need to be exactly the same as that used in the documentation in order to work.
  • The fields should not have an HTML name attribute. This is because we don't wish the information to be stored in the Case along with other custom fields.

Step 6 - Reveal the Current Password Field to Logged in Users

In order to use this feature the User must:

  • be already logged in
  • enter their existing password again

In this step then, we make sure we are giving the User the opportunity to re-enter their password:

HTML
|

The Form Default Layout already includes this Field- however it is hidden from Users who are logged in. The simplest way to complete the step is to remove the logic:

HTML
|

Things to Check

  • Make sure any <label> tags clearly show which field should be used for current password and which should be used for the new password.
  • Make sure the current password field is only included once in the Form Layout

Step 7 - Optional - Add a confirmation field for additional validation

The last thing the User wishes to do is to reset their password to the wrong value. To provide extra validation, you can add confirmation fields:

HTML
|

Once you've added a confirmation field, our validation will make sure the email fields match and that the password fields match. If you choose not to add a confirmation field, it will not be required.

Step 8 - Optional - Add autocomplete fields

To help the User's browser to understand the difference between current and new password fields, you could add values to the autocomplete attribute:

  • autocomplete="current-password"
  • autocomplete="new-password"
HTML
|

Next

And you're done!

You can use this feature along with our other Front-End CRM features to give Users control over their Data and Credentials on your Site.

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Editing a User's CRM record Front End with Custom Field Sets
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Step 1 - Set up a Form
Step 2 - Create a Custom Form Layout
Step 3 - Add your Form to a Page
Step 4 - Add a Secure Zone to that Page
Step 5 - Add new fields to the Form Layout
Step 6 - Reveal the Current Password Field to Logged in Users
Step 7 - Optional - Add a confirmation field for additional validation
Step 8 - Optional - Add autocomplete fields
Next