What are Spinner Forms?
Spinner Forms are a new popup opt-in form type to help you grow your list even faster. They feature a spin wheel and provide a fun, interactive way to incentivize visitors to become subscribers.
After you embed a Spinner form to your website, it will automatically pop up on the screen based on your selected settings
Your website visitors will need to submit their email address to spin the wheel
Once visitors spin the wheel, it will trigger a spin animation and a win animation
In the form builder, you can select from a list of spin wheel designs and customize them according to your needs.
Where can I find Spinner Forms?
In your Flodesk account, go to the Forms dashboard and click the create +New form button.
Spinner is a new form type in the form template gallery.
Note: Spinner Forms are only available as Popup forms. Once you customize your Spinner form, you’ll need to embed it on your website.
How to customize Spinner Forms
Step 1. Select the Spinner Form template category and click Customize it on the form template card
Step 2. Choose a segment. Subscribers opting into this form will automatically be added to the segment(s) you select or create here. Save your changes.
Step 3. Click the spin wheel to select it. You can define three reward options for your spin wheel under the Options tab.
You can also select the winning option by clicking on the Winner radio button next to it. The option you choose will display after your form visitor spins the wheel. In the example below, we chose "5% off" as the winning option.
Step 4. On the Style tab, you’ll find the following customization options:
Shape: Choose a shape with six or nine slices on the wheel
Color: Choose the colors of the slices
Border color: Choose a border color for the slices
Border thickness: Set the border for the slices
Step 5. Select the Font tab to customize the font, font style, color, case and letter spacing.
Step 6. Click the pointer of the wheel to:
Choose a pointer style
Set a direction for the pointer
Set a fill color
Choose a tip color [if you selected a pointer style with a tip]
Choose a border color
Define the border thickness
Step 7. To edit the form headline and form copy text, click the text blocks and use the font customizing options on the right side of the screen.
Step 8. To collect your subscriber’s first name or any additional custom data, click the "Add field" button. Use the Font and Style tabs on the right to edit the input fields.
Make any custom fields “Required” by marking the relevant checkbox. Be sure to map your custom field to a data field; otherwise, your subscriber’s inputs won’t be saved to your Flodesk account.
Learn more about custom form fields.
Step 9. Click the button to access the button Style and Font editing options. You can update the button text to reflect your offer by highlighting it and replacing it with your preferred copy.
Step 10. When you click on the background area outside of the form editor, you can access the Form options, including:
Preferences: When turned on, preferences let your subscribers opt-in to different segments. Learn more about using preferences on forms here.
Description: You can turn the form description on/off. (See "Subscribe to our newsletter to receive a free coupon" in the below example.)
Layout: This allows you to switch the spin wheel to the left, right, or top of the form
Canvas color: Select a color for your form background here. In the below example, the form’s background color is white.
Background color and Background opacity
Step 11. To customize the preference options, click a preference option on the main screen and edit its details on the right-side panel. You will need to map each preference option to a unique segment.
Step 12. You can edit the Popup form’s closing X in the top right corner. Just click the “X” to select it, then change its size and color as needed.
Once you're happy with your form design, click the Thank you tab at the top of the form editor screen. Here, you can add a URL where subscribers will be redirected after they submit your opt-in form. Alternatively, choose one of the pre-written success messages or write your own custom success message.
If you select the “Custom success message with a code” option, you can type in the code for the winning option so your subscribers can grab it right from the success message. Also, remember to send them the code via a workflow email!
To edit your success message's font and font style, click the Font tab in the right-side panel to access all the font options.
How to access the Spinner Form settings and the form embed code
Once you have customized your spinner form to match your brand and needs, click the Settings button at the top right corner.
Decide if you want to enable the double opt-in for your form, when you want this Popup form to appear to your website visitors, and if you want it to appear for visitors who have already subscribed.
You can also turn on notifications when a subscriber opts into this form and, if needed, change the segment connected to the form.
All that is left now is to navigate to the Embed panel. Use the built-in Copy button to copy the form’s Header code and embed it into your website before the closing </head> tag. Learn more about how to embed the Popup form header code to various website builders.
Summary
You can create interactive Spinner Forms by navigating to the Forms dashboard, clicking the create +New form button and choosing the form template under the Spinner Forms category.
Spinner forms are currently available as Popup forms.