Signup With Mobile

How to design a custom login or signup with OTP form in wordpress.

To use this feature you need to have SMS Alert plugin installed on your wordpress website.

In this tutorial we will divide the page in two parts, on left hand side we will have our website logo, with some cool background color and on the right hand side we will have login or signup with otp option with a different background option.

Let’s create a page and add below html and css

<style>
   body{margin: 0px!important;padding: 0px!important;}
   .header-inner,.footer-inner,.section-inner,.header-footer-group {display: none;}
   .main {display: flex;height:655px;margin: 0px !important;adding: 0px!important;
   text-align: center;}
   .para {width: 50%;background:#d37684;}
   .mob {width: 50%;background: #F0FFFF;}
   .sas-form{padding:35px;}
   .sa-otp-btn-init{background: #d37684;border-radius:5px;}
</style>
<div class="main alignfull">
   <div class="para">
      <div style="margin-top:200px; color:white;">
         <h1 style="">S</h1>
         <h3>SMS Alert</h3>
         <p>Demo Page for Signup with Mobile</p>
      </div>
   </div>
   <div class="mob">
      <div style="margin-top:200px; color:gray;">
         <h3 style="color:gray;">Sign Up</h3>
         <h5>Enter your mobile number to create your account.</h5>
         [sa_signupwithmobile]
      </div>
   </div>
</div>

• Now we need to add sms alert shortcode to this page, so navigate to WooCommerce and click on SMS Alert and then click on Short Code
• Here we can see two shortcodes, one is for login with otp and other one is for signup with otp.
• Let’s first understand the difference in between both.
• If we use login with otp shortcode, only the existing user can login to the website, and for new users, we would have to create a separate page to register.
• Whereas register with otp option, will allow new user to register as well as if any existing user tries to register using this option, he would be automatically logged in to his existing account.
• So since we want to reduce users effort to login or register on our website, we would use register with otp shortcode.
• So let’s copy this shortcode and add it to our page.
• Now, it’s done.

FAQ’S

1. To redirect user to a specific page after login or signup

   Add redirect_to query parameter to the login/signup url

   For eg, if you want to redirect user to my orders page add below url in menu

   http://localhost/my_page/?redirect_to=http://localhost/my_orders