Embedding & Sharing

Once your form is built, you need to get it in front of users. Leadflip offers three ways to do that: embed via script tag, direct link, and preview. Choose the option that fits your use case.

Script Tag Embed

The script tag method embeds your form directly into your website. The form appears inline where you place the code, inheriting your page layout and styles.

How to Embed

1. Open your form in the Form Builder.

2. Click Embed (or the embed icon) in the toolbar.

3. Copy the script tag provided. It looks like:

   <script src="https://forms.leadflip.net/embed.js" data-form-id="YOUR_FORM_ID"></script>
   

4. Paste the script into your HTML where you want the form to appear (e.g., inside a <div> on your contact page).

5. Publish your page. The form loads and displays automatically.

Placement Options

• Full-width container – Place the script inside a <div> with your desired width (e.g., max-width: 600px).
• Sidebar or column – Use your layout's grid or flexbox; the form will fill its container.
• Modal or drawer – Load the form inside a modal; users click a button to open it.

The form is responsive and adapts to its container. Test on mobile to ensure it looks correct.

Responsive Behavior

Embedded forms automatically adapt to smaller screens. On mobile devices (below 480px viewport width):

• Image choice fields switch from a card grid to a horizontal list layout. Each option displays as a row with the image on the left, the option label in the center, and the selection indicator (radio circle or checkbox) on the right.
• Half-width and third-width fields stack to full width so they remain usable on narrow screens.
• Navigation buttons (Previous / Next / Submit) wrap to full width for easy tapping.

These responsive behaviors are built in and require no additional configuration. If you need further customization, use Custom CSS in Form Settings.

Direct Link

A direct link is a standalone URL that opens your form in a new tab or window. Use it for:

• Email campaigns – "Click here to request a quote"
• Social media – Share the link in posts or bios
• QR codes – Print or display a QR code that links to the form
• Partners or affiliates – Share without embedding on a website

How to Get the Link

1. Open your form and click Embed.
2. Find the Direct link section.
3. Copy the URL (e.g., https://forms.leadflip.net/f/abc123).
4. Share it anywhere—email, social, print, etc.

When users open the link, they see the form on a Leadflip-hosted page. You can customize branding (logo, colors) in Form Settings so it matches your brand.

Form Preview

Before publishing, preview your form to see exactly what users will experience.

How to Preview

1. In the Form Builder, click Preview (or the eye icon) in the toolbar.
2. The form opens in a new tab or modal, showing the live form as it will appear when embedded or via direct link.
3. Test all fields, conditional logic, multi-page navigation, and the submit flow.
4. Check the thank you message or redirect.

Preview uses the same styling and behavior as the published form. It's the best way to catch layout issues, broken conditional logic, or missing fields before going live.

Best Practices

• Test before launch – Always preview and submit a test lead before sharing the form.
• Mobile check – Preview on a phone or use browser dev tools to simulate mobile. Forms should be easy to use on small screens.
• Track your links – Add UTM parameters to direct links (e.g., ?utm_source=email&utm_campaign=quote) to track where leads come from. Use hidden fields to capture UTM values if your form supports it.
• Secure your form – If your form is public, consider enabling CAPTCHA or honeypot in Form Settings to reduce spam.

Troubleshooting

• Form not loading – Ensure the script tag is correct and your form ID is valid. Check the browser console for errors.
• Styles look wrong – Embedded forms may inherit your site's CSS. Use Form Settings branding or custom CSS to override conflicts.
• Direct link 404 – Verify the form is published and the link was copied correctly.

Next Steps

• Configure form settings
• Create a form
• Form Builder overview