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.
6. The Embed Code will automatically update with the pre-filled parameters.

[!NOTE] This feature is currently available when using the Embed to the web page option.

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,
    }}
  />;
}