Typeform Integration

Typeform lets you build conversational forms, surveys, and quizzes that feel natural to fill out. You can embed any Typeform directly into your Flint pages using either a standard iframe embed or Typeform's popup/popover embed options.

You will need:

• •A Typeform account with at least one published form
• •The embed code or share URL for your form (available under the Share tab of any form in Typeform)

1. 1.Open your form in Typeform and go to the Share tab
2. 2.Click Embed in your page
3. 3.Choose your preferred embed type:
   • -Standard embed: displays the form inline on the page
   • -Popup: opens the form in a modal when a button is clicked
   • -Popover: shows a floating widget in the corner of the page
   • -Side panel: slides in from the side
4. 4.Copy the embed code snippet Typeform generates

Open the AI chat in Flint and tell the agent where you want the form to appear. You can paste the embed code directly in chat or share the Typeform URL. For example:

• •"Add this Typeform to the bottom of the hero section" (paste embed code)
• •"Embed this Typeform as a popup triggered by the 'Get started' button" (paste URL)
• •"Replace the contact form with this Typeform" (paste embed code or URL)

Flint will handle inserting the embed into the correct section of your page.

Embed code (recommended for inline forms):
- Gives Typeform full control over layout and styling
- Best for standard embeds where you want the form to appear directly in the page
- Flint has limited ability to restyle the form itself

URL only:
- Flint wraps the URL in an iframe and can control the container size, border, spacing, and surrounding layout
- Best when you want the form styled to match your brand's page design
- For popup or popover types, paste the full Typeform URL and tell Flint which trigger to use

Typeform supports hidden fields that let you pass context from the page URL into the form without the visitor seeing them. This is useful for tracking UTM parameters, account names, or any personalization data.

To use hidden fields:

1. 1.In Typeform, go to your form's settings and add hidden fields (e.g., utm_source, account_name)
2. 2.When embedding via URL, append the values as query parameters:
3. 3.Share this URL with Flint and ask it to embed the form with these parameters pre-filled

Flint can also dynamically pass URL query parameters from the current page into the Typeform embed so tracking data flows automatically.

To send visitors to a thank-you page or another URL after they complete the form:

1. 1.In Typeform, go to your form's Endings settings
2. 2.Add a Redirect to URL ending and enter the destination
3. 3.Flint pages work seamlessly with Typeform redirect endings

Alternatively, you can use Typeform webhooks or Zapier/Make to trigger follow-up actions after a submission.

If you are using the standard embed code, Typeform controls the form's visual style. You can configure colors, fonts, and backgrounds directly in Typeform's Design panel before copying the embed code.

If you share just the URL, Flint can:
- Set the iframe container width and height
- Add rounded corners, shadows, or padding around the form
- Adjust spacing between the form and surrounding page sections

For the best brand consistency, configure your Typeform's design to match your site colors before embedding.

Form not loading: Make sure your Typeform is published (not in draft). Unpublished forms will show a blank embed.

Form looks cut off: The iframe height may be too small. Ask Flint to increase the embed container height, or enable Typeform's auto-resize option in the embed settings.

Hidden fields not populating: Double-check that the field names in the URL query string exactly match the hidden field identifiers defined in Typeform (they are case-sensitive).

Popup not triggering: If using a popup embed, make sure Flint has linked the trigger button's click event to the Typeform popup JavaScript snippet.