Build social login forms for a WordPress site and WooCommerce

Introduction
Build social login forms for a WordPress site and WooCommerce

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. And, yes! 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 simple 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. Let's see how it's done!

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!

Form builder: Social login for WordPress

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!

Social login forms for WordPress

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.

Low code form editor: social login forms for WordPress

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!

Personalizing forms for WordPress

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.

Building social login forms for WordPress

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!

Smart forms with social login for WordPress
  • 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.
Smart forms fr
Smart forms for wordpress with conditional logic
  • 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! Don't share it with anyone! Finally, fill in the email field by adding the reference {{input.body.social.profile.email}} under the field email.
Conditional logic in forms: Social login in WP
  • 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.
Conditional logic in forms: Social login in WP
  • 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:
Conditional logic in forms: Social login in WP
  • 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.
Conditional logic in forms: Social login in WordPress

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.

Conditional logic in forms: Social login in Wordpress

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. That's it!

Embedding form in WordPress with social login

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

Author

Ana Vilar García

Marketing Specialist at Arengu

View Comments
Next Post

Create a custom login form in PrestaShop, in minutes

Previous Post

How to build a social login form for PrestaShop