Form Embed

Gately.embedForm('FORM_ID', {
  container: '#form-container'
})

import { FormEmbed } from '@gately/sdk'

function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <FormEmbed formId="FORM_ID" />
    </div>
  )
}

interface FormEmbedOptions {
  container?: string | HTMLElement  // Container element or selector
  onSubmit?: (data: FormData) => void  // Called on successful submission
  onError?: (error: Error) => void  // Called on error
  onLoad?: () => void  // Called when form loads
  styles?: FormStyles  // Custom styling
  prefill?: Record<string, any>  // Pre-fill field values
}

Gately.embedForm('FORM_ID', {
  container: '#form',
  onSubmit: (data) => {
    console.log('Form submitted:', data)
    
    // Show success message
    document.getElementById('form').innerHTML = `
      <div class="success">
        <h2>Thank you!</h2>
        <p>We'll be in touch soon.</p>
      </div>
    `
  }
})

Gately.embedForm('FORM_ID', {
  container: '#form',
  onError: (error) => {
    console.error('Form error:', error)
    alert('Something went wrong. Please try again.')
  }
})

Gately.embedForm('FORM_ID', {
  container: '#form',
  onLoad: () => {
    // Hide loading spinner
    document.getElementById('loading').style.display = 'none'
  }
})

Gately.embedForm('FORM_ID', {
  container: '#form',
  styles: {
    fontFamily: 'Inter, sans-serif',
    fontSize: '16px',
    primaryColor: '#F97316',
    backgroundColor: '#ffffff',
    textColor: '#111827',
    borderRadius: '8px',
    borderColor: '#e5e7eb',
    inputPadding: '12px',
    buttonStyle: 'filled' // 'filled' | 'outline'
  }
})

// Pre-fill from URL params
const params = new URLSearchParams(window.location.search)

Gately.embedForm('FORM_ID', {
  container: '#form',
  prefill: {
    email: params.get('email'),
    name: params.get('name'),
    plan: 'pro'
  }
})

const user = Gately.getUser()

Gately.embedForm('FORM_ID', {
  container: '#form',
  prefill: user ? {
    email: user.email,
    name: user.full_name
  } : {}
})

import { FormEmbed } from '@gately/sdk'

function ContactForm() {
  return (
    <FormEmbed 
      formId="FORM_ID"
      onSubmit={(data) => console.log('Submitted:', data)}
      onError={(error) => console.error('Error:', error)}
    />
  )
}

<FormEmbed 
  formId="FORM_ID"
  styles={{
    fontFamily: 'system-ui',
    primaryColor: '#6366f1',
    borderRadius: '12px'
  }}
/>

function ContactForm() {
  const [loading, setLoading] = useState(true)

  return (
    <div>
      {loading && <Spinner />}
      <FormEmbed 
        formId="FORM_ID"
        onLoad={() => setLoading(false)}
        style={{ display: loading ? 'none' : 'block' }}
      />
    </div>
  )
}

<iframe 
  src="https://forms.usegately.com/f/FORM_ID"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none;"
></iframe>

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe 
    src="https://forms.usegately.com/f/FORM_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
  ></iframe>
</div>

Gately.embedForm('FORM_ID', {
  container: '#form',
  onSubmit: (data) => {
    // File URLs are included in the response
    console.log('Uploaded files:', data.files)
  }
})

Gately.embedForm('FORM_ID', {
  container: '#form',
  onSubmit: (data) => {
    if (data.payment) {
      console.log('Payment ID:', data.payment.id)
      console.log('Amount:', data.payment.amount)
    }
  }
})

Gately.embedForm('FORM_ID', {
  container: '#form',
  onStepChange: (step, totalSteps) => {
    console.log(`Step ${step} of ${totalSteps}`)
    updateProgressBar(step / totalSteps)
  }
})

Gately.embedForm('FORM_ID', {
  container: '#form',
  validationMessages: {
    required: 'This field is required',
    email: 'Please enter a valid email',
    minLength: 'Must be at least {min} characters'
  }
})