How to Add Interactive Elements to Your Opt-in Forms

Would you like your opt-in form to include more than a headline, a field, and a button? In this guide, we will walk you through designing a Thrive Leads form using the embedded Thrive Architect editor, then adding specific interactive elements — like Countdown Timers, Progress Bars, and entry animations — to boost conversions.

Opening the Design Tab

1. From any form in My Forms, open the form.
2. Select the Design tab.

Thrive Leads loads an Architect canvas scoped to your form, with a content placeholder ready for you to build on.

Adding Elements to Your Form

3. Click Add Element in the right sidebar to open the element library.
4. Drag any element (such as text, an image, a countdown timer, or a form field) onto the canvas, the same way you would when editing a page in Thrive Architect.

Adding a Countdown Timer

Scarcity is a powerful motivator, and you can add a countdown timer to any form the same way:

5. Click Add Element, search for Countdown, and drag it onto your form.
6. Configure the countdown as Evergreen (counts down individually for each visitor, e.g., “Offer ends in 15 minutes”) or Fixed Date (counts down to one specific calendar date and time for every visitor).

Adding a Progress Bar

Progress bars encourage completion by showing the visitor they’re almost done, which works especially well on multi-step forms.

7. Click Add Element, search for Progress Bar, and drag it onto your form.
8. Set the percentage it should display (for example, 50% or 75%).

Animating Your Form

9. To animate the whole form as it appears, open the Settings tab in the sidebar and look for an Entry Animation option, such as Zoom In or Slide Down.
10. To animate a specific element instead, select it on the canvas, then look for an Animation option in its own settings (for example, a Bounce or Wobble effect) to draw attention to it.

Setting Display Conditions on Individual Elements

11. Select an element on the canvas.
12. Use Display Conditions in the sidebar to control when that specific element is visible.

This is separate from the form-level rules on the Display Rules tab, since it lets you show or hide individual pieces of the form’s design rather than the whole form.

Switching Templates Without Losing Your Content

13. If you want to swap the visual template while keeping the elements you already added, click Change Template in the sidebar rather than starting a new form from scratch.

Managing Form States

14. At the bottom of the canvas, check the state switcher, which shows the form’s current state, labeled Default State by default.
15. Click the + button beside it to add another state, such as a “thank you” message the form switches to after a visitor submits it.

That’s it! Your form’s design now reflects the elements, animations, and states you added. Next, take a look at how to configure display rules for Thrive Leads forms to control when this design appears.

Frequently Asked Questions

Is the Design tab the same editor as Thrive Architect?

Yes. The Design tab embeds a full Thrive Architect editor, so any element or layout tool available in Architect — including Countdown Timers, Progress Bars, and animations — is available here, scoped to your form instead of a full page.

What is the Navigator used for?

Navigator, in the right sidebar, shows the structure of every element on your form’s canvas so you can select a nested element without hunting for it visually.