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.
This tutorial assumes you’ve already received your HTML form code. If you haven’t please visit https://campaign-forms.cru.org/ 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.
1. In the left navigation of your WordPress admin panel click on HFCM. This is the Header Footer Code Manager.
2. Near the top of the page click on the blue Add New Snippet button.
3. In the form that appears:
a. Give the Snippet a name, like “Adobe Campaign Form”
b. For Site Display select “Shortcode Only”
c. Leave the rest of the fields the default
d. Paste the entire HTML code you received into the Snippet/Code box at the bottom
e. Click the blue Save button at the bottom of the form
4. When the page reloads you’ll find your shortcode near the bottom of the form.
5. Copy the shortcode, including the brackets.
6. Open the page or post where you want the form to appear.
7. 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.
8. 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.
9. At the bottom of the Customizer click on Additional CSS.
If you don’t see “Additional CSS” in the menu send an email to help@cru.org requesting the “Multisite Custom CSS” plugin be activated for you. Include a link to the site you are working on in the email.
10. In the panel at the bottom of the Customizer enter the following one line of code:
.hidden { display: none; }
It will look like this:
11. Click the blue Publish button at the top of the customizer to save your change.
12. You can now browse to the page or post where you put the form and test it out.