{"id":1833,"date":"2021-03-22T16:44:04","date_gmt":"2021-03-22T20:44:04","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=1833"},"modified":"2021-03-22T16:44:05","modified_gmt":"2021-03-22T20:44:05","slug":"gravity-forms","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-web-platform\/third-party-support\/gravity-forms\/","title":{"rendered":"Gravity Forms"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Gravity Forms is a powerful tool used to create professional looking forms embedded directly into a WordPress page or post. The easy to use form building platform helps to save time while also allowing users to preview their forms before taking them live on their site. Through its configuration settings there is a great deal of control over how users can interact with forms and how form entries are handled.<\/p>\n\n\n\n<p>Some of the key features that Gravity Forms provides are:<\/p>\n\n\n\n<ul class=\"wp-block-list is-style-default\"><li>An intuitive drag-and-drop form builder interface<\/li><li>Numerous field types providing complete form customization from the ground up<\/li><li>The ability to export form data via CSV<\/li><li>Available integration with various email marketing tools<\/li><\/ul>\n\n\n\n<p><strong>Note: <\/strong>before building forms with Gravity Forms the Gravity Forms plugin must be installed. To have the Gravity Forms plugin installed on a site, contact the <a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">UCOMM Web team<\/a>. Once the plugin is on a site content maintainers can begin building forms.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Building and Embedding Forms<\/h2>\n\n\n\n<p>The process of creating a form in Gravity Forms, and then embedding it to a page or post, is simple and straightforward. Below are step-by-step instructions on the process. For those who prefer a video tutorial Gravity Forms has provided <a href=\"https:\/\/www.gravityforms.com\/how-to-create-a-simple-contact-form-video-tutorial\/\">this useful resource demoing the drag-and-drop editor as well as how to create a simple contact form<\/a>. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a Form<\/h3>\n\n\n\n<p>Before adding a form to a page or post it must first be built through the Form section of the WordPress dashboard. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/forms-wp-dashboard-e1616341467732.jpg\" data-fullsize=\"1498x842\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/forms-wp-dashboard-e1616341467732-1024x576.jpg\" alt=\"clipart arrow pointing to forms section in wordpress dashboard\" class=\"wp-image-1839\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/forms-wp-dashboard-e1616341467732-1024x576.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/forms-wp-dashboard-e1616341467732-300x169.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/forms-wp-dashboard-e1616341467732-768x432.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/forms-wp-dashboard-e1616341467732.jpg 1498w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Once in the Forms section of the WordPress dashboard creating a new form is as easy as clicking &#8220;New Form&#8221; (or &#8220;Add New&#8221;) and then building it out with the form builder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form.jpg\" data-fullsize=\"1901x935\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form-1024x504.jpg\" alt=\"arrow pointing at add new button in forms section of wordpress dashboard\" class=\"wp-image-1842\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form-1024x504.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form-300x148.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form-768x378.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form-1536x755.jpg 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/add-a-form.jpg 1901w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Once the new form has been added, WordPress will prompt you to provide a name and description for the new form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description.jpg\" data-fullsize=\"1918x939\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description-1024x501.jpg\" alt=\"form title and form description fields for gravity forms\" class=\"wp-image-1844\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description-1024x501.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description-300x147.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description-768x376.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description-1536x752.jpg 1536w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/form-title-form-description.jpg 1918w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Once the title and description is provided and the form is created, building out the rest of the form is as easy as following the instructions provided by Gravity Forms in the form builder. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/creating-a-form.png\" data-fullsize=\"930x1025\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"1025\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/creating-a-form.png\" alt=\"snapshot of gravity forms form builder\" class=\"wp-image-1846\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/creating-a-form.png 930w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/creating-a-form-272x300.png 272w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/creating-a-form-768x846.png 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Note: <\/strong>once a form has been built it is necessary to click the &#8220;Update Form&#8221; button featured in the image above. It is also advisable that before adding a new form to a page or post to use the &#8220;Preview&#8221; feature first. This will not be a 1-to-1 representation of what the form looks like on a live page or post, but will provide a good estimation.<\/p>\n\n\n\n<p>Still uncertain about the form building process? Watch <a href=\"https:\/\/www.gravityforms.com\/how-to-create-a-simple-contact-form-video-tutorial\/\">this helpful video<\/a> from Gravity Forms on the form creation process. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding a Form to a Page or Post<\/h3>\n\n\n\n<p>Once a form has been created through the form builder it can be embedded in a page or post by adding a Form or Email Signup block and choosing the desired form from the available drop down. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/newsletter-signup.gif\"><img decoding=\"async\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/newsletter-signup.gif\" alt=\"\" class=\"wp-image-1867\"\/><\/a><\/figure>\n\n\n\n<p><strong>Note: <\/strong>once the form has been added any data collected will be available under the Forms section in the WordPress dashboard under Entries. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Collecting Data<\/h2>\n\n\n\n<p>Once there are data entries associated with a specific form they can be viewed in the Entries section under Forms in the WordPress dashboard. In order to use the data for other applications Gravity Forms also provides an export feature that will give the data in a CSV format. The process of exporting to CSV is outlined below. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exporting to CSV<\/h3>\n\n\n\n<p>To begin the export process, navigate to the Import\/Export section under Forms in the WordPress dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-1-e1616256482146.jpg\" data-fullsize=\"1500x843\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-1-e1616256482146-1024x575.jpg\" alt=\"clipart arrow pointing to gravity forms import\/export feature\" class=\"wp-image-1834\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-1-e1616256482146-1024x575.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-1-e1616256482146-300x169.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-1-e1616256482146-768x432.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-1-e1616256482146.jpg 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>On the next page, while under Export Entries, select a form to export its data. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-2-e1616256628884.jpg\" data-fullsize=\"1497x844\" data-zoom=\"true\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-2-e1616256628884-1024x577.jpg\" alt=\"\" class=\"wp-image-1835\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-2-e1616256628884-1024x577.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-2-e1616256628884-300x169.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-2-e1616256628884-768x433.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-2-e1616256628884.jpg 1497w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>Before performing the export identify which specific fields need to be included in the export, along with with the date range. Finally, click the &#8220;Download Export File&#8221; button to convert the data to CSV. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-3-e1616256669954.jpg\" data-fullsize=\"1499x844\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"577\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-3-e1616256669954-1024x577.jpg\" alt=\"\" class=\"wp-image-1836\" srcset=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-3-e1616256669954-1024x577.jpg 1024w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-3-e1616256669954-300x169.jpg 300w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-3-e1616256669954-768x432.jpg 768w, https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2021\/03\/csv-export-3-e1616256669954.jpg 1499w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Integration with Other Platforms<\/h3>\n\n\n\n<p>Another useful feature with respect to data collection is Gravity Form&#8217;s numerous integrations with third-party tools. Below are resources for help with setting up a few of the most common integrations, though there are many more. <\/p>\n\n\n\n<div class=\"wp-block-ncst-accordion ncst-accordion\"><div class=\"accordion\" id=\"ncst-accordion-0\">\n<div class=\"wp-block-ncst-accordion-item ncst-accordion-item panel\"><a class=\"accordion-item__header collapsed\" href=\"#ncst-accordion-item-0\" id=\"ncst-accordion-item-heading-0\" data-toggle=\"collapse\" data-target=\"#ncst-accordion-item-0\" aria-controls=\"ncst-accordion-item-0\" rel=\"noopener noreferrer\"><span class=\"accordion-item__expansion-indicator\"><span class=\"ncst-plus-minus-toggle\"><\/span><\/span><h5 class=\"accordion-item__label\">iContact<\/h5><\/a><div class=\"collapse panel-collapse accordion-item__content-container \" id=\"ncst-accordion-item-0\" aria-labelledby=\"ncst-accordion-item-heading-0\" data-parent=\"#ncst-accordion-0\"><div class=\"accordion-item__content\">\n<p><a href=\"https:\/\/docs.gravityforms.com\/icontact-add-on\/\">Setting Up the iContact Add-On<\/a><\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ncst-accordion-item ncst-accordion-item panel\"><a class=\"accordion-item__header collapsed\" href=\"#ncst-accordion-item-1\" id=\"ncst-accordion-item-heading-1\" data-toggle=\"collapse\" data-target=\"#ncst-accordion-item-1\" aria-controls=\"ncst-accordion-item-1\" rel=\"noopener noreferrer\"><span class=\"accordion-item__expansion-indicator\"><span class=\"ncst-plus-minus-toggle\"><\/span><\/span><h5 class=\"accordion-item__label\">Mailchimp<\/h5><\/a><div class=\"collapse panel-collapse accordion-item__content-container \" id=\"ncst-accordion-item-1\" aria-labelledby=\"ncst-accordion-item-heading-1\" data-parent=\"#ncst-accordion-0\"><div class=\"accordion-item__content\">\n<p><a href=\"https:\/\/www.gravityforms.com\/how-to-create-a-mailchimp-signup-form-video-tutorial\/)\">How to Create a Mailchimp Signup Form (Video Tutorial)<\/a><\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ncst-accordion-item ncst-accordion-item panel\"><a class=\"accordion-item__header collapsed\" href=\"#ncst-accordion-item-2\" id=\"ncst-accordion-item-heading-2\" data-toggle=\"collapse\" data-target=\"#ncst-accordion-item-2\" aria-controls=\"ncst-accordion-item-2\" rel=\"noopener noreferrer\"><span class=\"accordion-item__expansion-indicator\"><span class=\"ncst-plus-minus-toggle\"><\/span><\/span><h5 class=\"accordion-item__label\">Zapier<\/h5><\/a><div class=\"collapse panel-collapse accordion-item__content-container \" id=\"ncst-accordion-item-2\" aria-labelledby=\"ncst-accordion-item-heading-2\" data-parent=\"#ncst-accordion-0\"><div class=\"accordion-item__content\">\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.gravityforms.com\/setting-up-the-zapier-add-on\/)\">Setting Up the Zapier Add-On<\/a><\/li><li><a href=\"https:\/\/docs.gravityforms.com\/zapier-add-on\/\">Using the Zapier Add-On<\/a><\/li><\/ul>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<p><strong>Note: <\/strong>read more about Gravity Forms&#8217; numerous third-party add-ons on <a href=\"https:\/\/docs.gravityforms.com\/category\/add-ons-gravity-forms\/\">their official site<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Still unsure about about getting started with Gravity Forms? Feel free to reach out with any questions or concerns at&nbsp;<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Gravity Forms is a powerful tool used to create professional looking forms embedded directly into a WordPress page or post. The easy to use form building platform helps to&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":291,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Create embedded forms on pages and posts with ease\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","footnotes":"","_links_to":"","_links_to_target":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/1833"}],"collection":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=1833"}],"version-history":[{"count":35,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/1833\/revisions"}],"predecessor-version":[{"id":1880,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/1833\/revisions\/1880"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/291"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=1833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}