Pre-filling Form Fields

You can pass default values to your embedded forms so fields are automatically filled when the form loads. This is useful for personalizing forms, passing tracking data, or pre-populating known information like a user's name or email.

How It Works

Each field is matched by its label, converted to a URL-friendly slug:

• "Full Name" → full-name
• "Email Address" → email-address
• "Company" → company
• "Phone Number" → phone-number

Use the data-field-{slug} attribute on your embed code to pass values.

Script Tag Embed

<script src="https://rapidform.com/embed.js"
  data-form="your-form-slug"
  data-field-full-name="John Doe"
  data-field-email-address="[email protected]"
  data-field-company="Acme Inc"
></script>

Placeholder Div Embed

<script src="https://rapidform.com/embed.js"></script>

<div data-rapidform="your-form-slug"
  data-field-full-name="John Doe"
  data-field-email-address="[email protected]"
></div>

Dynamic Values with JavaScript

If you need to set field values dynamically (e.g., from your app's data, URL parameters, or user session), create the embed element with JavaScript:

<div id="formContainer"></div>

<script>
  // Your dynamic values
  const userName = 'John Doe';
  const userEmail = '[email protected]';
  const source = new URLSearchParams(window.location.search).get('ref') || 'direct';

  // Create the embed
  const div = document.createElement('div');
  div.dataset.rapidform = 'your-form-slug';
  div.dataset.fieldFullName = userName;
  div.dataset.fieldEmailAddress = userEmail;
  div.dataset.fieldSource = source;

  document.getElementById('formContainer').appendChild(div);
</script>

<script src="https://rapidform.com/embed.js" defer></script>

Note: When setting data-field-* attributes via JavaScript's dataset, use camelCase. The browser automatically converts dataset.fieldFullName to data-field-full-name in the HTML.

Supported Field Types

Radio, checkbox, date, and file fields do not support pre-filling.

Common Use Cases

Pass UTM tracking parameters

<div id="formContainer"></div>

<script>
  const params = new URLSearchParams(window.location.search);
  const div = document.createElement('div');
  div.dataset.rapidform = 'your-form-slug';
  div.dataset.fieldSource = params.get('utm_source') || '';
  div.dataset.fieldCampaign = params.get('utm_campaign') || '';
  document.getElementById('formContainer').appendChild(div);
</script>

<script src="https://rapidform.com/embed.js" defer></script>

Tip: Create hidden fields named "Source" and "Campaign" in your form builder to capture these values without showing them to the user.

Pre-fill from logged-in user data

<script src="https://rapidform.com/embed.js"
  data-form="feedback-form-abc123"
  data-field-name="{{ $user->name }}"
  data-field-email="{{ $user->email }}"
></script>

Pre-fill from a CRM or database

<div id="formContainer"></div>

<script>
  fetch('/api/current-customer')
    .then(res => res.json())
    .then(customer => {
      const div = document.createElement('div');
      div.dataset.rapidform = 'your-form-slug';
      div.dataset.fieldFullName = customer.name;
      div.dataset.fieldEmailAddress = customer.email;
      div.dataset.fieldCompany = customer.company;
      document.getElementById('formContainer').appendChild(div);
    });
</script>

<script src="https://rapidform.com/embed.js" defer></script>

Finding the Right Slug

To determine the correct slug for a field, take the field label and:

1. Convert to lowercase
2. Replace spaces with hyphens
3. Remove special characters

Examples: