Transactional

Embedding Forms

Embed Transactional Forms on your website

Embedding Forms

Learn how to embed Transactional Forms on your website, in emails, and across different platforms.

Embed Methods

1. Direct Link

The simplest option - share your form's URL directly:

https://usetransactional.com/f/{form-uuid}

Use this for:

  • Sharing on social media
  • Links in emails
  • QR codes

2. Iframe Embed

Embed the form in an iframe:

<iframe
  src="https://usetransactional.com/f/{form-uuid}/embed"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; max-width: 600px;"
  title="Contact Form"
></iframe>

Responsive Iframe:

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://usetransactional.com/f/{form-uuid}/embed"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    title="Contact Form"
  ></iframe>
</div>

3. JavaScript SDK

Full control with the JavaScript SDK:

<div id="form-container"></div>
<script src="https://cdn.usetransactional.com/sdk/forms.min.js"></script>
<script>
  TransactionalForms.render({
    formId: '{form-uuid}',
    container: '#form-container',
    options: {
      onSubmit: function(data) {
        console.log('Form submitted:', data);
      }
    }
  });
</script>

4. Popup/Modal

Show the form in a modal:

<button id="open-form">Contact Us</button>
 
<script src="https://cdn.usetransactional.com/sdk/forms.min.js"></script>
<script>
  document.getElementById('open-form').addEventListener('click', function() {
    TransactionalForms.popup({
      formId: '{form-uuid}',
      overlay: true,
      width: '600px',
      onClose: function() {
        console.log('Modal closed');
      }
    });
  });
</script>

5. Slide-in

Show form as a slide-in panel:

<script src="https://cdn.usetransactional.com/sdk/forms.min.js"></script>
<script>
  TransactionalForms.slideIn({
    formId: '{form-uuid}',
    position: 'right', // 'left' or 'right'
    width: '400px',
    trigger: {
      delay: 5000, // Show after 5 seconds
      // OR
      exitIntent: true, // Show on exit intent
      // OR
      scroll: 50, // Show after 50% scroll
    }
  });
</script>

Iframe Parameters

Customize the embedded form with URL parameters:

https://usetransactional.com/f/{form-uuid}/embed?param1=value1&param2=value2

Available Parameters

ParameterDescriptionExample
hideTitleHide form title?hideTitle=true
hideDescriptionHide description?hideDescription=true
hideHeaderHide both title & description?hideHeader=true
hideBrandingHide Transactional branding?hideBranding=true
transparentTransparent background?transparent=true
primaryColorOverride primary color?primaryColor=8B5CF6
autoFocusFocus first field?autoFocus=true
prefill_{field}Pre-fill field value?prefill_email=user@example.com

Combined Example

<iframe
  src="https://usetransactional.com/f/{form-uuid}/embed?hideTitle=true&primaryColor=8B5CF6&prefill_email=user@example.com"
  width="100%"
  height="500"
  frameborder="0"
></iframe>

Platform-Specific Guides

WordPress

Option 1: Shortcode Plugin

// In your theme's functions.php
function transactional_form_shortcode($atts) {
  $atts = shortcode_atts(['id' => ''], $atts);
  return '<iframe src="https://usetransactional.com/f/' . esc_attr($atts['id']) . '/embed" width="100%" height="600" frameborder="0"></iframe>';
}
add_shortcode('transactional_form', 'transactional_form_shortcode');

Usage:

[transactional_form id="form-uuid"]

Option 2: Block Editor

  1. Add a Custom HTML block
  2. Paste the iframe code

Webflow

  1. Add an Embed element
  2. Paste the iframe code or JavaScript SDK
<div id="form-container" style="min-height: 400px;"></div>
<script src="https://cdn.usetransactional.com/sdk/forms.min.js"></script>
<script>
  TransactionalForms.render({
    formId: '{form-uuid}',
    container: '#form-container'
  });
</script>

Shopify

Add to a custom page or section:

<div id="contact-form"></div>
 
<script src="https://cdn.usetransactional.com/sdk/forms.min.js"></script>
<script>
  TransactionalForms.render({
    formId: '{{ section.settings.form_id }}',
    container: '#contact-form',
    options: {
      prefill: {
        email: '{{ customer.email }}'
      }
    }
  });
</script>
 
{% schema %}
{
  "name": "Contact Form",
  "settings": [
    {
      "type": "text",
      "id": "form_id",
      "label": "Form ID"
    }
  ]
}
{% endschema %}

React

import { useEffect, useRef } from 'react';
 
export function TransactionalForm({ formId, className }) {
  const containerRef = useRef(null);
 
  useEffect(() => {
    // Load SDK
    const script = document.createElement('script');
    script.src = 'https://cdn.usetransactional.com/sdk/forms.min.js';
    script.async = true;
    script.onload = () => {
      window.TransactionalForms.render({
        formId,
        container: containerRef.current,
      });
    };
    document.body.appendChild(script);
 
    return () => {
      document.body.removeChild(script);
    };
  }, [formId]);
 
  return <div ref={containerRef} className={className} />;
}

Vue

<template>
  <div ref="formContainer" :class="className"></div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const props = defineProps({
  formId: String,
  className: String,
});
 
const formContainer = ref(null);
let formInstance = null;
 
onMounted(async () => {
  await loadSDK();
  formInstance = window.TransactionalForms.render({
    formId: props.formId,
    container: formContainer.value,
  });
});
 
onUnmounted(() => {
  formInstance?.destroy();
});
 
function loadSDK() {
  return new Promise((resolve) => {
    if (window.TransactionalForms) {
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = 'https://cdn.usetransactional.com/sdk/forms.min.js';
    script.onload = resolve;
    document.body.appendChild(script);
  });
}
</script>

Styling the Embed

Matching Your Brand

TransactionalForms.render({
  formId: '{form-uuid}',
  container: '#form-container',
  options: {
    theme: {
      primaryColor: '#your-brand-color',
      backgroundColor: '#your-bg-color',
      fontFamily: 'Your Font, sans-serif',
    }
  }
});

Custom CSS

The SDK exposes CSS classes you can target:

/* Form container */
.tf-form-container { }
 
/* Individual fields */
.tf-field { }
.tf-field-label { }
.tf-field-input { }
.tf-field-error { }
 
/* Buttons */
.tf-button { }
.tf-button-primary { }
.tf-button-secondary { }
 
/* Progress */
.tf-progress-bar { }
.tf-step-indicator { }

Security Considerations

Content Security Policy

If your site uses CSP, add these directives:

frame-src https://usetransactional.com;
script-src https://cdn.usetransactional.com;

Cross-Origin Communication

The iframe uses postMessage for communication. Verify origin in your handlers:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://usetransactional.com') return;
 
  const { type, data } = event.data;
  if (type === 'transactional:submit') {
    console.log('Form submitted:', data);
  }
});

Tracking & Analytics

Google Analytics

TransactionalForms.render({
  formId: '{form-uuid}',
  container: '#form-container',
  options: {
    onSubmit: function(data) {
      gtag('event', 'form_submission', {
        form_id: '{form-uuid}',
        form_name: 'Contact Form'
      });
    }
  }
});

Custom Events

TransactionalForms.render({
  formId: '{form-uuid}',
  container: '#form-container',
  options: {
    onLoad: () => trackEvent('form_loaded'),
    onStart: () => trackEvent('form_started'),
    onSubmit: () => trackEvent('form_submitted'),
  }
});

Troubleshooting

Form Not Loading

  1. Check if the form is published (status: LIVE)
  2. Verify the form ID is correct
  3. Check browser console for errors
  4. Ensure CSP allows the script and iframe

Styling Issues

  1. Check for CSS conflicts
  2. Use browser dev tools to inspect
  3. Try the !important flag if needed
  4. Use the theme options instead of CSS

Submission Errors

  1. Check network tab for failed requests
  2. Verify required fields are filled
  3. Check file size limits
  4. Review webhook responses

Next Steps