Introduction
Fluent Forms is a powerful form building plugin for WordPress that offers extensive functionality out of the box. However, one common challenge when working with Fluent Forms is dynamically pre-populating form fields with custom data. While Fluent Forms provides some methods for pre-filling fields, there isn’t a straightforward way to pass data directly to specific fields through shortcode attributes.
This tutorial solves this limitation by creating a custom shortcode that extends Fluent Forms’ capabilities, allowing you to dynamically populate any Fluent Forms field directly through shortcode attributes. This approach is particularly useful when you need to create personalised forms with pre-filled information based on user data, URL parameters, or other dynamic content.
Let’s explore how this works and how you can implement it to enhance your Fluent Forms experience.
The Custom Fluent Forms Shortcode Solution
Here’s the complete code that creates our custom [tct_dynamic_fluentform] shortcode:
/** * Dynamic population of Fluent Form fields via shortcode attributes. * Usage: [tct_dynamic_fluentform id="1" field_first_name="John" field_last_name="Doe"] * * @param array $atts Shortcode attributes * * @return string Processed shortcode */ function tct_dynamic_fluentform_shortcode($atts) { // Early return if no attributes if (empty($atts)) { return $atts; } // Define default attributes $defaults = [ 'id' => null, 'title' => null, 'css_classes' => '', 'permission' => '', 'type' => 'classic', 'theme' => '', 'permission_message' => __('Sorry, You do not have permission to view this form', 'fluentform') ]; // Store field values for later use $field_values = []; // Extract field_ attributes and store them foreach ($atts as $key => $value) { if (strpos($key, 'field_') === 0) { $field_name = substr($key, 6); // Remove 'field_' prefix $field_values[$field_name] = $value; unset($atts[$key]); // Remove from original attributes } } // Merge remaining attributes with defaults $atts = wp_parse_args($atts, $defaults); // If we have field values, add the filters for each field type if (!empty($field_values)) { // List of supported single-value input types $field_types = [ 'input_text', // Text inputs 'input_email', // Email inputs 'input_number', // Number inputs 'input_hidden', // Hidden inputs 'input_url', // URL inputs 'input_date', // Date inputs 'phone', // Phone inputs 'select' // Single select dropdowns ]; // Add filter for each field type foreach ($field_types as $type) { add_filter("fluentform/rendering_field_data_{$type}", function ($data) use ($field_values) { // Get the field name from the attributes $field_name = isset($data['attributes']['name']) ? $data['attributes']['name'] : ''; // Convert both the field name and keys to lowercase for case-insensitive matching $clean_field_name_lower = strtolower($field_name); $field_values_lower = array_change_key_case($field_values, CASE_LOWER); // If we have a value for this field, set it if ($field_name && isset($field_values_lower[$clean_field_name_lower])) { $data['attributes']['value'] = $field_values_lower[$clean_field_name_lower]; } return $data; }, 10, 1); } } // Process the shortcode with the merged attributes $shortcode_parts = ['[fluentform']; foreach ($atts as $key => $value) { $shortcode_parts[] = $key . '="' . esc_attr($value) . '"'; } $shortcode_parts[] = ']'; // Combine into full shortcode string $shortcode = implode(' ', $shortcode_parts); // Return the rendered Fluent Form return do_shortcode($shortcode); } add_shortcode('tct_dynamic_fluentform', 'tct_dynamic_fluentform_shortcode');Copy
How It Works: Understanding the Fluent Forms Integration
Let’s break down this code to understand how it interacts with Fluent Forms:
1. Function Definition and Initial Check
function tct_dynamic_fluentform_shortcode($atts) { // Early return if no attributes if (empty($atts)) { return $atts; }Copy
This defines our shortcode function and includes an early exit if no attributes are provided.
2. Setting Up Fluent Forms Default Attributes
$defaults = [ 'id' => null, 'title' => null, 'css_classes' => '', 'permission' => '', 'type' => 'classic', 'theme' => '', 'permission_message' => __('Sorry, You do not have permission to view this form', 'fluentform') ];Copy
These defaults match Fluent Forms’ standard shortcode parameters to ensure compatibility. If you check the Fluent Forms documentation, you’ll see these are the standard attributes that their shortcode accepts.
3. Extracting Custom Field Values
// Store field values for later use $field_values = []; // Extract field_ attributes and store them foreach ($atts as $key => $value) { if (strpos($key, 'field_') === 0) { $field_name = substr($key, 6); // Remove 'field_' prefix $field_values[$field_name] = $value; unset($atts[$key]); // Remove from original attributes } }Copy
This section identifies and extracts our custom field attributes from the standard Fluent Forms attributes. The key innovation here is using the field_ prefix to distinguish which attributes should be used for pre-filling fields.
4. Applying Fluent Forms Filters
// If we have field values, add the filters for each field type if (!empty($field_values)) { // List of supported single-value input types $field_types = [ 'input_text', // Text inputs 'input_email', // Email inputs 'input_number', // Number inputs 'input_hidden', // Hidden inputs 'input_url', // URL inputs 'input_date', // Date inputs 'phone', // Phone inputs 'select' // Single select dropdowns ]; // Add filter for each field type foreach ($field_types as $type) { add_filter("fluentform/rendering_field_data_{$type}", function ($data) use ($field_values) { // Filter function content... }, 10, 1); } }Copy
This is where we tap into Fluent Forms’ field rendering process. Fluent Forms provides specific filters for each field type, allowing us to modify fields just before they’re rendered. Our code hooks into these filters to inject our custom values.
The $field_types array lists all the Fluent Forms field types that we’re supporting with this solution. These correspond directly to the field types available in the Fluent Forms editor.
5. The Field Modification Logic
function ($data) use ($field_values) { // Get the field name from the attributes $field_name = isset($data['attributes']['name']) ? $data['attributes']['name'] : ''; // Convert both the field name and keys to lowercase for case-insensitive matching $clean_field_name_lower = strtolower($field_name); $field_values_lower = array_change_key_case($field_values, CASE_LOWER); // If we have a value for this field, set it if ($field_name && isset($field_values_lower[$clean_field_name_lower])) { $data['attributes']['value'] = $field_values_lower[$clean_field_name_lower]; } return $data; }Copy
This anonymous function:
- Extracts the field name from Fluent Forms’ field data structure
- Uses case-insensitive matching to accommodate variations in field naming
- Sets the field’s value attribute if we have a matching value in our custom attributes
This approach works with Fluent Forms’ internal field structure without modifying the core plugin code.
6. Generating the Final Fluent Forms Shortcode
$shortcode_parts = ['[fluentform']; foreach ($atts as $key => $value) { $shortcode_parts[] = $key . '="' . esc_attr($value) . '"'; } $shortcode_parts[] = ']'; // Combine into full shortcode string $shortcode = implode(' ', $shortcode_parts); // Return the rendered Fluent Form return do_shortcode($shortcode);Copy
Finally, we construct and process a standard Fluent Forms shortcode with our modified attributes. This means we’re leveraging Fluent Forms’ own rendering system whilst injecting our custom values.
Using the Custom Shortcode with Fluent Forms
Once you’ve added this code to your site, you can use the shortcode like this:
[tct_dynamic_fluentform id="1" field_first_name="John" field_last_name="Doe" field_email="john@example.com"]
Here’s what each part means:
id="1"refers to your Fluent Form ID (you can find this in the Fluent Forms dashboard)field_first_name="John"will pre-fill a field named “first_name” with “John”field_last_name="Doe"will pre-fill a field named “last_name” with “Doe”field_email="john@example.com"will pre-fill a field named “email” with “john@example.com”