Quick Start

Create and publish your first form in just a few minutes.

Prerequisites

• A Transactional account
• An organization set up

Step 1: Create a New Form

Navigate to Forms in the dashboard sidebar and click Create Form.

You can either:

• Start from scratch
• Choose a template

For this guide, let's start from scratch.

Form Details

Enter your form details:

Title: Contact Us
Description: Get in touch with our team
Slug: contact-us

Step 2: Add Fields

Add fields to your form using the field picker on the left:

Add a Name Field

1. Click Short Text in the field picker
2. Set the label to "Your Name"
3. Enable Required

Add an Email Field

1. Click Email in the field picker
2. Set the label to "Email Address"
3. Enable Required

Add a Message Field

1. Click Long Text in the field picker
2. Set the label to "Your Message"
3. Set placeholder to "How can we help?"
4. Enable Required

Step 3: Customize the Theme

Click the Design tab to customize your form's appearance.

Choose a Preset

Select from available presets:

Customize Colors

Fine-tune colors for:

• Primary color (buttons, accents)
• Background color
• Text color
• Input styling
• Button text

Step 4: Configure Settings

Click the Settings tab to configure form behavior.

Access Control

Choose who can access your form:

settings: {
  accessType: 'PUBLIC', // Anyone can access
}

Notifications

Add email addresses to receive submission notifications:

notificationEmails: ['team@example.com']

Submission Behavior

Configure what happens after submission:

• Show a thank you message
• Redirect to a URL

Step 5: Publish Your Form

Click Publish to make your form live.

Your form is now available at:

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

Step 6: View Submissions

As responses come in, view them in the Submissions tab:

• See all responses in a table
• View individual submission details
• Export to CSV

Using the API

You can also create forms programmatically:

// Create a form via API
const response = await fetch('/api/forms', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': 'your-api-key',
  },
  body: JSON.stringify({
    title: 'Contact Us',
    description: 'Get in touch with our team',
    slug: 'contact-us',
    fields: [
      {
        type: 'SHORT_TEXT',
        label: 'Your Name',
        required: true,
        order: 0,
      },
      {
        type: 'EMAIL',
        label: 'Email Address',
        required: true,
        order: 1,
      },
      {
        type: 'LONG_TEXT',
        label: 'Your Message',
        placeholder: 'How can we help?',
        required: true,
        order: 2,
      },
    ],
  }),
});
 
const form = await response.json();
console.log('Form created:', form.data.uuid);

Embedding Your Form

Embed the form in your website:

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

Or use the JavaScript SDK:

<div id="form-container"></div>
<script src="https://cdn.usetransactional.com/sdk/forms.min.js"></script>
<script>
  Transactional.Forms.render({
    formId: '{form-uuid}',
    container: '#form-container',
  });
</script>

Next Steps

• Field Types - Explore all available field types
• Templates - Use pre-built templates
• API Reference - Full API documentation