{"id":5042,"date":"2023-08-24T12:57:20","date_gmt":"2023-08-24T12:57:20","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5042"},"modified":"2025-02-17T11:53:31","modified_gmt":"2025-02-17T11:53:31","slug":"how-to-use-the-savings-calculator-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/how-to-use-the-savings-calculator-template\/","title":{"rendered":"How to use the Savings Calculator Template"},"content":{"rendered":"\n<div style=\"position: relative; padding-bottom: 56.25%; height: 0;\"><iframe src=\"https:\/\/www.loom.com\/embed\/7ca1adc300e54527aa8c807b692be265?sid=ba884264-8235-4281-8a10-769026dcf61d\" frameborder=\"0\" webkitallowfullscreen=\"\" mozallowfullscreen=\"\" allowfullscreen=\"\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\"><\/iframe><\/div>\n\n\n\n<p>This <a href=\"https:\/\/iontemplates.rockcontent.com\/preview\/premium\/calculator\/savings-calculator\">Savings Calculator<\/a> 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\u2019s selections, and additional resources below.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Experience type: Calculator<\/li>\n\n\n\n<li>Complexity: Expert<\/li>\n\n\n\n<li>Use case: Lead Generation<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Features available<\/h2>\n\n\n\n<p>Here are the major features, abilities, and interactive elements used in this template.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flows<\/li>\n\n\n\n<li>Form<\/li>\n\n\n\n<li>Icons<\/li>\n\n\n\n<li>Reveal<\/li>\n\n\n\n<li>Tooltip<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How-to use<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><a href=\"https:\/\/drive.google.com\/drive\/folders\/194WECC_3o7yq0zKqFuqiY7cVZPu4Tb8y\">&gt;&gt; Framing screenshots<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Icons<\/strong><\/h3>\n\n\n\n<p>Step 1: Place a form, then place a choice group within the form. Set your data field here.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/JwihlAbVRfc1_duIwEuc9bmtuSiQGr495x2hMHbv0z8aLTUqKU8Ub-1-1WKzlp6XPfiAXsJqITZ0HL38KG7NGcAmyhXOj7hxPJE3oSmjroeWpeVBGobIPJv0PFE5y0fEbwNccOIbsYvcIhEPqt7tZkI\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/n_2rdeCBZ-BuOhrqkqB1XJke8gmK34QDpSFF9tz1kOS4yS6xvckIA5WcncUN0bL6ZDJSZ_L0Ty6lYuN-QUbnYJixwBA3gKzIByZ5iUs51gCdIPKI5dAAsRlO3W2VEuVsLpGZ--y3Qp465lpNQqn2eGM\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: On the form, select <strong>microthemes style \u201cnone\u201d<\/strong>. Note: This should be the only microtheme selected; if there are any others, delete them. Then place a <strong>responsive grid within the choice group<\/strong>. After, <strong>move each choice into its own column<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/9NvvNkIz8OR9hpRKWMVAOYnEtoDstWpA8s9-t9SICu1tYpL9wCsM2PdVV0p48pEZMplu0lRpROpZl3KWcfcvR35kO0IjBGkTPebOWpKVRHiHeUqKHvoAnRwCBJM7sqtu4ld9DIWjKuacXo6sXhLsBzw\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/wWkTi3uqT7F8Ot5hFDtD-Qc3yVBe6EU4wnv1DeXyq1UVG6cRDGRGOfLIjLBhZiVRCOnpmNMA5EBxR84nNC7w7QCnQTkLbwHZSKUTqxbsFoqQTIuTgjGZrGJweh5rpqoh9y7CaGpqtO3EYQB456Nnu-Q\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/aWu_r32IOEhSHanepauObh7i8VIm7KJE1heU4MPLKvs6kki6-z28fVmA13rr2h4gAx4QrDmpYRe5uE3pi2Bp4KUOYpMXTkO32s8uh5fwry1EdogAkBXVUHzqUQJ93NyPEGx3NouPXuIkAd7kAljId0w\" alt=\"\"\/><\/figure>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/RK_IItAFpkMY0jovt5Z8srtwSpfd2G2EZw-cb5eYCcOojz7fBFpzFnbki8xTLOyf4wPZubv-8Xv1OgBBVIci4mbL_haCIlwme5E92Rk6XRee4x8ryYv3klyF97yQuv6XgooTZn42jvzqYeyVOl55hNo\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/19GhL9Aheyj99-3M_kahzfxeNV2mX4hK1X_Y7JH_rkHS14cALVrnqrS__9LzBHO4wABdyLCtfIQ9gVuDatjmlWfqdDoFPFfmisgytcAmF1Vl47E4QBrv7dirgYux1lgf53d1kcrmZOUSNWT18zXlsv8\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/C7ikM_f02trU4FzB04uy-F5gwwpSsrOaX-sWwllaBbsIXiY6f4jJOQ_GkbXp0YsVLOD_9oE2dqKfInGlXMr78jmykinP_YKGQg-bFAOz1hqIahdL7EhWQuej6mrHvVOwVL3PThQTjo42oi-NYeNQOzI\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: Place an image and text element into the container.<\/p>\n\n\n\n<p>Step 5: On the image, go to <strong>layout and set the display to \u201cinline-block\u201d<\/strong> and set the <strong>vertical alignment to \u201cmiddle\u201d<\/strong>. For the text, <strong>go to layout and set the left margin to 10px, display to \u201cinline-block\u201d<\/strong> and <strong>vertical alignment to \u201cmiddle\u201d<\/strong>. <strong>*Note:<\/strong> 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 <strong>display to \u201cinline-block\u201d<\/strong> and <strong>vertical alignment \u201cmiddle\u201d<\/strong>.&nbsp; 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 <strong>display \u201cinline-block\u201d<\/strong> and <strong>vertical alignment \u201cmiddle\u201d<\/strong>. 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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/RAS7KPNoCko_DpDVb2vz3F7fX4jC9GP-nAecR-y6Ad9Vo6Rrf69pkoxcRBHfncLQpW1l2VIwyIrNXo4csL7vB98SVMIDemKbp7-544Du73S8dahN-csNdKD0l_AF2CLtJqG-8SXPnBWDtz_llOL9Tlw\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/YtuqCVwxWKSES8-BIfAinmG2urpoR6g07g94XJVeSDsyysXgJOU5urNrSPaDYBpfOtX7SojqRpMtH2FQfgW-0bZhxVBhBIJssAfkNvD8DZZy2_BTqs8pr3014kNiddcqtn74s9nzNS2UbBLBdCSicSE\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Flows<\/strong><\/h3>\n\n\n\n<p>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&#8217;s where the flow should go.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/1fwhBlqn_RhB7ipwXcAGwgwSKhxmescEiSBUfRyMhFCu2kh3tqHaZpGaMu_dY8dPJNRqZsEdY82lCN5EvwRBwYefHBGHroQqBP3v3LJmVUSt-7tz-YgU9iLVGz_tNAQrxUICMQvG-CBInKmHSV8-FqM\" alt=\"\"\/><\/figure>\n\n\n\n<p>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. <strong>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.<\/strong> 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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/dZpl-pCmLE4B66sFq0IoYp2mqURg9A8Nt5560e5esKdPokF0MjnLrKayD0PIkt87OsE-gdBl9GkdCep5OdUkZRKNEBa_5Nsa1JEEqQ0TglLaNwDoxgbSnyx9WhJpcRmkk9j9fqB2_wspJHMt6OJd6Mc\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Within the first column, place a form element.<\/p>\n\n\n\n<p>Step 4: Within the <strong>form element, place a responsive grid<\/strong> and go to the <strong>micro-theme under grid layout and select the \u201cnested responsive grid\u201d<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/go5nyNhYprS3VODb1jeSAREQ5RBSl_KzP4h6i76tWGT-uXTutXx9qYxCAeMqFrzw5_OV3FVs1VHkLwnWN6fcTbXk0SZj1GOirhlAHSizF0rw1gbCg8r2yIn6i93UXnEVKHxiUtnelnIKrBDkgyivXYE\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Tooltip<\/strong><\/h3>\n\n\n\n<p>Step 1: Start by placing the text that will be displayed alongside the tooltip in a container. <strong>Set that container to display \u201cinline-block\u201d and set a margin (ex. 5px) in the layout panel.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/6gIFR4US4-GIAxTH6sepey_SBeMWB-mSllPmUrxBHrzTMayJ-ib7x8nLW1gO66-H_yUjTMSlRGKDR7Hae9-uewY5P2EC-IH0kyrDMsZ5sH4CImDF5nwx-vMizuQdCCvhjWhjGk9r7JYK3HHaHxFOGh8\" alt=\"\"\/><\/figure>\n\n\n\n<p>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 <strong>display to \u201cinline-block\u201d and vertical alignment \u201ctop\u201d.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/rLiZXZ7ZEiDsiLJfXo8KbD60K7HCH2Lk6RGfwrp3utv-Af0JNQs1zERDal303ELF8X85xeCWxJxUNqqhGbOa-FSoB7Ag4y7t5t4fbpRCc1SjyDcRunmKl4U1SkjmNvRyQQXwRykyzHaZm5yKzxYrOfA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Drag in a reveal element, set the <strong>reveal type to \u201coverlay toggle\u201d,&nbsp; reveal when \u201chovered\u201d, and position \u201cright\u201d.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/kOe5kxSKa8OdZH7QoV1oVHqkDs5T1zFxvg6-JMe3nyBGJru6QfRZj_X7zidKDzYBd7kJmAZsyXJZJb68BuzHEsycVAE1a2QSQHKHEHV33a6aAv5EYl__jcgIqYVExjvx7uz2hpWjPvWyJvBNMGB_wyQ\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/uJnuBb5H2Dyiawi8mNDWIBqcV8Ng8rHkZRavMPrYivg-1GSa65tS3qo523BCcVgrHd3sjkTjEKIW-G2a_6rEm5spNDyfjYFML-YJQMU83zIIk_FRwo4qIZ9mCuUtGT0K81oYEN3XHVWXjEc9RB-7yRE\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: In the reveal trigger, place a text element and grab the html styling for an information icon from <a href=\"https:\/\/fontawesome.com\/versions\">font awesome<\/a>.<\/p>\n\n\n\n<p>Step 5: In the reveal container, <strong>drag in a container, go to the microthemes and apply a pod to it.<\/strong> Then drag in a text element. After completing the copy, <strong>navigate to the microthemes under text, select fine print.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/iRTOyvzKvkGqiaJ0I1Tn65O8b2qrVpZC-536nMLRrJV2OfNIydq3SEzu_c5jy_lz0c7wl-gbXbMqb2Xqh8B_lK-wm5OP2wNPvHqKnW5UXvyPGR0M-oT8NQsIwofgJXH073upfxGdNd4Up2B_Vgc3pEc\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Reveal<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/fdZxgvIgix1V7sDbdtQTGl7hbUCTfAxSllUjaY3LaeX2pKx_zavUPsRnFRmxstvcG4--V11BipB_ryonxfyTsaKL_FwlVsDs-FPSzgf1uLvh5tjOWRHFVu_czj_UeG-mYuZJ6TGWw7jLaPhXpY2D5Ng\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 2: Place a container within the column. In the <strong>layout panel apply a width percentage<\/strong>, <strong>display \u2018inline-block\u2019<\/strong>, and <strong>vertical alignment \u2018middle\u2019.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/ZdNwKLaD_S6t_j0eFSL1noJOuUBjawjeE1k91e_kpAVcQMhXDumSHl0fSqzURS-fBTbfoExv7FaG604D3aeLn_-I66YzqKfjF3klyvIIT4azTWVEw7eQsiNmEvj9dupjsqNL6OsNE95zjZC07b9y18E\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Place a reveal into the container that is inside the column. <strong>Set the reveal type to \u2018toggle\u2019, Reveal when \u2018hovered\u2019, check mark \u2018conceal other reveals\u2019, and position \u2018top left\u2019. *Don\u2019t forget to also tag the reveal.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/6SUATMJwYipo-HQ8rad2V8aZvxtoaAh-Zc6DGHmR7QrbaiXyd55p1cFZxOrlBm70uhq7wTD18qBMhzQzIvhXBmLhW8IsAtRy7fGxFShRyonZfQ6xcBPL7Q3xfaWTQi2jgbQP30O5E5hY-sWNCHki3u0\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 4: In the reveal trigger, place a container. Within that container, place an image and text. On the container level apply the <strong>Micro-Theme alignment \u2018Center Align\u2019 and Animation \u2018Fade In (Scroll Always)\u2019.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/O0NZxJ37n6vrMZGkdhzkEg84IQYgFEwE9sXHgEWRuOV7j2N7CFNLbcnpG_wehBS_JSICS61e_9cErVQm09eKNuLpLDsoRuvpkYgUi3wg8t8c7DhQs_YVK6aRk-NcflvJJoxTzdWspDfBIBh_1MLgBNw\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 5: In the reveal container, place a container within it. <strong>Apply the Micro-Theme \u2018White pod\u2019 and Alignment \u2018Center Align\u2019. The Place text within the inner container.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/tL1soOZV-z0a4lYscC_Ci8G_f8nmriARN1arRUQhP-H-FfeQkXhP0M9tQx5hR_R7o-QR64_TKjYl6-WtjxTqCzggZVAaStRLFeE-wkcb6xduHV2zNB-m7qg2eqZms1fA_PBCcmqH-QHNmKcW1W1u-ZU\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 6: In the reveal level copy the reveal and paste it in the 3 other containers that are inside the column.<\/p>\n\n\n\n<p>Step 7: To make the arrow transition, place a container inside the column level.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh3.googleusercontent.com\/sO3p4BcfF_1kfVsE_WNVeZkY8aX0ihwR-zto-cRwzAkGoHC9sjISyX2yjWXRYHO257e7gUK3RIf66CwPFUnYT0Ew6fvaYqT_B4MfPz4cTZTNsrmcdKdRiC1Q01nlyeJKaNdXdhpDNCdoJuApj1y2Ki4\" alt=\"\"\/><\/figure>\n\n\n\n<p>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\u2019re placing it in the middle of two elements.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/h4X_k1WD81MRKIWLB9BfOd31PEjzFlmtrmmOQL8C8VHF6s6PKzDCs5YNK9BOD27xU6ddp4yqvGm5PDnhiVU5vrGKyPrlLuLCBAtS37agwQeSuhFYDqMvnq64rGfqrX0EvjsYMhS2uGHOOgv8X5nqPIo\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/s40yqS10uFg8AHuHKaljGxGwn-DJU8U1Rc4QfN6V3LP8iOcJpRswFkjZN5rgMuQDclEbWDOy-ai1XCria7DuJcw0UDC0l9pztHcBQx5KfCYI73gOEidoJgl7gKEFnXOSqRq7qomtJbx_jQeifQpIKJk\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh4.googleusercontent.com\/T07PEsJZLwKkILFJVznbp19DJs-hNu8RlmovELtlT53cBQJ16MVfaoF0Tphq4aTy_zXJXd4kk5aAP78Z2VYZA-oDvQ9_dfeSgJDz_iLtFwpCrKd9aWHzVQdoRplWvXps_tdGF3wA5HB_8-ONzzZmozs\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Form<\/strong><\/h3>\n\n\n\n<p>Step 1: Place a form in a single column spanning the entire row.<\/p>\n\n\n\n<p>Step 2: Place a responsive grid within the form. Don\u2019t forget to set in the <strong>Micro-Themes \u2018Nested Responsive Grid\u2019.<\/strong> Remove the additional third column added by default. Set your row settings to even in large and medium viewports.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh6.googleusercontent.com\/CPVoSf_liQE6ugOWv9RYqtOaqmGTCnMXxiO4KxWsdB7UxL-Q3EZ1WBvMr1mq__n0har81dDkgvza65btF3xTBZv6ETv0nJHfFliMSGA8Z9MHo81L2CPtfzJHph3pM0ILpbZ-YkZDDJuQrRTBq9GMfNA\" alt=\"\"\/><\/figure>\n\n\n\n<p>Step 3: Drag in a Textbox element and place it within the column inside the form. <strong>Give this element a label, data field, input type, number settings, and pre-populated values.<\/strong> Copy the Textbox into the columns 5 times.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/vLTMdnW6xAEP9uCLQ0WQgsVgwppK7_E1EyVlERXmAen91SI9NZRmXimu6GRPaaTTxcBRA67jnSeU9iNWc6SEHQC52KHUV5lRLS-WjlKNvupqTNQK_FF8yreutMY-Lq0eA-Sjyr3MyrCX9BvApRY25bQ\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/lh5.googleusercontent.com\/NCEdapOgc8L23wJlJqgvyZIs9fRj0XRCWxBcm8FOXkN2j2Ru1j77YfVJNCyO6d9nhj2PyF1znfIY2XxcpTJHm4RemaoSL-CrUPO5OsiAFUJneFnaseGw1hoHil9wxEg04e3bSLgoeSwxMcR-8pMiPMs\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Content Writing Template<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1-QEZeRv3kg0BZmfnI58Ds3TSf9ETnfgB-wC9Tx9P_to\/edit?usp=sharing\">Here is the content structure\u2019s template<\/a> 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Related templates<\/h2>\n\n\n\n<p>If you like this template, you might want to check out these other similar models.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/paid-media-calculator\/\">Paid Media Calculator&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/3-quizzes-with-grades\/\">3 Quizzes with Grades<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/report-card-assessment\/\">Report Card Assessment<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/rockcontent.com\/gallery\/infographic-with-quizzes\/\">Infographic with Quizzes<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Have a question?<\/h2>\n\n\n\n<p>Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to <a href=\"mailto:help@ioninteractive.com\">help@ioninteractive.com<\/a>, so we can make sure to have this article constantly up to date.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":5145,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[39],"tags":[],"class_list":["post-5042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5042"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5042\/revisions"}],"predecessor-version":[{"id":7511,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5042\/revisions\/7511"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5145"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}