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 (an OAuth client) in your Google Cloud account. Paste its Client ID and Client Secret, then turn on the places where the button shows.

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.

Create an app in your Meta for Developers account. Paste its App ID and App Secret, then 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