Infobip is not your most popular platform for SMS delivery compared to the others and that is why there is quite little support in terms of integration with WordPress in any way. There are a couple of plugins or automation available that you can integrate with WordPress, but that is also based on some specific actions via Make.com or Zapier.com. Those automations are based on some specific scenarios such as if this action happens then send an SMS notification via the Infobip platform. However, there is no standalone solution available that can integrate Infobip within your form for SMS-based OTP verification.
In this tutorial, I will help you integrate Infobip with JetFormBuilder and enable SMS-based OTP verification before you submit the form. You might wonder what it will help with, let me tell you its applications:
- Preventing spam submissions on your forms.
- User sign-up verified via mobile number.
- Prevent bot registrations on your website.
- Get submissions from real users instead of bots.
- and the Sky is the limit.
What you will need:
- Infobip API key & API base URL.
- JetFormBuilder plugin.
- Another plugin for adding custom codes.
This tutorial is based on a custom code solution so don’t worry, I have simplified it for you in every possible way so you will do most of the copy/paste work.
What you will get:
- Infobip is fully integrated with JetFormBuilder.
- Send OTP function which you will receive on your phone number.
- 60 seconds timer so a new OTP cannot be requested within 1 minute.
- After verification, the number cannot be changed.
Step 1 – Add HTML into JetFormBuilder:
<div>
<label for="phone">Phone Number</label>
<input type="text" id="phone" name="phone" pattern="\d{6}" maxlength="6" title="Please enter a 6-digit phone number" required>
<button id="send-otp" type="button">Send OTP</button>
<div id="otp-message" style="color: green; margin-top: 10px;"></div>
</div>
<div id="otp-section" style="display: none;">
<label for="otp">Enter OTP</label>
<input type="text" id="otp" name="otp" pattern="\d{6}" maxlength="6" title="Please enter a 6-digit OTP" required>
<button id="verify-otp" type="button">Verify OTP</button>
<div id="otp-verification-message" style="color: red; margin-top: 10px;"></div>
</div>
<input type="hidden" id="otp-verified" name="otp-verified" value="0">
- Start by adding a “Custom HTML” field into your JetFormBuilder form.
- Copy and paste the above HTML code into the field. You can put this HTML field anywhere you want based on your requirements of the form, there is no problem with placement.
- You can save your form.
Step 2 – Add Your PHP code in theme:
You will need to add the following PHP code into your theme so that way the OTP verification feature works properly as it contains your Infobip account API key and API URL. Based on this code, your website will be able to communicate and request for OTP codes to be sent to your users.
function send_otp_infobip() {
if (!isset($_POST['phone'])) {
wp_send_json_error('Phone number is required.');
return;
}
$phone_number = sanitize_text_field($_POST['phone']);
$api_key = 'YOUR-INFOBIP-API-KEY-HERE'; // Replace with your actual Infobip API key.
$otp = rand(100000, 999999);
$message = "Your OTP code is: $otp";
$url = "https://API-BASE-URL-GOES-HERE/sms/2/text/single";
$data = array(
'from' => 'SENDER NAME',
'to' => $phone_number,
'text' => $message
);
$options = array(
'http' => array(
'header' => "Content-Type: application/json\r\nAuthorization: App $api_key\r\n",
'method' => 'POST',
'content' => json_encode($data),
),
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
if ($result === FALSE) {
wp_send_json_error('Failed to send OTP.');
return;
}
set_transient('otp_'.$phone_number, $otp, 10 * MINUTE_IN_SECONDS);
wp_send_json_success();
}
add_action('wp_ajax_send_otp', 'send_otp_infobip');
add_action('wp_ajax_nopriv_send_otp', 'send_otp_infobip');
// Verify OTP function
function verify_otp() {
if (!isset($_POST['phone']) || !isset($_POST['otp'])) {
wp_send_json_error('Phone number and OTP are required.');
return;
}
$phone_number = sanitize_text_field($_POST['phone']);
$otp = sanitize_text_field($_POST['otp']);
$saved_otp = get_transient('otp_'.$phone_number);
if ($otp == $saved_otp) {
delete_transient('otp_'.$phone_number);
wp_send_json_success();
} else {
wp_send_json_error('Invalid OTP.');
}
}
add_action('wp_ajax_verify_otp', 'verify_otp');
add_action('wp_ajax_nopriv_verify_otp', 'verify_otp');
- Go to Dashboard > Appearance > Theme File Editor.
- Here you will select the functions.php file from the right side of the list as shown below:
- Scroll down and add the PHP code at the end of the file.
- After adding the code, please make sure to update and add your API key & URL inside the PHP code.
- Please add Infobip API key in: $api_key = ‘YOUR-INFOBIP-API-KEY-HERE’; as shown below:
- Then add your Infobip API base URL in: $url = “https://API-BASE-URL-GOES-HERE/sms/2/text/single”; as shown below:
- Make sure to replace the selected text only for your API & API URL.
- Update your file.
Step 3 – Adding your JS code:
The JavaScript code going to handle how the form should work in terms of user experience. You will need to add this JavaScript code into your website via a third-party code snippets plugin but since I am using Elementor, it has that feature to add custom codes.
The following instructions are if you are using Elementor to add your custom code into your website.
- Go to Dashboard > Elementor > Custom Code
- Click on “Add New”.
- Choose Location as “</body> – End”.
- Paste in your JS code below.
- Click on “Publish” and add Condition for Entire Website.
After this, the OTP feature in your form will start to work. You will receive codes on your phone number given and once the verification is done, the number field will be disabled as shown below in the demonstration.
Tips:
- You can modify the text prompts or messages inside the JS and PHP code that will include your customized tone for your visitors.
- With the help of CSS you can change the visuals of how the button, field and timer looks for your users.
- You can also increase/decrease the time when a user can request another OTP code.
