Skip to main content
Gately Forms lets you create powerful forms without writing backend code. Collect submissions, handle file uploads, and process payments all in one place.

​
Features

Drag & Drop Builder

Visual form builder with live preview

File Uploads

Accept images, documents, and videos

Payment Collection

Integrate Stripe for payments

Conditional Logic

Show/hide fields based on responses

​
Creating Forms

​
Via Dashboard

  1. Navigate to Forms in your dashboard
  2. Click Create Form
  3. Use the drag-and-drop builder to add fields
  4. Configure form settings
  5. Publish and embed

​
Field Types

TypeDescription
TextSingle-line text input
TextareaMulti-line text input
EmailEmail with validation
NumberNumeric input
PhonePhone number input
SelectDropdown selection
Multi-selectMultiple choice selection
CheckboxSingle checkbox
RadioRadio button group
DateDate picker
TimeTime picker
FileFile upload
PaymentStripe payment field
RatingStar rating
SignatureDigital signature

​
Embedding Forms

​
Script Embed

<div id="gately-form"></div>
<script>
  Gately.embedForm('form_id', {
    container: '#gately-form',
    onSubmit: (data) => {
      console.log('Form submitted:', data)
    },
    onError: (error) => {
      console.error('Form error:', error)
    }
  })
</script>

​
React Component

import { FormEmbed } from '@gately/sdk'

function ContactPage() {
  return (
    <FormEmbed 
      formId="form_id"
      onSubmit={(data) => console.log(data)}
      onError={(error) => console.error(error)}
    />
  )
}

​
iFrame Embed

<iframe 
  src="https://forms.usegately.com/f/form_id"
  width="100%"
  height="600"
  frameborder="0"
></iframe>

​
Form Settings

​
General Settings

SettingDescription
TitleForm title (displayed to users)
DescriptionForm description/instructions
Submit Button TextCustom submit button label
Success MessageMessage shown after submission
Redirect URLURL to redirect after submission

​
Notifications

Configure email notifications for new submissions:
  • Send to form owner
  • Send to custom email addresses
  • Send confirmation to submitter

​
Styling

Customize form appearance: 
Gately.embedForm('form_id', {
  container: '#form',
  styles: {
    fontFamily: 'Inter, sans-serif',
    primaryColor: '#F97316',
    borderRadius: '8px',
    backgroundColor: '#ffffff'
  }
})

​
Submissions

​
Viewing Submissions

  1. Go to Forms > [Your Form] > Submissions
  2. View all submissions in a table
  3. Click to view individual submission details
  4. Export to CSV or JSON

​
API Access

# List submissions
curl -X GET "https://api.usegately.com/api/v1/forms/{form_id}/submissions" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "X-Project-ID: your-project-id"

# Get single submission
curl -X GET "https://api.usegately.com/api/v1/forms/{form_id}/submissions/{submission_id}" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "X-Project-ID: your-project-id"

​
SDK Submission

const response = await gately.submitForm('form_id', {
  name: 'John Doe',
  email: '[email protected]',
  message: 'Hello!'
})

console.log('Submission ID:', response.submission_id)

​
File Uploads

​
Configuration

Enable file uploads in form settings:
SettingDescription
Allowed TypesFile extensions (e.g., jpg, pdf)
Max SizeMaximum file size in MB
Max FilesMaximum number of files

​
Handling Uploads

// Files are automatically uploaded and URLs returned
const response = await gately.submitForm('form_id', {
  name: 'John Doe',
  resume: fileInput.files[0] // File object
})

console.log('File URL:', response.files.resume)

​
Payment Forms

Collect payments with Stripe integration:

​
Setup

  1. Connect your Stripe account in Settings > Integrations
  2. Add a Payment field to your form
  3. Configure amount (fixed or variable)
  4. Publish the form

​
Payment Field Options

OptionDescription
Fixed AmountSet a specific price
Variable AmountLet users enter amount
CurrencyUSD, EUR, GBP, etc.
DescriptionPayment description

​
Handling Payments

Gately.embedForm('form_id', {
  container: '#form',
  onPaymentSuccess: (payment) => {
    console.log('Payment successful:', payment.id)
  },
  onPaymentError: (error) => {
    console.error('Payment failed:', error)
  }
})

​
Conditional Logic

Show or hide fields based on other responses: 
{
  "field": "company_size",
  "conditions": [
    {
      "field": "is_business",
      "operator": "equals",
      "value": true
    }
  ]
}

​
Operators

OperatorDescription
equalsExact match
not_equalsNot equal
containsContains substring
greater_thanNumeric comparison
less_thanNumeric comparison
is_emptyField is empty
is_not_emptyField has value

​
Webhooks

Trigger webhooks on form submissions:
  1. Go to Forms > [Your Form] > Webhooks
  2. Add webhook URL
  3. Select events to trigger
  4. Configure headers (optional)
{
  "event": "form.submitted",
  "form_id": "form_123",
  "submission_id": "sub_456",
  "data": {
    "name": "John Doe",
    "email": "[email protected]"
  },
  "submitted_at": "2024-01-15T10:00:00Z"
}

​
Integrations

Connect forms to external services:
  • Zapier: Automate workflows
  • Google Sheets: Sync submissions
  • Slack: Get notifications
  • Mailchimp: Add to email lists
  • Webhooks: Custom integrations