This week, we'll show you how to create forms subscription having a wheel of fortune with Divi and the WP Optin Wheel plugin. Hope this tutorial will help you increase conversion rates. The gambling feature of Lucky Wheel Optin Form will allow you to interact with visitors and reward them with a discount code that they can use for their online purchases.

Let's go!

Preview

Before we dive into the tutorial, let's take a quick look at the result on different screen sizes.

Optin wheel result previewInstaller WooCommerce

Plugin and installation search

If you have not done it yet, the first thing to do is to install  WooCommerce on your WordPress website. We will also ask to use the hardware store layout pack on the Divi website you are working on.

Go to your plugins and find WooCommerce. Once you find it, click the 'Install Now' button.

Install woocommerceEnable

Make sure to activate the plugin WooCommerce at once.

Activate the woocommerce pluginConfigure WooCommerce

Then WooCommerce will automatically redirect you to its online form configuration. Here you will need to fill in all the details to get your store ready to go live. Once this process is done, all the necessary WooCommerce pages will be automatically added to your website.

Woocommerce settings page

Install the WP Optin Wheel plugin

Plugin and installation search

To create the opt-in form of Lucky Wheel, we will use a free ludification plugin called WP Optin Wheel . Go back to your plugins and find the WP Optin Wheel plugin. Then click on the 'Install Now' button. You must then activate the plugin.

Install wp optin wheel

Add products to WooCommerce

Add a new product

If you are already running an ecommerce website, you can skip this part. If you're just trying to try something, we recommend adding products to your WooCommerce plugin. This will help you test the lucky wheel optin form later. To add a new product, go to Products> Add new .

Add woocommerce productsAdd product details

Fill in all the product details. This includes, but is not limited to, a product name, description, featured image, price, and category. Publish the product page once you are done adding these details.

Add product detailsRepeat for each product

Repeat the same step for each of the products you want to add to your website.

Woocommerce products

Add coupons to WooCommerce

Go to coupons

Now is the time to add coupons. Later in this article, we'll use the coupons we've created as a reward. Access your WordPress Dashboard> WooCommerce> Coupons . Once there, start creating your first coupon.

Woocommerce promo code

Add coupon n ° 1: 5% off

General

In the 12-slice wheel of fortune, you can decide how many slices include a prize. You can, for example, offer 4 prizes and create a different coupon for each of them. You can also use a coupon for multiple points on the wheel. Once you've created your first coupon, go ahead and enter the coupon code at the top of the page. Then change the general settings:

  • Discount type: percentage discount
  • Coupon Amount: 25
  • Coupon expiration date: Enter the date of your choice

Create woocommerce promo codeUsage Restrictions

Continue by switching to the usage restriction tabs. Here you can decide if there is a minimum and maximum spend related to the coupon. You can also check the following boxes:

  • Check this box if the coupon cannot be used with other coupons.
  • Check this box if the coupon should not apply to items on sale. Per-item coupons will only work if the item is not on sale. Per Cart coupons will only work if there are items in the cart that are not for sale.

Woocommerce coupon restrictionRepeat steps for 3 other coupons

Create as many coupons as you want by following the same steps as mentioned above. You are not limited to offering a percentage off. You can also create a coupon that offers a fixed discount on a cart or product and include it in the luck wheel.

List of woocomerce promo codes

Create an Optin Lucky Wheel form

Go to plugin settings

Now that we have gone through all the steps necessary for the wheel of fortune to work, we can start creating one! Access your dashboard WordPress > WP Optin Wheel .

Wp opt-in wheelAdd a MailChimp API key

Before you can create a Lucky Wheel, you need to add your MailChimp API key. The free version of the WP Wheel Optin plugin only offers integration with MailChimp. If you want to link the wheel of luck with another provider, you need to upgrade to the premium version.

Mailchimp fieldCreate a new wheel

Choose a theme

Let's start creating the wheel! Choose a color palette of your choice. For this tutorial, we choose orange because it is well with the color palette of the Hardware Store Layout Pack .

Select a wheel of fortune

Setup Chances

The next step in creating your online form registration for the route de la fourtune consists of choosing a percentage of success. This percentage indicates how many times people win something by spinning the wheel. In this case, each visitor who spins the wheel has a 70% chance of winning a promo code.

Define the chances of successInstallation slices

Continue by configuring the 12 different slices. You can dedicate each of the slices to one of the following three options:

  • No price: the visitor does not gain anything
  • Promo code: the visitor wins a promo code
  • Link: visitors win an ebook, for example

In this example, we are using 4 of the 12 slices to add a coupon code. We also set the odds for each of these slices individually.

Define the slices of the wheel

Form Builder Configuration

The next step will help you create the online form subscription itself. You will notice that there is already an email field here. The only other type of field you can add to the registration form is a checkbox. They specifically added this type of field to make the form GDPR compliant.

Add a wheel of fortune subscription formConfigure the form

Content settings

Then you can configure the written content of the lucky wheel shape. Go ahead and change all of the content to match your website.

Define the subscription forum optionsDesign parameters

Then open the design settings and choose “no pattern” for the background pattern option.

Wheel of fortune design parameter

Behavior parameters

You also have the option to choose when the optional Lucky Wheel form appears in the behavior settings.

Wheel of fortune behavior parameters

GDPR

Last but not the least, you can make sure that the data shared by visitors will not be saved unless they have checked the various boxes on your registration form and you are done! Save the Lucky Wheel registration form and go to your website to test it.

Denière wheel of fortune configuration sectionPreview

Now that all the steps have been taken, let's take a final look at what happened with different screen sizes.

Preview result wheel of fortuneLatest Thoughts

We hope this tutorial will help you create your email lists more quickly and interactively. If you have any questions or suggestions, be sure to leave a comment in the comments section below!