Social login has been proved to be a great booster of conversion rates, especially in e-commerces. This login or signup system, based on social providers, is a shortcut for your users, who are tired of filling out login forms and signup 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 or adapt the 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 easy 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.
We will use the “Signup form with WordPress” template as a base
The image above shows the Login form of the template, it presents the fields email and password, and also the Social media button for Google and Facebook, already selected, you can also add the Microsoft Login button.
To set up the social login call to actions, you just need the Client ID and the Scopes of each social provider. 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!
2. 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!
- Sign up
This action comes already pre-configured with your WordPress connection that was entered during the template installation. The Email fields will check if a user selected to sign up with an email or a social login. The password field checks if a password was entered.
- If/then condition
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.
- Issue a token and Store state Variable
These actions will generate a secure token to login a user and store the destination url to login a user with a valid WordPress session.
- 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 keep the predefined error messages of WordPress.
Finally, in the Form editor, the Ending screen will have the setting Redirect URL set to the Store state variable ‘redirectionUrl’ from the flow.
3. 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 Embed. Here you will find all available options to embed your form in different ways. Follow the WordPress embed instructions to install our WordPress plugin and our embed code.
If you want to try this right now, register for free and start using Arengu to create your own social login forms.
