Social login with WordPress

Social login has been proved to be a great booster for conversion rates, especially in e-commerces. This login or signup system based on social providers are a shortcut for your users, who are tired of filling out login forms and checkout forms.

But building and embedding a login form in WordPress is not always easy. If you don't have coding skills, options are limited to plugins, and you can't always personalize the forms and adapt their logic. But with the Arengu plugin for WordPress, you can personalize both the form and the flows behind it, and build advanced onboarding flows without coding. You can embed it just with a shortcode and it is compatible with the WooCommerce plugin.

Would you like to add a social login form to your WordPress site? Keep reading and follow these 3 steps to get a social login form for WordPress.

Create a social login form for WordPress with no code

If you use the Arengu plugin, you can build a social login form in no time, simply by following these 3 steps.

1. Build a social login form

With Arengu, you can build onboarding forms, but also any other kind of form you can think of. To ease this process, you can select a predefined template, so you can save loads of time. You also have the option of starting your form from scratch. Whatever you choose, keep in mind you can change every bit of it.

Now, in the Forms editor and click on Login form. We will use this template as a base, but add some personal touches, like the social login buttons.

The image above shows what the Login form template looks like. As you can see, it presents two fields to log in with email and password, but you can complement it by adding the social media buttons. Choose Social Login on the Fields menu and place them where you prefer.

To set up the social login call to actions, you just need the Client ID and the Scopes. You can find the Client ID in your social provider account, under settings.

Click on Design to change the theme of the form: you can change colors, fonts, themes and more!

3. Build a flow to log in users

Now that our form is ready, we will build the server-side logic. Go to Forms > Flows to see an overview of the flows connected to your form. Since we are using a template, you will see there is a pre-built flow that is connected to this form.

Click on Preview flow in a new tab, so we can see it in detail and modify it.

Remember this is a basic social login form for WordPress, but you can add any other logic to complement it. Simply add other actions or integration to build the perfect form for your business.

These are all the actions you need in your flow so your social login form works correctly. Let's see how to add them and configure them, one action at a time!

• If/then condition
  This first action will check if the user chose to log in with a social provider or with the combination of email and password, and trigger actions accordingly.
  
  To configure it, add the reference {{input.body.social}} and select exists.

• Passwordless login
  Now, add the action Passwordless login to log users in with their social provider.
  
  This action is configured by adding the base URL, the API key and the user's email. In your WordPress account you can find both the Base URL and your API key. Remember your API key must remain a secret credential. Do not share it with anyone! Finally, fill in the email field by adding the reference {{input.body.social.profile.email}} under the field email.

• Login with password
  Now, we will add the login action for the remaining option: if the user chose to log in with email and password.
  
  The configuration of this action is practically identical — paste the base URL, the API key, plus the email and the password, by selecting them from the drop-down menu.

• If/then condition
  We will now set an additional If/then condition. This time, this action will determine if there is any kind of error when logging the user in. If there is no error, the form will be successfully submitted. If not, an error message will appear.
  
  To set this if/then action, add the condition {{passwordlessLogin.success}} , choose is true, as you can see in this example:

• Submit the form or Show error message
  These are the final actions of the flow. If everything goes well, the form will be submitted and the action Submit the form will be executed. If not, the action Show error message will be executed instead.
  
  You can add personalized messages in each action or add the predefined error messages of WordPress. If this is your case, add the reference passwordlessLogin.body.error_message in the message field.

Finally, click on the Submit the form actions and select Redirect to URL. Add the reference {{passwordlessLogin.body.login_url}}, so your users can be correctly redirected and logged in.

4. How to embed your Arengu form in WordPress

Embedding your form in WordPress takes simply a shortcode, which you can find in the Forms editor, under Share. Here you will find all available options to embed your form in different ways. Copy the WordPress shortcode and paste it wherever you need it.

If you want to try this right now, register for free and start using Arengu to create your own social login forms.