How to use the Marketing Automation Calculator Template

This Marketing Automation Calculator is a 3 question calculator that uses a story-like journey to ask questions and provide dynamic results and responses based on the user’s inputs. The experience uses several advanced building techniques such as: fixed positioning, a custom progress bar, 100% viewport height via CSS, the form field show and hide microtheme, and calculator logic via rules. This template also includes more common elements such as: dynamic text, flow components, animations, accordions, and fun illustrations.

  • Type: Calculator
  • Complexity: Expert
  • Use case: Sales Enablement

Features available

Here are the major features, abilities, and interactive elements used in this template.

  • Flow
  • Accordion
  • Animations
  • Custom CSS
  • Flow
  • Form (Quiz)
  • Progress Bar

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.

>> Framing screenshots

Accordion

Step 1: To update the content within your Accordion, begin by selecting it on the canvas. 

Step 2: As a side note you are able to edit the Settings for the Accordion itself by always having the first section expanded, tagging each accordion section when it is clicked on (which is done by default), and closing an accordion section when another is expanded.

Step 3: Select an Accordion Section by clicking on it on the Canvas or by selecting in the Variables menu. Here in the Variables section you are able to update the Label for the specific Accordion Section, which is the front face title, and you are also able to provide it with a Tag.

Step 4: With the Accordion Section expanded on the Canvas, you can double-click on and edit the Text element, or add or remove content from within the Section.

Animations

Step 1: To change or remove an animation select an element on the page that currently has one.

Step 2: Go to the Animations section within the Edit tab remove an existing animation by clicking on the X.

Step 3: You can also change the animation by going to the Animations dropdown to select a trigger, and then select a new animation from the second drop down menu.

Step 4: If there is a delay on an animation you can remove that or change the timing in the same way you did the animation.

Custom CSS

Step 1: The custom CSS .fullHeight makes your Content container fill 100% of the browser from top to bottom. You can adjust or remove the custom CSS selector – .fullHeight – from the Content container by going into the Page tab

Step 2: Click on Creative CSS and adjust the selector’s properties or delete it all together, and then click Ok to save your changes. 

Step 3: You can also keep the custom CSS in the Page’s Creative CSS section and just remove the class from the Content container by going to the Edit tab.

Step 4: Select the Content container, then click on the Custom dropdown. The Under CSS classes click on the trash icon to delete the class from that container. This allows you to keep the CSS on your page in case you change your mind.

Flow

Step 1: To update the content within your Flow, begin by selecting it on the canvas.

Step 2: Within the Flow, locate the first Flow Step at the top. Within this Flow Step is a one Row and 

Step 3: At the very left of the Flow is a custom navigation made up of containers labeled Top, Middle, and Bottom that are used to navigate between the three Flow Steps. I would recommend keeping the text for these buttons to six characters or less.

Step 4: Each flow step contains a header so that you have the ability to increase the progress bar width from flow step to flow step.

Step 5: To update the image within the flow you will have to use the List panel on the right. With the List panel open and the image selected you will see the top funnel image is selected. Above in the list are a Mid funnel and Bottom Funnel. For this Creative all of the images are layered on top of each other in order for all of them to fade in individually and create the final result. 

Step 6: If you want to replicate something like this you can do so just keep in mind that the Bottom Funnel image is determining the height of the section, and the other images, Mid Funnel and Top Funnel, are Layered images using absolute positioning. (For the purposes of this presentation I have hidden the top two layers)

Step 7: If you want to just use a single image, you may delete the Mid and Top Funnel images and just use the bottom funnel image.

Form (Quiz)

Step 1: You can update your Data fields to a more descriptive Data field if you would like by selecting the Textbox on the page, going to the Edit tab, and clicking on the Data Field button.

Step 2: With the Data field window open you can select your new Data field from the categories and available options within them.

Step 3: Please keep in mind that by updating the Data field name you will be required to update them where they are found in the rules on various pages. For the quiz rules and logic please visit the logic section below.

Progress Bar

Step 1: To customize the progress bar for experiences with fewer or more questions, find and select the container labeled “Progress Bar Fill” within the LG/MD Progress Bar Container. 

Step 2: With “Progress Bar Fill” selected go to the Edit tab open the Layout Dropdown and adjust the width’s percentage.

Step 3: If you have ten questions, the width for the first progress bar should be 10% and the second page’s should be 20% and so on and so forth.

Step 4: This will need to be done for each page’s Progress Bar Fill

Step 5: You will also need to update the SM and XS Progress Bar Fills to match the ones on LG and MD

Content Writing Template

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to [email protected], so we can make sure to have this article constantly up to date.

Share this:

Silvia is a UX/UI designer at Rock Content who has been designing for over a decade. Silvia is driven to create interactive experiences that are user-friendly, visually appealing, and functional for all. Aside from designing, she is passionate about learning and improving her logic skills. When she's not working, find her working on puzzles or spending time with family and friends.