{"id":149,"date":"2020-03-13T14:34:52","date_gmt":"2020-03-13T18:34:52","guid":{"rendered":"https:\/\/sites.cru.org\/wptutorials\/?post_type=tutorials&#038;p=149"},"modified":"2021-08-27T15:17:09","modified_gmt":"2021-08-27T19:17:09","slug":"how-to-add-an-adobe-campaign-signup-form-to-a-post-or-page","status":"publish","type":"tutorials","link":"https:\/\/sites.cru.org\/wp-resources\/tutorials\/how-to-add-an-adobe-campaign-signup-form-to-a-post-or-page\/","title":{"rendered":"How to Add an Adobe Campaign Signup Form to a Post Or Page"},"content":{"rendered":"<p>Whether you are managing a Cru Site or a Microsite (part of cru.org) the process for adding an Adobe Campaign form to your website is the same.<\/p>\n<p><em>This tutorial assumes you\u2019ve already received your HTML form code. If you haven\u2019t please visit <a href=\"https:\/\/campaign-forms.cru.org\/\">https:\/\/campaign-forms.cru.org\/<\/a> or send a request to growthsolutions@cru.org and specify the service and variables that need to be set up such as email and first name.<\/em><\/p>\n<p><strong>1.<\/strong> In the left navigation of your WordPress admin panel click on HFCM. This is the Header Footer Code Manager.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-155\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.21.57-AM.png\" alt=\"\" width=\"147\" height=\"43\" \/><\/p>\n<p><strong>2.<\/strong> Near the top of the page click on the blue Add New Snippet button.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-156\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.23.05-AM.png\" alt=\"\" width=\"225\" height=\"51\" srcset=\"https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.23.05-AM.png 494w, https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.23.05-AM.png?resize=300,68 300w\" sizes=\"(max-width: 225px) 100vw, 225px\" \/><\/p>\n<p><strong>3.<\/strong> In the form that appears:<\/p>\n<p style=\"padding-left: 40px;\"><strong>a.<\/strong> Give the Snippet a name, like &#8220;Adobe Campaign Form&#8221;<br \/>\n<strong>b.<\/strong> For Site Display select &#8220;Shortcode Only&#8221;<br \/>\n<strong>c.<\/strong> Leave the rest of the fields the default<br \/>\n<strong>d.<\/strong> Paste the entire HTML code you received into the Snippet\/Code box at the bottom<br \/>\n<strong>e.<\/strong> Click the blue Save button at the bottom of the form<\/p>\n<p><strong>4.<\/strong> When the page reloads you&#8217;ll find your shortcode near the bottom of the form.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-157\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.28.55-AM.png\" alt=\"\" width=\"268\" height=\"49\" srcset=\"https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.28.55-AM.png 698w, https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.28.55-AM.png?resize=300,55 300w\" sizes=\"(max-width: 268px) 100vw, 268px\" \/><\/p>\n<p><strong>5.<\/strong> Copy the shortcode, including the brackets.<\/p>\n<p><strong>6.<\/strong> Open the page or post where you want the form to appear.<\/p>\n<p><strong>7.<\/strong> Paste the shortcode where you want the form. If you are using the Elementor page builder drag a Shortcode Widget onto the page and paste the shortcode into it. Be sure to save your changes.<\/p>\n<p><strong>8.<\/strong> We need to add one line of CSS to your site to get the alerts in the form to work correctly. In the left navigation of your WP admin hover over Appearance then click on Customize.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-158\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.33.38-AM.png\" alt=\"\" width=\"293\" height=\"77\" srcset=\"https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.33.38-AM.png 640w, https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.33.38-AM.png?resize=300,79 300w\" sizes=\"(max-width: 293px) 100vw, 293px\" \/><\/p>\n<p><strong>9.<\/strong> At the bottom of the Customizer click on Additional CSS.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-159\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.34.36-AM.png\" alt=\"\" width=\"262\" height=\"46\" srcset=\"https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.34.36-AM.png 592w, https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.34.36-AM.png?resize=300,53 300w\" sizes=\"(max-width: 262px) 100vw, 262px\" \/><\/p>\n<p><em>If you don&#8217;t see &#8220;Additional CSS&#8221; in the menu send an email to help@cru.org requesting the &#8220;Multisite Custom CSS&#8221; plugin be activated for you. Include a link to the site you are working on in the email.<\/em><\/p>\n<p><strong>10.<\/strong> In the panel at the bottom of the Customizer enter the following one line of code:<\/p>\n<p>.hidden { display: none; }<\/p>\n<p>It will look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-160\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.37.12-AM.png\" alt=\"\" width=\"225\" height=\"50\" srcset=\"https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.37.12-AM.png 548w, https:\/\/sites.cru.org\/wp-resources\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.37.12-AM.png?resize=300,67 300w\" sizes=\"(max-width: 225px) 100vw, 225px\" \/><\/p>\n<p><strong>11.<\/strong> Click the blue Publish button at the top of the customizer to save your change.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-162\" src=\"https:\/\/sites.cru.org\/wptutorials\/wp-content\/uploads\/sites\/206\/2020\/01\/Screen-Shot-2020-04-17-at-9.38.00-AM.png\" alt=\"\" width=\"135\" height=\"63\" \/><\/p>\n<p><strong>12.<\/strong> You can now browse to the page or post where you put the form and test it out.<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"categories":[6,1],"class_list":["post-149","tutorials","type-tutorials","status-publish","hentry","category-cru-microsite","category-cru-site"],"acf":[],"jetpack_sharing_enabled":true,"meta_box":[],"_links":{"self":[{"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/tutorials\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/tutorials"}],"about":[{"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/types\/tutorials"}],"version-history":[{"count":6,"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/tutorials\/149\/revisions"}],"predecessor-version":[{"id":466,"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/tutorials\/149\/revisions\/466"}],"wp:attachment":[{"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.cru.org\/wp-resources\/wp-json\/wp\/v2\/categories?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}