Layers
Classes
Variables
Popup Builder
Visibility Conditions
Figma to Kirki
Custom Code
Review and Publish
Layers
Classes
Variables
Popup Builder
Visibility Conditions
Figma to Kirki
Custom Code
Review and Publish

Retrieve Username

The Retrieve Username utility page gives you a ready-made form where users enter their email address to get their username by email.

How to Create a Retrieve Username Page

To create a Retrieve Username Page in Kirki:

  1. Click the plus (+) icon next to Pages on the left sidebar.
  1. Hover over Utility Page in the menu.
  1. Select Retrieve Username from the list.

Kirki creates the page and opens it on the canvas right away. It’s saved as a draft until you publish it.

Note: Utility pages you’ve already created appear greyed out in the menu.

Send Emails from Your Forms With SMTP

SMTP (Simple Mail Transfer Protocol) is the standard way emails are sent over the internet. In Kirki, the SMTP app lets you easily connect your website to an email sending service, so your forms can send emails to your users. As the Retrieve Username page works by emailing the user, your site needs this connection to send that email.

How to Connect SMTP

  1. Go to Apps from the left sidebar.
  1. Find SMTP under Featured and click the download icon next to it. SMTP then appears under Installed.
  1. Click the ellipsis (…) icon next to SMTP and select Configure.
  1. Fill in your email service details, then click Save Configuration.

How to Set Up Your Email Content

The Retrieve Username form emails the user their username. You can change what that email says:

  1. Select the Retrieve Username form on the canvas or in the Layers panel.
  1. In the Design tab, edit the Email Subject. It defaults to “Retrieve Username”, so you may want something more specific to your brand.
  1. Similarly, edit the Email Body in your own words if you want. By default, it reads “Your Username is” followed by the Username field. But be sure to keep the Username field.

The Username tag is a dynamic field. Kirki replaces it with the user’s actual username when the email is sent. Keep it in the body, or the email won’t show the username. You can also add other user details using other Available fields like email, first name, etc.

Customize Your Retrieve Username Page

Next, you can still customize how your form behaves and looks.

How to Customize the Error Message

  1. Select the form element on the canvas or the Layers panel.
  1. In the Design tab, find State and switch from Normal to Error. The error message now appears on the canvas.
  1. Select the error message. Edit the text in the content field, then adjust its style in the Design tab.

How to Style the Retrieve Username Page

  1. Select any part of the page: the page itself, the form, or an element inside the form.
  1. In the Design tab, adjust the layout, sizing, and style to match your brand identity.

You can also add more elements to the page, such as a logo, a heading, or an icon, to make it feel like your own.

How to Publish Your Retrieve Username Page

Once your page looks the way you want, publish it so users can reach it.

  1. Click the arrow next to Save in the top right corner. This opens the Save panel.
  1. Check the Page Title. It defaults to “Retrieve Username”.
  1. Click Publish to make the page live.
  1. Optional: Click Page Settings to review the page details.

How to Test Your Retrieve Username Page

Once your page is published, test it to make sure everything works as expected.

  1. Open your Retrieve Username page as a regular user. Log out first, or open the page in an incognito window.
  1. Enter an email address linked to an existing account that you can access, then click Reset.
  1. Open that email inbox and look for the email. Check your spam folder if you don’t see it.
  1. Check that the email has the subject and content you set, as well as the correct username.

If the email arrives with the right username and content, your Retrieve Username page is ready to go. If nothing arrives, go back to your SMTP settings and check your details.

Was this page helpful?

Our website uses cookies to improve your browsing experience on our website. By continuing to use this website, you agree to their use. For details, please check our Privacy Policy.