This Savings Calculator is a 3 question calculator containing choices with iconography and a slider that are all wrapped in a flow keeping the user on a single page and moving vertically from question to question. It has a hero section, and below there is a reveal section that shows more content when hovered over. The assessment below has choices that change color when hovered over and a slider with a range in dollar value. This calculator is also a gated experience with a form before taking the users to the result page. The results page displays results based on the user’s selections, and additional resources below.
- Experience type: Calculator
- Complexity: Expert
- Use case: Lead Generation
Features available
Here are the major features, abilities, and interactive elements used in this template.
- Flows
- Form
- Icons
- Reveal
- Tooltip
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.
Icons
Step 1: Place a form, then place a choice group within the form. Set your data field here.
Step 2: On the form, select microthemes style “none”. Note: This should be the only microtheme selected; if there are any others, delete them. Then place a responsive grid within the choice group. After, move each choice into its own column.
Step 3: Set the choice settings to expand. Then place a container inside the choice. You can set your margin, padding and color at this stage or you can use a pod with a prefix standardized padding that is part of your themekit.
Step 4: Place an image and text element into the container.
Step 5: On the image, go to layout and set the display to “inline-block” and set the vertical alignment to “middle”. For the text, go to layout and set the left margin to 10px, display to “inline-block” and vertical alignment to “middle”. *Note: If the image you are using is too big, place your image in a new container and put that container within the first container. Set the display to “inline-block” and vertical alignment “middle”. If your text exceeds one line, place another container within the first container and place your text into the second container. Set the container to display “inline-block” and vertical alignment “middle”. It is best when setting a fixed width to use percentage. Think of the entire container (image + text = 100%), if you want the image to be smaller than the text, set it to 20% on the image container and 80% for the text container.
Flows
Step 1: Place a flow on the canvas. This flow should go below all other sections set up above. If you are placing the flow between two sections, when dragging you want the entire canvas to highlight light green, drag to the middle point until you see a darker green line show up; that’s where the flow should go.
Step 2: By default there will be three flowsteps added to the flow but feel free to add more if your calculator requires more questions. Within the flowstep, add a responsive grid. Use your right arrow key to go down to the row level, select how you would like to display the responsive grid in different viewports. Feel free to add more columns into the grid for your calculator. For this template, one column for the questions and labels and another row below with three columns.
Step 3: Within the first column, place a form element.
Step 4: Within the form element, place a responsive grid and go to the micro-theme under grid layout and select the “nested responsive grid”.
Tooltip
Step 1: Start by placing the text that will be displayed alongside the tooltip in a container. Set that container to display “inline-block” and set a margin (ex. 5px) in the layout panel.
Step 2: Drag in an empty container next to the text container but not inside of it. Go to the layout panel and set the display to “inline-block” and vertical alignment “top”.
Step 3: Drag in a reveal element, set the reveal type to “overlay toggle”, reveal when “hovered”, and position “right”.
Step 4: In the reveal trigger, place a text element and grab the html styling for an information icon from font awesome.
Step 5: In the reveal container, drag in a container, go to the microthemes and apply a pod to it. Then drag in a text element. After completing the copy, navigate to the microthemes under text, select fine print.
Reveal
Step 1: Place a responsive grid, delete the two additional columns leaving one. Change the row settings so it displays according in large, medium, small, and x-small viewports.
Step 2: Place a container within the column. In the layout panel apply a width percentage, display ‘inline-block’, and vertical alignment ‘middle’.
Step 3: Place a reveal into the container that is inside the column. Set the reveal type to ‘toggle’, Reveal when ‘hovered’, check mark ‘conceal other reveals’, and position ‘top left’. *Don’t forget to also tag the reveal.
Step 4: In the reveal trigger, place a container. Within that container, place an image and text. On the container level apply the Micro-Theme alignment ‘Center Align’ and Animation ‘Fade In (Scroll Always)’.
Step 5: In the reveal container, place a container within it. Apply the Micro-Theme ‘White pod’ and Alignment ‘Center Align’. The Place text within the inner container.
Step 6: In the reveal level copy the reveal and paste it in the 3 other containers that are inside the column.
Step 7: To make the arrow transition, place a container inside the column level.
Step 8: To make the arrow transition, place a container inside the column level. Then place an arrow icon within the container. Finally, duplicate the container containing the arrow 2 times. Drag the container in between the containers containing the reveals. It will highlight bold green, you will know that you’re placing it in the middle of two elements.
Form
Step 1: Place a form in a single column spanning the entire row.
Step 2: Place a responsive grid within the form. Don’t forget to set in the Micro-Themes ‘Nested Responsive Grid’. Remove the additional third column added by default. Set your row settings to even in large and medium viewports.
Step 3: Drag in a Textbox element and place it within the column inside the form. Give this element a label, data field, input type, number settings, and pre-populated values. Copy the Textbox into the columns 5 times.
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.
Social Profiles