  {"id":2408,"date":"2024-01-24T15:27:11","date_gmt":"2024-01-24T20:27:11","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=2408"},"modified":"2024-09-18T20:31:23","modified_gmt":"2024-09-19T00:31:23","slug":"add-form-to-a-page","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-5-forms\/add-form-to-a-page\/","title":{"rendered":"Add Forms to a Page"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Add Forms to a Page\n                    <\/h1>\n                \n                                \n                                    \n\n\n<p>Module 5.4 \u2013 Mastery: Forms: Adding forms to a page<\/p>\n\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-By-Step\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#video-tutorial\" class=\"font-medium hover:underline\">\n                        Video Tutorial\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        3.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out!\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<p>In order for users to fill out your form, you will need to add it to a page.<\/p>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-By-Step<\/h2>\n\n\n\n<p><strong class=\"myprefix-text-bold\">1. <\/strong>Edit or <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-2-content-essentials\/module-2-pages\/\">create the page <\/a>you would like your form to appear on.<\/p>\n\n\n\n<p><strong class=\"myprefix-text-bold\">2<\/strong>. <a href=\"https:\/\/carleton.ca\/cutheme-docs\/getting-started\/module-3-essential-text-blocks\/module-3-blocks-overview\/#addblock\">Add the&nbsp;Gravity Forms&nbsp;block using the block menu.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"148\" height=\"166\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.38.54@2x.png\" alt=\"Insert form\" class=\"wp-image-2457\" style=\"width:107px;height:auto\"\/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">3<\/strong>. Choose your form from the&nbsp;<strong class=\"myprefix-text-bold\">Select a Form <\/strong>dropdown menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"630\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.38.26@2x.png\" alt=\"Select form\" class=\"wp-image-2456\" style=\"width:295px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.38.26@2x.png 792w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.38.26@2x-320x255.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.38.26@2x-512x407.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.38.26@2x-768x611.png 768w\" sizes=\"auto, (max-width: 792px) 100vw, 792px\" \/><\/figure>\n\n\n\n<p><strong class=\"myprefix-text-bold\">4.<\/strong> Under <strong class=\"myprefix-text-bold\">Block Options<\/strong> &gt; <strong class=\"myprefix-text-bold\">Form Settings <\/strong>at the right, toggle<strong class=\"myprefix-text-bold\"> Form Title,<\/strong> and <strong class=\"myprefix-text-bold\">Form Description<\/strong> to stop either from being displayed. Note you can also change the form by selecting a new one from the dropdown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"554\" height=\"406\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.42.57@2x.png\" alt=\"Gravity forms block optons\" class=\"wp-image-2458\" style=\"width:261px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.42.57@2x.png 554w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.42.57@2x-320x235.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2024\/01\/CleanShot-2024-01-25-at-11.42.57@2x-512x375.png 512w\" sizes=\"auto, (max-width: 554px) 100vw, 554px\" \/><\/figure>\n\n\n\n<h2 id=\"video-tutorial\" class=\"wp-block-heading\">Video Tutorial<\/h2>\n\n\n\n<div class=\"cu-section cu-section-5xl not-contained  cu-prose cu-prose-dark\"><figure class=\"cu-embed cu-component not-contained mx-auto max-w-5xl\"><div class=\"relative w-full pb-[56.25%] overflow-hidden border border-cu-black-100\"><iframe title=\"Videos Embed\" src=\"https:\/\/www.youtube.com\/embed\/nzLNzwtNWcI\" class=\"cu-embed-iframe\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div><\/figure><\/div>\n\n\n\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n        \n    \n    <dl class=\"cu-description cu-component-updated\">\n        \n    <div class=\"grid pt-4 pb-3 border-b accordion border-cu-black-100 md:pt-6 md:pb-5 first:border-t\">\n        <dt class=\"font-semibold not-prose\">\n            <button class=\"flex items-center justify-between w-full text-left accordion__button\" aria-expanded=\"false\" aria-controls=\"accordion-transcript-add-forms-to-a-page\">\n                <span class=\"flex-1 ml-auto text-left break-words whitespace-normal cu-icon\">\n                    Transcript \u2013 Add Forms to a Page\n                <\/span>\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewbox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\" class=\"w-5 h-5 ml-auto transition-transform rotate-0 accordion__icon text-cu-black-500\">\n                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M8.25 4.5l7.5 7.5-7.5 7.5\"><\/path>\n                <\/svg>\n            <\/button>\n        <\/dt>\n        <dd class=\"p-0 mt-0 cu-prose cu-prose-first-last accordion__content md:p-0 md:mt-0\" hidden=\"\" id=\"accordion-transcript-add-forms-to-a-page\">\n            \n\n<p>Hello and welcome to cuTheme Mastery Training, Module 5. In this video, we will go over Adding a Form to a Page.<\/p>\n\n\n\n<p>The previous videos have gone over customizing the form itself, so it\u2019s now time to add the form to your site.<\/p>\n\n\n\n<p>First, go to the page you want the form to be on. I want it to be here, so I\u2019ve got this up.<\/p>\n\n\n\n<p>Now, to the block selection menu, open it up, and scroll down to \u201cEmbed\u201d, and select \u201cForm\u201d.<\/p>\n\n\n\n<p>It\u2019ll ask you to select a form, so I\u2019m going to put my Test Form here. And just like that, my form is now on my page.<\/p>\n\n\n\n<p>Now there are some settings here, you can toggle the form title, the form description, and you can also choose to change the form if you want.<\/p>\n\n\n        <\/dd>\n    <\/div>\n\n\n    <\/dl>\n\n\n    <\/div>\n<\/section>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out!<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a new page to house your form<\/li>\n\n\n\n<li>Add your form to the page<\/li>\n\n\n\n<li>Turn off the title and description<\/li>\n\n\n\n<li>Save your page<\/li>\n\n\n\n<li>View the page and test out your form by filling it out and submitting it!<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/mastery\/module-5-forms\/export-form-entries\/\">Next: Export From Entries<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In order for users to fill out your form, you will need to add it to a page. Step-By-Step 1. Edit or create the page you would like your form to appear on. 2. Add the&nbsp;Gravity Forms&nbsp;block using the block menu. 3. Choose your form from the&nbsp;Select a Form dropdown menu. 4. Under Block Options [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":2305,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[11],"class_list":["post-2408","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":false},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=2408"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2408\/revisions"}],"predecessor-version":[{"id":4259,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2408\/revisions\/4259"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/2305"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=2408"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=2408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}