We created forms and embedded them in a popup container on the landing pages. To edit or create these forms, go to ‘Templates’ in the WordPress back end.
Any form can be cloned by clicking ‘Clone’. Rename the form with the page name that you’d like to connect it with. For example, for the page named ‘Accelerator Landing Page 2019’, we cloned a popup template and named it ‘Popup Form – Accelerator Landing Page 2019’.
2. Actions after submit
You can edit the fields and then in ‘Actions After Submit’ choose what actions need to be performed after the form’s submit button is clicked. For example, you can redirect users to a thank you page and also send them to an ActiveCampaign list with a tag.
Note: We used the action Webhooks on forms to connect to Zapier, which sends these contacts to ActiveCampaign, Pardot, and Google Sheets. Since we are now using only ActiveCampaign, we can send them directly to AC from here. The only limitation with this AC integration is that it shows the standard custom fields to send. But we will still need Zapier to send these entries to a Google Sheet. So it probably makes sense to use Zapier to send to both AC and Google Sheet.
3. Thank you page for the redirect URL
You can clone a thank you page for an existing landing page, edit the contents and the URL, and rename the page. Then, put the URL in the redirect field in the form.
Connecting popup container to the CTA
1. Popup container to hold the Elementor form
Open the page called ‘Accelerator Landing Page 2019’. At the bottom, you will see a popup box named ‘Popup’. This popup container holds the forms created/cloned in ‘Templates’. Click this popup container and go to “Contents” and choose your Elementor template (in this case, the popup form).
2. Trigger Element CSS class for the CTA
To show the popup container when we click the CTA, we need to create a trigger element CSS class and then attach it to the CTAs.
Go to ‘Trigger’. Select the options as shown in the image below. For this page, we gave the name ‘discovery-call’ to the Element CSS Class.
3. Attach Element CSS Class to the CTA
Click the ‘SCHEDULE A CALL’ CTA and go to ‘Advanced’. You will see that we put the name “discovery-call” in CSS Classes. This is the same name that we had put in the ‘Trigger’ option in the popup container.
ARForms for Stripe payments
1. Clone form
We are using ARForms to create Stripe Payment forms. You can duplicate these forms by moving your mouse over the form titles to see the options.
After duplicating, the forms need to be renamed. To do that, click the ‘Edit’ icon. Once the form opens, go to ‘Advanced Form Options‘ on the rightand click ‘Yes’ for ‘Display Title and Description’. When the title appears, edit it and click ‘No’ to hide it.
2. Stripe configuration for the cloned form
For every ARForm you create or clone for Stripe payment, you need to configure the Stripe for the respective form. On the left, under ARForms, you will see ‘Stripe configuration‘. Click that and create one (open an existing one on another tab to copy and paste keys and to see what fields are to be mapped).
We need to configure Zapier to connect successful payment submissions for these payment forms to ActiveCampaign and Google Sheets.
Under ARForms, you will see ‘Zapier Configuration‘.
Create a new one, choose the form, and in Webook enter the Zapier Webhook URL (see the last tab ‘Zapier’ to know how to do this). Then choose the fields you want to pass to Zapier.
Have a Google Sheet ready with headers – such as date, first name, etc. – in the first row of the sheet.
Gravity Forms for download resources and other pages
Gravity Forms were already being used on the website in some places. After Pardot was deactivated, we replaced the Pardot forms with Gravity Forms. In the back end, you will find them under ‘Forms’.
Each Gravity Form has its own ‘Settings’. Click the ‘ActiveCampaign’ settings and select the list, fields, and tag to be sent to ActiveCampaign.
To insert a Gravity Form on the existing pages created with Visual Composer, you can add the Gravity Form element from Visual Composer and select the relevant form name.
Elementor’s built-in form, ARForms, and Gravity Forms will ask for Zapier Webhook URL. Once you put this webhook URL in these forms, these forms can pass the form data to Zapier, which in turn can pass it on to ActiveCampaign, Google Sheets, etc.
1. Creating a Zap – the trigger
Say you want to pass popup Elementor form data to Google Sheet every time it is filled. After you log in into your Zapier account, create a new folder and name it with respect to the landing page to identify it easily. Click ‘Make a zap’ and for Trigger choose ‘Webhooks’.
Select ‘Catch Hook’ and click ‘Save + Continue’.
Copy the URL it shows. Let Zapier remain open but go to the Elementor form in the ‘Templates’ section in the back end of the website. Open the form in Elementor and in the ‘Actions after Submit’ section, chose ‘Webhook’.
You will then see ‘Webhook’ option below. Insert the Webhook URL there (‘Advanced Data’ can remain disabled) and click ‘Update’.
Then do a test submission of the form. Click the ‘Preview Changes’ icon and wait for the page to open in a new tab. Fill the form on the page and submit.
Once you have done the test submission, return to your zap and click ‘Ok, I did this’. It will pull the sample data that you entered.
2. The action
Next, click ‘Add a step’ and select ‘Action/Search’, then select the ‘Google Sheets’ app.
Make sure you have a Google Sheet ready with the first row filled with field headers (one per column) such as date, first name, last name, etc. Basically, these are the form field labels (they need not be the exact label name as used on the form).
Next, select ‘Create Spreadsheet Row’ and then click ‘Save + Continue’.
In the next step, connect to your Google account. (Just be logged in to your Gmail and give the respective permission. Google Sheet must be created with this account or shared with this account).
Once connected, select your spreadsheet and worksheet names.
You will now see the worksheet header names (these are the ones you created on the first row). Into these header names, you need to fill the sample values pulled in by the trigger. To do that, click the little plus icon on the right as shown below.
Once you have filled these zap fields, click ‘Continue’. In the next step, you can click ‘Send Test to Google Sheets’ and see if the data has appeared on your sheet. Then in the final step click ‘Finish’ and switch on your zap.
So now, every time someone fills the form, the data will appear on Google Sheet.
Note: You can create multiple action steps. For example, after this Google Sheet action step, you can add the ActiveCampaign action step.
Your spot has been saved!
You will receive an e-mail shortly with more details
about the webinar. Please watch your inbox.