isotropic-2022
Share
Blog
Search
Menu

Texting A Discount Code To Customers via Popup - Tutorial - (WSForm, Twilio, Oxygen)

By James LePage
 on July 20, 2022

Texting A Discount Code To Customers via Popup - Tutorial - (WSForm, Twilio, Oxygen)

By James LePage
 on July 20, 2022

In this tutorial, we're going to build a popup that collects a customers phone number and email address to build a SMS and email marketing list for our WooCommerce store. On submission, we'll text them a 10% off coupon code and add this data to their user profile.

isotropic-2022-07-20-at-17-54-16

To do this, we'll be using WSForm to create the form, integrate with Twilio and trigger our coupon creation. We'll use Oxygen Builder for the overall popup and form styling. And we'll use ACF Pro to store the marketing email and phone number (alongside opt in data) in the user profile.

oxygen-builder-logo

Oxygen Builder Course - Coming Soon!

The Oxygen Builder Mastery course will bring you from beginner to professional - ACF, MetaBox & WooCommerce modules included.

First, let's set up the form. This will be a two-step form, aimed at first collecting an email, and then collecting a phone number. With it, we can build two separate lists to use for marketing via SMS, and marketing via email.

I'm splitting it up into two steps which should hopefully increase the conversion rate as once somebody has entered an email, they're less likely to abandon the form when presented with yet another text input.

First, we add 2 tabs, one for email and one for phone number.

isotropic-2022-07-20-at-16-38-18

The first tab has an email input, coupled with a continue button that displays the next step of the form when clicked on.

isotropic-2022-07-20-at-16-39-25

Under the advanced settings tab for the email input field, we've added a regular expression pattern that will validate emails.

The next tab is a bit more complicated.

Here, we collect the users phone number. This uses the built-in phone number field, and includes an international selection.

However, there are three additional fields. Both the coupon text and date time consent fields are hidden from the front end user, and dynamically populated. The consent field is a mandatory checkbox that must be selected for the user to submit the form.

isotropic-2022-07-20-at-16-40-27

The date consent field is populated with both the date and time stamp using JavaScript. When the form is submitted, this information is added to an ACF field, showing the specific moment that they use are submitted the form and consented. This is helpful when proving that this is a "real" user if I'm trying to export data into SMS or email marketing platforms.

isotropic-2022-07-20-at-16-43-37

The coupon text input is also hidden from the user. This field generates a dynamic coupon combining the users display name and a randomly generated string of text. We will use this to automatically create a coupon assigned to the submitted email address in WooCommerce.

isotropic-2022-07-20-at-16-44-51
This makes a code like: james-d9sa249a

The submit button has some HTML in it, and we will revisit this when styling the form using Oxygen and the selected detector. As of now, here's what the form looks like on the frontend:

isotropic-2022-07-20-at-16-47-01
Tab 1
isotropic-2022-07-20-at-16-47-42
Tab 2

Now that the form is collecting all of the data that we need, let's create some submission actions. These are actions that are taken when the user submits the form.

isotropic-2022-07-20-at-16-48-23

On submission, 4 things happen, in the order displayed above.

First, it adds the coupon that was auto generated in the field mentioned above to WooCommerce.

Then, it shows the user a message that they should expect a text with the code in a few minutes.

Then, using the WSForm Twilio integration, it texts the code to the phone number entered during submission.

Finally, it updates the user information in the WordPress user profile, adding both the phone number and email to custom fields created with ACF.

Adding the coupon to WooCommerce is done by using the "run WordPress hook" submission action built into WSForm and some custom PHP.

<?php // Add filter add_filter("prog_add_coupon_form", "iso_add_coupon", 10, 2); // Filter function function iso_add_coupon($form, $submit) { // Set meta key for field ID 123 (Change this to your field ID) $wsf_autocode = "field_1"; $wsf_useremail = "field_4"; $wsf_userphone = "field_5"; $coupon_code = $submit->meta[$wsf_autocode]["value"]; $amount = "10"; // Amount $discount_type = "fixed_cart"; // Type: fixed_cart, percent, fixed_product, percent_product $coupon = [ "post_title" => $coupon_code, "post_content" => "", "post_status" => "publish", "post_author" => 1, "post_type" => "shop_coupon", ]; $new_coupon_id = wp_insert_post($coupon); // Add meta update_post_meta($new_coupon_id, "discount_type", $discount_type); update_post_meta($new_coupon_id, "coupon_amount", $amount); update_post_meta($new_coupon_id, "individual_use", "no"); update_post_meta($new_coupon_id, "usage_limit", "1"); update_post_meta($new_coupon_id, "usage_limit_per_user", "1"); update_post_meta($new_coupon_id, "apply_before_tax", "yes"); update_post_meta($new_coupon_id, "free_shipping", "no"); $user_email_res = $submit->meta[$wsf_useremail]["value"]; // The email to be added update_post_meta($new_coupon_id, "customer_email", $user_email_res); }

This code programmatically adds a WooCommerce coupon from the code generated in the WSform field.

isotropic-2022-07-20-at-17-01-39
It's added to WordPress using WPCodeBox, a snippet management tool

When the form is submitted all of this code runs.

We get the email, phone and coupon code from our WSForm submission. We then generate a coupon.

In this example, the coupon offers $10 off a cart, can be used once, and is restricted to the email that was submitted in the form.

isotropic-2022-07-20-at-17-03-25
Here's the coupon that was added. In this example "admin" is my users display name. Notice that the coupon is restricted to only be used with the email that was submitted.

After adding our coupon to WooCommerce and assigning it to the submitted email (this is done to reduce fraud), we show a success message to the user:

isotropic-2022-07-20-at-16-58-37

Notice the dynamic #field(5) used to personalize the message.

isotropic-2022-07-20-at-16-59-42

Then, we actually send the text to the user. This uses the Twilio integration that WSForm offers, and is easy to set up.

First, we install the addon, and connect it to the Twilio account by pasting in our API key.

isotropic-2022-07-20-at-17-05-09
Get API key
isotropic-2022-07-20-at-17-06-20
Add to the WSForm settings

Now, back under the form submission actions, we configure the text message.

We choose the from number, connect our consent field, and dynamically add the phone number to send the message to. The message itself is also dynamically created, combining a static welcome message and a dynamic coupon, populated from the auto generated hidden field.

isotropic-2022-07-20-at-17-07-35

We can also add GIFs and media if wanted.

Finally, we store the submitted data somewhere useful. In this situation, I used ACF pro to create fields in the user profile.

isotropic-2022-07-20-at-17-11-37

The final action uses the WSForm User Management addon to add this data to the custom fields under the User Profile.

isotropic-2022-07-20-at-17-10-39
isotropic-2022-07-20-at-17-12-17

However, you may be better served sending this information off to GetResponse or another marketing platform using WSForm's many integrations:

Now that the overall functionality and mechanism of the form is working, let's build out our popup, bringing this marketing data capture form to the front end of the website.

Oxygen Builder and WSForm make for a great combination. Using the builder, it's easy to submit the form, and even easier to style it.

Using a reusable part (which allows me to insert this pop up wherever I want), I'll first add in the popup, add the form, and finally style it.

I'm using a Modal, columns and a few other elements to make a classic 50% 50% popup.

isotropic-2022-07-20-at-17-32-27

I've inserted the form using a shortcode.

isotropic-2022-07-20-at-17-33-18

It triggers on exit intent.

Now, all I need to do is style the WSForm. I could do this by using the built-in customizer, but that's a bit limited. I could also just write custom CSS, but that's not visual. The third option is using the built-in selector detector that comes with Oxygen Builder, and styling using the editor. This is something that many people don't take advantage of simply because it isn't enabled by default. So go into your settings page for Oxygen, and enable selector detector.

isotropic-2022-07-20-at-17-25-06

Now, click into the shortcode element, and click "selector detector" on the bottom.

isotropic-2022-07-20-at-17-37-19

Use it to click into the inputs and buttons, styling using the Advanced tab.

isotropic-2022-07-20-at-17-37-54
Style using the WSF IDs, and elements within.

I use the short code element instead of the built-in WS form Oxygen element because I can disable the short code, and then re-render it, bring me back to the original tab of the form. If I edit the WSForm itself, I can rerender the shortcode without needing to reload the builder.

isotropic-2022-07-20-at-17-40-51
Styling form button in Oxygen

Using the detector, I can target any piece of HTML, allowing me to edit the span added in the second button, making the font smaller.

And just like that, we've built a custom form for our WooCommerce site that:

  1. Pops up on exit intent, offering $10 off
  2. Collects email and phone numbers in 2 steps using WSForm
  3. Is custom and styled to brand guidelines using Oxygen
  4. Adds a unique coupon code assigned to the submitted email in WooCommerce
  5. Texts the coupon code to the submitted phone number
  6. Sends this data to the user profile (custom fields added with ACF pro)
isotropic-2022-07-20-at-17-45-12
The code, which was generated by WSForm and added to WooCommerce, texted to my submitted number.


Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram