Embedding Signup Forms

This guide explains how to embed your TextFlow signup forms on your website.

Getting the Embed Code

1. Navigate to Signup Forms in the sidebar
2. Find your form in the list
3. Click the code icon (embed) button
4. Copy the provided code

Embedding Options

Option 1: Iframe Embed (Recommended)

The iframe method is the simplest way to add a form to your website:

<iframe
  src="https://app.textflow.ca/form/your-form-id"
  width="100%"
  height="500"
  frameborder="0"
  style="border: none; max-width: 400px;"
></iframe>

Advantages:

• Works on any website platform
• Form styling is consistent
• Easy to implement
• Automatic updates when you modify the form

Considerations:

• Fixed height may need adjustment
• Limited styling customization from parent page

Option 2: Direct Link

Share the form URL directly for standalone access:

https://app.textflow.ca/form/your-form-id

Use cases:

• Share via email or social media
• Link from buttons or text
• QR codes for print materials
• SMS links to your form

Platform-Specific Instructions

WordPress

1. Edit the page or post where you want the form
2. Add an HTML block or Custom HTML widget
3. Paste the iframe code
4. Adjust the width/height as needed
5. Save and preview

Shopify

1. Go to Online Store > Pages
2. Select or create a page
3. Click Show HTML in the editor
4. Paste the iframe code
5. Save the page

Wix

1. Add an Embed element to your page
2. Select HTML iframe
3. Paste the iframe code
4. Adjust the size in the editor
5. Publish your changes

Squarespace

1. Add a Code Block to your page
2. Paste the iframe code
3. Disable Display Source option
4. Save and publish

Custom HTML Websites

Simply paste the iframe code wherever you want the form to appear:

<div class="signup-form-container">
  <iframe
    src="https://app.textflow.ca/form/your-form-id"
    width="100%"
    height="500"
    frameborder="0"
    title="SMS Signup Form"
  ></iframe>
</div>

Responsive Embedding

To make your form responsive on all devices:

<div style="max-width: 400px; margin: 0 auto;">
  <iframe
    src="https://app.textflow.ca/form/your-form-id"
    width="100%"
    height="500"
    frameborder="0"
    style="border: none;"
  ></iframe>
</div>

Form Preview

The embedded form displays with your customized:

• Title and description
• Form fields
• Brand colors
• Submit button text
• Consent checkbox and text

Troubleshooting

Form Not Displaying

• Verify the form is set to Active status
• Check that the form ID in the URL is correct
• Ensure your website allows iframe embedding
• Test the direct link to confirm the form works

Form Height Issues

If the form is cut off or has too much whitespace:

<!-- Adjust height value as needed -->
<iframe
  src="https://app.textflow.ca/form/your-form-id"
  height="450"
  ...
></iframe>

Recommended heights:

• Basic form (phone + name): 400px
• With optional fields: 500px
• With long description: 550px

Cross-Origin Issues

If your site shows security warnings:

• Ensure you’re using HTTPS on your website
• The form URL uses HTTPS by default
• Contact support if issues persist

Testing Your Embedded Form

After embedding:

1. Visit your website page
2. Fill out the form with test data
3. Verify the success message displays
4. Check TextFlow contacts for the new submission
5. Confirm tags were applied correctly

Tip

Use a real phone number when testing so you can verify the contact was created properly in your TextFlow contacts list.

Next Steps

• Customize your form’s appearance
• Set up a welcome campaign for new subscribers
• Create different forms for different signup sources