Note: Leads captured from your embedded Vuture form will be sent to Vuture. Turtl is unable to identify contacts through Vuture forms, and leads will be displayed as "unknown" in the "Contacts" section of your Turtl Analytics Dashboard.
In this article, we'll walk through replacing Turtl's native lead capture form with a Vuture form. This allows you to capture sign-ups from your Turtl Docs straight into Vuture. Let's dive in.
1. Add Turtl script to your form
First, navigate to the HTML editor for your Vuture form by clicking "Edit HTML". Then, paste in the following snippet of code:
<script src="https://app-static.turtl.co/forms/turtl.forms.vuture.v1.js"></script>
2. Add Turtl script to your form's confirmation page
On your confirmation page, paste the following snippet:
<script data-ttl-form-mode="complete" src="https://app-static.turtl.co/forms/turtl.forms.vuture.v1.js"></script>
3. Copy the Vuture form public URL
Copy the public URL for your form. We’ll use this next to embed your form into Turtl.
4. Add your form URL to your Turtl Doc
In Turtl, open Doc settings. Under the "Forms'' tab, paste the form URL into your chosen field.
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.
For more information on setting lead capture forms, follow this article.
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 script code snippet added in Step 1 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 data-ttl-form-strip-styles="false" data-ttl-form-inject-styles="false" src="https://app-static.turtl.co/forms/turtl.forms.vuture.v1.js"></script>