How to use pre-filled fields?

Pre-filling fields allows you to automatically populate form fields with data when a user opens your form. This is useful for personalizing the experience or passing known information.

How to configure pre-filled fields

1. Go to your form settings.
2. Navigate to the Share tab.
3. Scroll down to the Pre-fill fields section.
4. Select the fields you want to pre-fill from the dropdown menu.
5. Enter the value you want to use for each field. For fields with preset options (checkboxes, radio buttons, dropdowns, linear scales), you'll pick from a list of available values.
6. The Embed Code will automatically update with the pre-filled parameters.
7. If you're using the Share the link tab instead, the share URL will automatically include ?prefill=... query parameters.

[!NOTE] This feature is available with both the Embed to the web page and Share the link options. When sharing a link, prefill values are appended as URL query parameters in the format ?prefill=fieldId=value;fieldId2=value2.

Use Cases

• Personalization: Automatically fill in a user's name or email if they are already logged into your website.
• Contextual Data: Pass product information (like Product ID or Name) if the form is embedded on a specific product page.
• Campaign Tracking: Pre-fill hidden fields to track which marketing campaign or traffic source the user came from.

Dynamic Implementation

You can dynamically inject values into your form depending on your platform.

WordPress

In WordPress, you can use PHP to dynamically output values into the embed code. For example, to pre-fill the user's email:

<?php
$current_user = wp_get_current_user();
$user_email = $current_user->user_email; // [email protected]
?>
 
<div 
  data-customgform="FORM_ID"
  data-prefill_fields="501104403=<?php echo $user_email; ?>"
></div>

React

If you are using React, you can pass dynamic values as props or state to your form component.

import React from 'react';
import CustomGForm from '@customgform-lib/react-customgform';
 
function Example() {
  // get email from api
  const userEmail = '[email protected]';
  return <CustomGForm 
    formId="FORM_ID"
    prefillFields={{
      '501104403': userEmail,
    }}
  />;
}