Customizing Sign-In, Sign-Up, and Social Login

Using the Legacy Customizer? Legacy Customizer steps: Google One Tap Sign-In · Legacy Customizer steps: Sign In/ Sign Up Forms

Visitors create an account on your website with the sign-up form, and come back with the sign-in form. A visitor who signs up becomes a lead. In Site Edit you change both forms, and turn on sign-in with Google or Facebook. Your changes go into a draft. Visitors see them after you publish.

Open the site settings

  1. Select Dashboard in the top menu.
  2. On the site card, select EDIT SITE. Site Edit opens with your homepage.
  3. Select Settings in the top bar, then select the Site tab.

The Settings panel on its Site tab

  1. Settings: Opens the Settings panel.
  2. Site: Shows the settings that apply to the whole site.
  3. Sign in & sign up: Opens the sign-up and sign-in form settings.

Change the sign-up form

Select Sign in & sign up. It opens on the Sign up tab.

The top of the Sign up tab

  1. Sign up: Shows the form a visitor uses to create an account.
  2. Sign in: Shows the form a visitor uses to sign in.
  3. Enable form headline and subtitle: Shows the heading and the description above the form.
  4. Form heading: The heading at the top of the form.
  5. Form description: The text under the heading.
  6. Enable spam protection: Blocks automated sign-ups.

Under Form fields is the list of fields. The sign-up form starts with First name, Last name, Email and Password. Select a field to open its options.

A field of the sign-up form, open

  1. First name: A field of the form. Select it to open or close its options.
  2. Remove: Deletes the field from the form.
  3. Required field: Makes the visitor fill in this field.
  4. Set Label or Question: The words above the field.
  5. Set Placeholder: The grey hint inside the empty field.

Under the fields are the list of field types and the success message.

The field type list and the success message

  1. ADD: Adds a field of the type chosen in the list next to it.
  2. Success message Title: The heading a visitor sees after the form is sent.

To add a field, choose its type in the list, such as Phone or Select, then select ADD. The success message also has a Description.

At the end of the tab are the settings for the form's button.

The button settings of the sign-up form

  1. Sign-up label: The words on the form's button.
  2. Sign-up color: The color of the button.
  3. Sign-up style: Solid, Border or Clear button.

Change the sign-in form

Select the Sign in tab. It has the same controls as the Sign up tab: the heading, the description, spam protection, the fields, the success message, and Sign-in label, Sign-in color and Sign-in style for the button. The sign-in form starts with Email and Password.

Set up Google sign-in

Select ‹ next to the panel title to go back to the list. Scroll down and select Social login. It opens on the Google tab.

The Google tab of Social login

  1. Client ID (required): The client ID of your own Google sign-in app.
  2. Client Secret (required): The client secret of the same app.
  3. Enable on Sign up and Sign in forms: Shows the Google button on the sign-up and sign-in forms.
  4. Enable on lead capture Popups: Shows the Google button on lead capture popups.
  5. Enable Google One Tap prompt: Shows the Google One Tap prompt to visitors who are not signed in.
  6. Facebook: Shows the Facebook login settings.

Google One Tap is a small prompt that lets a visitor who is signed in to Google sign in to your site with one click. It is on by default. It uses Placester's shared Google sign-in, so it does not need a Client ID or Client Secret. The Google screen says "Sign in to Placester", not the name of your business. Turn it off if you do not want the prompt on your site.

To show a Google button on your forms, create a sign-in app in your Google Cloud account, then paste its keys here.

  1. Open Google Cloud Console and sign in.
  2. Create a project if you do not already have one.
  3. Open APIs & Services, then OAuth consent screen. Choose External so any visitor with a Google account can sign in. Enter the app name visitors will see, a support email, your site domain under Authorized domains, and a developer contact email. Select Save and continue on the Scopes page and again on the Test users page.
  4. Open Credentials, then Create credentials, then OAuth client ID. Choose Web application.
  5. Under Authorized JavaScript origins, add https:// and your site address.
  6. Under Authorized redirect URIs, add https:// and your site address followed by /social-login?google.
  7. Select Create. Copy the Client ID and Client Secret.
  8. Paste them into Client ID and Client Secret on this Google tab. Turn on the places where the button shows.
  9. Open OAuth consent screen again and select Publish app. Until you publish it, only test users can sign in with it.

Set up Facebook sign-in

Select the Facebook tab.

The Facebook tab of Social login

  1. App ID (required): The ID of your Facebook app.
  2. App Secret (required): The secret of the same app.
  3. Enable on Sign up and Sign in forms: Shows the Facebook button on the sign-up and sign-in forms.
  4. Enable on lead capture Popups: Shows the Facebook button on lead capture popups.

To show a Facebook button on your forms, create an app in your Meta for Developers account, then paste its keys here.

  1. Open Meta for Developers and sign in.
  2. Select Create app. Choose Authenticate and request data from users with Facebook Login, then Next. Choose No, I'm not building a game, then Next.
  3. Enter an app name and a contact email, then select Create app.
  4. Open App settings, then Basic. Copy the App ID and the App secret. The App ID is the App ID on this Facebook tab. The App secret is the App Secret.
  5. On that same Basic page, enter your site domain, your privacy policy URL, and your terms of service URL. Under User data deletion, choose Data deletion instructions URL and enter the page that tells visitors how to delete their account. Choose a category and an app purpose, then select Save changes.
  6. Select Add platform, choose Website, and enter your site URL.
  7. Open Use cases. Next to Authentication and account creation, select Customize. Under Permissions, add email.
  8. The app starts in Development mode, so only people on the app can sign in. Finish any required verification, then publish the app. Switch App mode from Development to Live.
  9. Paste the App ID and App Secret into this Facebook tab. Turn on the places where the button shows.

Publish your changes

Each change goes into your draft. The draft bar at the bottom of Site Edit shows the number of changed site settings, with Discard and Publish. Select Publish to show the new forms to visitors, or Discard to undo all of the draft.

For more about drafts, see Publishing and Discarding Drafts.

How did we do?

Forwarding Leads and Blocking Form Spam
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support