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. 1. What does the “Signup with Mobile” feature allow me to do?

   This feature lets users sign up on your WordPress site using just their mobile phone number (instead of a full form), and it can trigger SMS OTP verification and/or SMS notifications during user registration.

2. 2. When would I use this instead of a standard registration form?

   You should use it when you want to simplify user onboarding, especially for mobile-first audiences:
   – Quick registration via mobile only
   – Reduced friction (no long form)
   – Automatically support existing users logging in if they use the mobile number shortcut (as per shortcode behaviour)

3. 3. How do I set up a “Signup with Mobile” page in WordPress?

   1. Install & configure SMS Alert plugin on your WordPress site.
   2. Create a new page in WordPress.
   3. Insert provided CSS/HTML layout if desired (e.g., a two-column layout demo given in the KB).
   4. Use the shortcode [sa_signupwithmobile] in the page content where you want the signup form to appear.
   5. Publish the page and direct your users to it for mobile number signup.

4. 4. What does the shortcode [sa_signupwithmobile] actually do?

   – It shows the mobile-number based signup form (via SMS Alert) where users enter their mobile number.
   – If the mobile number belongs to an existing user, the shortcode may log them in automatically (depending on setup).
   – It supports both new user registration and existing user login via mobile number.

5. 5. Can I redirect the user after signup/login to a specific page?

   Yes. You can append the redirect_to query parameter in the URL to specify where the user should land after signup/login. For example:
   https://your-site.com/signup-page/?redirect_to=https://your-site.com/my-orders
   This will send the user to “My Orders” after successful signup.

6. 6. What should I verify if the mobile-signup flow fails or doesn’t behave as expected?

   Troubleshooting steps:
   – Ensure SMS Alert plugin is active and properly configured (API credentials, sender ID, etc.).
   – Check that the page has the correct shortcode [sa_signupwithmobile].
   – Ensure the mobile number field is visible and functional.
   – If you’re redirecting, confirm the redirect_to parameter is correctly formed and accessible.
   – Make sure SMS delivery works in general (OTP or verification SMS are being sent).
   – For Indian/regional users: ensure mobile number formats are correct (including country code) and that your SMS sender ID/templates comply with local telecom regulations (e.g., DLT).

7. 7. Are there any special considerations or limitations?

   – Because the signup is mobile-number based, you must ensure you capture a valid phone number.
   – If you allow existing users to login via this flow, you must ensure you handle user accounts carefully.
   – SMS cost and delivery reliability matter: triggering OTPs or SMS for each signup increases cost and you must monitor SMS credit usage.
   – In countries like India where SMS regulation is strict, you must ensure your sender ID, templates, opt-out compliance and DLT registration are all handled.
   – Test thoroughly: new user signup, existing user login, redirection, invalid numbers, failure flows, etc.