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.
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 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.
The first tab has an email input, coupled with a continue button that displays the next step of the form when clicked on.
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.
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.
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.
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:
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.
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.
This code programmatically adds a WooCommerce coupon from the code generated in the WSform field.
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.
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:
Notice the dynamic #field(5)
used to personalize the message.
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.
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.
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.
The final action uses the WSForm User Management addon to add this data to the custom fields under the User Profile.
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.
I've inserted the form using a shortcode.
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.
Now, click into the shortcode element, and click "selector detector" on the bottom.
Use it to click into the inputs and buttons, styling using the Advanced tab.
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.
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: