In this article, we’ll walk through embedding an Adobe form in place of the native Turtl lead capture form. We’ll cover configuring Adobe forms with Turtl and setting up a redirect page. Let’s dive in.
Notes:
Please make sure you set Adobe Experience Manager settings in a way that will allow your form to be embedded via an iframe (on third-party domains).
Leads captured from your embedded Adobe form will only be located in Adobe. Turtl is unable to capture leads from Adobe forms and leads will be displayed as "unknown" in the "Contacts" section of your Turtl Analytics Dashboard.
Adobe Experience Manager requires a referrer header to validate submissions. Safari’s privacy feature (ITP) strips this header on cross-domain form submissions. Set up a CNAME to match the form domain to your Turtl domain to avoid issues.
1. Create a form in Adobe Experience Manager
Once you’ve created your AEM form, copy the form’s public URL link. This will be something similar to: http://aemforms.websitename.com/form-name.html.
2. Set up a "thank you" page
Set your form to redirect to a ‘thank you’ page once someone has submitted their information. Your readers won’t see this redirect page, but it allows Turtl to recognize that the form has been completed.
3. Add Turtl script to your pages
To configure your Adobe form with Turtl, you need to add small snippets of code in two places:
Form HTML
Once the form page has been created, paste the following snippet immediately before the closing </head> tag in the HTML code of your form page.
<script src="https://app-static.turtl.co/forms/turtl.forms.adobe.v1.js"></script>
"Thank you" page
Paste the following snippet immediately before the closing </head> tag in the HTML code of your "Thank you" page.
<script data-ttl-form-mode="complete" src="https://app-static.turtl.co/forms/turtl.forms.adobe.v1.js"></script>
4. Add the form URL to your Turtl Doc
Once your form is hosted on a blank page of your website, copy the URL of the page. Next, open the settings for your chosen Doc and paste the URL into the correct field under the "Forms" tab.
Default form URL - This URL will be used for both Content pages and Back cover forms unless the back cover form URL is also set.
Cover form URL - This URL can be used to add a form on the very first Title page of your content. Readers will not be able to read or navigate past the first page without entering their details.
Back cover form URL - This can be used to set a different form for the back cover. If this is left blank, the form set as "Default form URL" will be used on the back cover.
5. Style options
By default, Turtl strips your form's original styles and injects Turtl brand styles. If this is the first time you're adding a form to Turtl, it will need to be styled by our team to match the rest of your content. Once you've added your form, please contact Customer Support and we'll get it styled for you.
If you want to keep your form's original styles instead, return to the Form HTML script code snippet added in Step 3 and include the attributes below set to false in the opening <script> tag:
data-ttl-form-strip-styles="false” keeps your form's original styles
data-ttl-form-inject-styles="false" prevents Turtl from applying brand styles
Updated code snippet:
<script src="https://app-static.turtl.co/forms/turtl.forms.adobe.v1.js" data-ttl-form-strip-styles="false" data-ttl-form-inject-styles="false"></script>