The goal of this article is to help you become familiar with easily creating custom input fields using fluentforms.. We will create new input field using the BaseFieldManager class. In this example we will see how we can leverage other prebuilt classes available in fluent forms and how to create custom UI settings for a input. This field will work as a confirmation field such as password, email or other text confirmation field. User will set target input and the input will validate according to the target input value.

ConfirmField Class

First let us create a class ConfirmField which will be an extended class of BaseFieldManager class. All input field are extended form this class so this is like a skeleton class of fluentforms input fields BaseFieldManager is an abstract Class which is extended by BaseComponent class. So, It will look like this :

<?php 

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}


class ConfirmField extends \FluentForm\App\Services\FormBuilder\BaseFieldManager
{
   

We extended our ConfirmField class by including BaseFieldManager with its namespace. Now We have to call the parent class construct method from ConfirmField classes construct method .

__construct()

In this method we will call the Parent classes’s __construct method. It needs 4 parameters

• $key : Unique key identifier
• $title : Input tile in form editor
• $tag : Search tags for this input
• $position : Position of the input in the form editor (general | advanced | payments )

Here is the code :

public function __construct()
{
    parent::__construct(
        'confirm_field',
        'Confirm Input',
        ['confirm', 'check'],
        'general'
    );
    
}

getComponent()

Next we will create getComponent() method which will return the configuration array of the input. This is the most important part. The array includes four core property, index, element, attributes, settings, editor_options. First property index represents the serial number this field will appear in the form editor. element is the key, attributes data will be used when rendering in frontend.

public function getComponent()
{
    return [
        'index'          => 16,
        'element'        => $this->key,
        'attributes'     => [
            'name'        => $this->key,
            'class'       => '',
            'value'       => '',
            'type'        => 'text',
            'placeholder' => __('Confirm Input', 'text-domain')
        ],
        'settings'       => [
            'container_class'     => '',
            'placeholder'         => '',
            'auto_select_country' => 'no',
            'label'               => $this->title,
            'label_placement'     => '',
            'help_message'        => '',
            'validate_on_change'  => false,
            'target_input'        => '',
            'error_message'       => __('Confirm value does not match', 'text-domain'),
            'validation_rules'    => [
                'required' => [
                    'value'   => false,
                    'message' => __('This field is required', 'text-domain'),
                ]
            ],
            'conditional_logics'  => []
        ],
        ' ' => [
            'title'      => $this->title . ' Field',
            'icon_class' => 'el-icon-phone-outline',
            'template'   => 'inputText'
        ],
    ];
}

The settings property includes the fields settings which is stored in editor and can be accessed needed. Each of these property inside settings represents a setting input template and its initial value. For example , container_class represents text input which store container class. For the ConfirmField input we will need the settings ‘label’, ‘placeholder’, ‘value’, ‘label placement’, ‘validation rules’. These are already available, so we just have to define those in the settings array with the initial value.

There has 69 UI components available for making any type of settings ui for your element. You can even implement your own by implementing generalEditorElement and advancedEditorElement method. We will get into the details of creating new settings ui later. Please check the BaseFieldManager class for details.

Where to find the fluentforms built-in UI components: Please check this Github source file.

getGeneralEditorElements()

Here we will declare what settings should appear in the general section of the input customization. These are the settings that we just defined in getComponent() method settings array. If you check the code in parent class method you will see that it returns an array of keys. We can override this method in our class if we need new settings or default settings key will be returned. As we have already mentioned these keys represents the fluentforms input settings ui template, defined in getComponent() methods settings array, now we are just placing it in general section. As you know all inputs have two section of settings general & advanced. Now if you are developer you may think what if you need a new type of settings input to store user values, it is very simple. We will do that next.

generalEditorElement()

This is an optional method. We can define our own ui setting inputs here for the general section of the editor. For our ConfirmField we need to store target input name , error message ,and an option whether to validate when user starts typing. So let’s create those. We will use a text and a checkbox ui component to store these settings. Check the following code.

public function generalEditorElement()
{
    return [
        'target_input'       => [
            'template'  => 'inputText',
            'label'     => 'Target Field Name',
            'help_text' => 'The input value will be matched with target input and show error if not matched',
        ],
        'error_message'      => [
            'template' => 'inputText',
            'label'    => 'Error Message',
        ],
        'validate_on_change' => [
            'template' => 'inputCheckbox',
            'label'    => 'Validate on Change',
            'options'  => array(
                array(
                    'value' => true,
                    'label' => 'Yes',
                ),
            )
        ],
    ];
}

• target_input : The key of the settings is target_input it will store the target input name for example a password or email field name. The ‘template’ of the UI will inputText as it is a text input. ‘label’ represents the settings label and ‘help_text’ will show a tooltip message info ,it is optional. Here is the output of the this Ui settings.

• error_message : This will store the error message which will be shown when the Confirmation input does not match the target input. Setting key is error_message and other option is same as the target_input ui.

• validate_on_change : We will use a checkbox ui component for this settings , to determine whether to validate when user starts typing in the input. For checkbox we will use inputCheckbox template.

render()

This method is self explanatory. The input html will be rendered in the form from this method. We will have access to full input config with values saved from editor and we can render it exactly as we need. As this is a text input we can leverage already built text input to compile it and then we will apply our validation on it. So here is how the code looks like :

public function render($data, $form)
{
    $data['attributes']['id'] = $this->makeElementId($data, $form);
    $this->pushScripts($data, $form);
    return (new FluentForm\App\Services\FormBuilder\Components\Text())->compile($data, $form);
}

There are some useful method available here like extractValueFromAttributes, extractDynamicValues, makeElementId, check the parent class for more. We have called another method here pushScripts , this will add our required scripts.

pushScripts()

You can see we called this method from the render() method, to add our required JS scripts here. Here we wrote a script that will compare the current field with the target input. It will show the saved error message if the value does not match. First it will check if the validate on change settings is enabled. ArrayHelper is a helper class to access array elements easily.

private function pushScripts($data, $form)
{
    add_action('wp_footer', function () use ($data, $form) {
        if (!ArrayHelper::isTrue($data, 'settings.validate_on_change')) {
            return;
        }
        ?>
        <script type="text/javascript">
            jQuery(document).ready(function ($) {
                function confirmValidate() {
                    
                    let confirmInput = jQuery('.<?php echo $form->instance_css_class; ?>').find("#<?php echo $data['attributes']['id']; ?>");
                    let targetName = '<?php echo ArrayHelper::get($data, 'settings.target_input') ?>';
                    let message = '<?php echo ArrayHelper::get($data, 'settings.error_message') ?>';
                    let targetInput = jQuery("input[name='" + targetName + "']")
                    let timeout = null;
                    confirmInput.on("keyup", function () {
                        clearTimeout(timeout); 
                        timeout = setTimeout(() => {
                            validate()
                        }, 1500);
                    });
                    function validate() {
                        if (confirmInput.val() !== targetInput.val()) {
                            let div = $('<div/>', {class: 'error text-danger'});
                            confirmInput.closest('.ff-el-group').addClass('ff-el-is-error');
                            confirmInput.closest('.ff-el-input--content').find('div.error').remove();
                            confirmInput.closest('.ff-el-input--content').append(div.text(message));
                        } else {
                            confirmInput.closest('.ff-el-group').removeClass('ff-el-is-error');
                            confirmInput.closest('.ff-el-input--content').find('div.error').remove();
                        }
                    }
                }
                confirmValidate();
            });
        </script>
        <?php
    }, 999);
}

validate()

This is the final method, here we will validate the input data after submission and show error message if validation fails. It checks the target field value and current field value. This method should be called from __construct() method. Like this

add_filter("fluentform/validate_input_item_{$this->key}", [$this, 'validate'], 10, 5);

This filter is available for all input. We can use this do our validation check and show error message if required.

public function validate($errorMessage, $field, $formData, $fields, $form)
{
    $ConfirmInputName = ArrayHelper::get($field, 'raw.attributes.name');
    $targetInputName = ArrayHelper::get($field, 'raw.settings.target_input');
    $message = ArrayHelper::get($field, 'raw.settings.error_message');
    
    if (ArrayHelper::get($formData, $ConfirmInputName) != ArrayHelper::get($formData, $targetInputName)) {
        $errorMessage = [$message];
    }
    
    return $errorMessage;
}

After we initialize this class we have our brand new custom field. We can go to the form editor a see if our new field is ready to be inserted into a form. It can be initialized like this.

add_action('fluentform/loaded',function (){
    new ConfirmField();
});

You can find the complete code here.

Final Note

It’s highly recommended to explore our source files and try to understand the design. Once you get it it’s very easy to implement your own custom input elements.

If you have any questions please feel free to reach our awesome facebook community group

But if you want to customize it and make it pretty something like yourdomain.com/my-forms/FORM_ID/OPTIONAL_SECURITY_CODE then please follow this tutorial

First copy and paste this code to your theme’s functions.php file or into your custom code snippet plugin

<?php

/*
 * Internal Function for Fluent Forms Custom Slug
 * Do not EDIT this function
 */
function customFfLandingPageSlug($slug)
{
    add_action('init', function () use ($slug) {
        add_rewrite_endpoint($slug, EP_ALL);
    });
    add_action('wp', function () use ($slug) {
        global $wp_query;
        if (isset($wp_query->query_vars[$slug])) {
            $formString = $wp_query->query_vars[$slug];
            if (!$formString) {
                return;
            }
            $array = explode('/', $formString);

            $formId = $array[0];

            if (!$formId || !is_numeric($formId)) {
                return;
            }

            $secretKey = '';
            if (count($array) > 1) {
                $secretKey = $array[1];
            }

            $paramKey = apply_filters('fluentform/conversational_url_slug', 'fluent-form');

            $_GET[$paramKey] = $formId;
            $_REQUEST[$paramKey] = $formId;

            $request = wpFluentForm('request');
	    $request->set($paramKey, $formId);
	    $request->set('form', $secretKey);
        }
    });
}

/*
 * Creating custom slug for conversational form landing page
 *
 * my-forms is your custom slug for the form
 * if your form id is 123 then the landing page url will be then
 * https://your-domain.com/my-forms/123
 * if you use Security Code on conversational form then the url will be
 * https://your-domain.com/my-forms-x/123/SECURITY-CODE
 *
 * After paste the code to your theme's functions.php file please re-save the permalink settings
*/

customFfLandingPageSlug('my-forms'); // you may change the "my-forms" for your own page slug

Once you add the code, please feel free to change the ‘my-forms’ to your own slug that you want

• my-forms is your custom slug for the form
• if your form id is 123 then the landing page URL will be then your-domain.com/my-forms/123
• if you use Security Code on conversational form then the URL will be your-domain.com/my-forms/123/SECURITY-CODE

Re-Save Permalink

Please note that once you add the code make sure you re-save your permalink from Settings -> Permalinks (on wp-admin)

That’s it.

Front End Filters

• fluentform/rendering_form
• fluentform/is_form_renderable
• fluentform/is_handling_submission
• fluentform/validation_errors
• fluentform/honeypot_name
• fluentform/before_render_item
• fluentform/rendering_field_data_{$elementKey}
• fluentform/rendering_field_html_{$elementName}
• fluentform/validate_input_item_{$elementName}
• fluentform/skip_no_conflict
• fluentform/load_styles
• fluentform/load_default_public
• fluentform/is_hide_submit_btn_{$formId}
• fluentform/form_class
• fluentform/html_attributes

SmartCode Filters

• fluentform/editor_shortcodes
• fluentform/shortcode_parser_callback_{$CustomShortCodeKey}
• fluentform/all_editor_shortcodes
• fluentform/smartcode_group_{$group}
• fluentform/payment_smartcode

Backend Filters

• fluentform/submission_confirmation
• fluentform/filter_insert_data
• fluentform/insert_response_data
• fluentform/entry_statuses_core
• fluentform/nonce_verify
• fluentform/nonce_error
• fluentform/numeric_styles
• fluentform/akismet_fields
• fluentform/will_return_html
• fluentform/honeypot_status
• fluentform/dashboard_notices
• fluentform/will_return_html
• fluentform/honeypot_status
• fluentform/is_admin_page
• fluentform/single_response_data
• fluentform/available_date_formats
• fluentform/user_guide_links
• fluentform/permission_set
• fluentform/api_all_logs
• fluentform/api_success_log
• fluentform/api_failed_log
• fluentform/truncate_password_values
• fluentform/verify_user_permission_
• fluentform/permission_callback
• fluentform/reportable_inputs
• fluentform/subfield_reportable_inputs
• fluentform/nonce_error
• fluentform/survey_shortcode_defaults
• fluentform/popup_shortcode_defaults
• fluentform/info_shortcode_defaults
• fluentform/shortcode_defaults
• fluentform/get_raw_responses
• fluentform/export_data
• fluentform/shortcode_feed_text
• fluentform/entry_lists_labels
• fluentform/all_entries
• fluentform/step_string
• fluentform/display_add_form_button
• fluentform/global_form_vars
• fluentform/all_entry_labels
• fluentform/all_entry_labels_with_payment
• fluentforms/recaptcha_v3_ref_score
• fluentform/auto_read
• fluentform/create_default_settings
• fluentform/form_fields_update
• fluentform/single_entry_widgets
• fluentform/disabled_analytics
• fluentform/entry_notes
• fluentform/add_response_note
• fluentform/disable_attachment_delete
• fluentform/create_default_settings
• fluentform/response_render_{ $element}
• fluentform/supported_conditional_fields
• fluentform/settings_module_{$module}
• fluentform/validation_message_{$ruleName}
• fluentform/validation_message_{$element}_{$ruleName}
• fluentform/item_rules_{ $element}
• fluentform/itl_options
• fluentform/ip_provider
• fluentform/uploader_args
• fluentform/file_uploaded
• fluentform/file_upload_params
• fluentform/uploaded_file_name
• fluentform/file_upload_validations
• fluentform/file_upload_validation_error
• fluentform/disable_inputmode
• fluentform/file_type_options

Editor Filters

• fluentform/nonce_error
• fluentform/editor_init_element_ {$elementKey}
• fluentform/editor_validation_rule_settings
• fluentform/editor_element_settings_placement
• fluentform/editor_components
• fluentform/editor_countries
• fluentform/editor_element_customization_settings

Integration Filters

• fluentform/addons_extra_menu
• fluentform/global_addons
• fluentform/global_integration_settings_{$settingsKey}
• fluentform/global_integration_fields_{$settingsKey}
• fluentform/global_notification_active_types
• fluentform/notifying_async_{$integrationKey}
• fluentform/mailchimp_keep_existing_interests
• fluentform/mailchimp_keep_existing_tags
• fluentform/global_notification_feed_{$feedMetaKey}
• fluentform/integration_data_{$integrationKey}
• fluentform/mailchimp_keep_existing_interests
• fluentform/icontact_request_args

User Registration Filters

• fluentform/user_registration_field_defaults
• fluentform/user_registration_feed_fields
• fluentorm/user_registration_creatable_roles
• fluentform/user_registration_feed

Post Integration Filters

• fluentform/post_metabox_accepted_general_fields
• fluentform/post_type_selection_types_args
• fluentform/post_selection_types
• fluentform/post_selection_posts_pre_data
• fluentform/post_selection_label_by

Email Filters

• fluentform/send_plain_html_email
• fluentform/submission_message_parse
• fluentform/email_subject
• fluentform/email_body
• fluentform/email_to
• fluentform/email_header
• fluentform/email_footer
• fluentform/email_styles
• fluentform/email_template_footer_text
• fluentform/email_attachments
• fluentform/filter_email_attachments
• fluentform/email_summary_body_text
• fluentform/email_summary_footer_text
• fluentform/email_content_type_header
• fluentform/email_template_header_image
• fluentform/email_template_email_heading
• fluentform/email_template_colors

Payment Filters

• fluentform/payment_smartcode
• fluentform/payment_settings_{ $method}
• fluentform/payment_method_settings_validation_{$method}
• fluentform/payment_submission_data
• fluentform/submission_order_items
• fluentform/payment_field_{$elementName}
• fluentform/stripe_checkout_args

Accessing Form 

<?php

$formApi = fluentFormApi('forms');
/**
* Find a form by form ID
* @param $entryId (int)
* @return null | Form Object
*/
$formObj = $formApi->find($formId = 1)

/**
* Get the paginated list of forms.
* You can search form forms with multiple attributes and get matched form objects in return with labels.
* @param $atts (array), $withFields (boolean)
* @return: array
*/
$atts = [
       'search' => 'formName',
       'status' => 'all',
       'sort_column' => 'id',
       'sort_by' => 'DESC',
       'per_page' => 10,
       'page' => 1
 ];
 $forms = $formApi->forms($atts, $withFields = false)

Accessing Form Properties 

<?php
/**
* Get the form instance first 
*/
$formApi = fluentFormApi('forms')->form($formId = 1);

/**
* Get inputs data by form ID
* You can get input fields with admin label or raw data.
* @parms $with (array)
* @return array
*/

$formApi->inputs($with = ['admin_label', 'raw']);

/**
* Get Form Input labels
* @return array
*/
$formApi->labels();

/**
* Get Form Input Fields Data
* @return array
*/
$formApi->fields();

/**
* Get Form Settings
* @return array
*/
$formApi->settings();

/**
* Get Form Email Notification Settings
* @return array
*/
$formApi->emailNotifications();

/**
* Get Form Meta data by meta key, for example : '_custom_form_css' , '_custom_form_js' 
* You can set a default value to return if no data found
* $param $metaKeyName (string), $default (boolean)
* @return array
*/
$formApi->meta($metaKeyName, $default = false);

/**
* Get Form Email Notification Settings
* @return array
*/
$formApi->emailNotifications();

/**
* Check the status of the form it passed all conditions and is renderable.
* @return array
*/
$formApi->renderable();

/**
* Get the conversion rate of the form.
* @return int
*/
$formApi->conversionRate();

/**
* Get the conversion rate of the form.
* @return int
*/
$formApi->submissionCount();

/**
* Get the view count of the form.
* @return int
*/
$formApi->viewCount();

/**
* Get the unread status count of the form.
* @return int
*/
$formApi->unreadCount();

/**
* Get any form property value
* You can directly access any form properly for example form title
* @return mixed | false
*/
$formApi->title;

Accessing Form Entries

<?php

/**
* Get the form entry instance first 
* @param $formId (int)
* @return null or Entry Object Instance
*/

$formApi = fluentFormApi('forms')->entryInstance($formId = 1);

/**
* Get a single entry of a form
* You can get a single form entry by entry Id
* @params $entryId (int), $includeFormats (boolean)
* @return null or Entry Object
*/

$entry = $formApi->entry($entryId = 1, $includeFormats = false);

/**
* Get a list of entries of a form
* You can paginated form entries by form Id 
* @params $atts (array), $includeFormats (boolean)
* @return array
*/

$formApi = fluentFormApi('forms')->entryInstance($formId = 1);
$atts = [
     'per_page' => 10,
     'page' => 1,
     'search' => '',
     'sort_by' => 'DESC',
     'entry_type' => 'all'
];
$entries = $formApi->entries($atts , $includeFormats = false);

/**
* Get the Entry Visual Data Report page data
* params $status (array)
* @return array
*/

$formApi = fluentFormApi('forms')->entryInstance($formId = 1);
$report = $formApi->report( $status = ['read']);

Dropdown/select fields options can be fetched from Google Sheet using fluentform/rendering_field_data_select filter. Here is the following code :

add_filter('fluentform/rendering_field_data_select', function ($data, $form) {
    
    $targetFormID = 3;
    //google sheet shared as CSV link
    $csvUrl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vT5FV_MYPwTqjhelf6_g02pS1Y60DbdkHDWPvRKVzLPeZSKFNFa4y6kMas3amvM7v1El-b1PVdC0wrP/pub?output=csv';
    
    $columName = 'Players'; // 'Players' is the column name
    $uniqueData = true;     // remove duplicate values
    
    if ($form->id !=  $targetFormID) {
        return $data;
    }
    
    // check if the name attribute is 'dropdown' , it is by default dropdown for the first dropdown input
    
    if (\FluentForm\Framework\Helpers\ArrayHelper::get($data, 'attributes.name') != 'dropdown') {
        return $data;
    }
    
    $result=[] ;
    
    if (!class_exists('CSVParser')) {
        require_once(FLUENTFORMPRO_DIR_PATH . 'libs/CSVParser/CSVParser.php');
    }
    
    $csvParser = new \CSVParser;
    $content = file_get_contents($csvUrl);
    $csvParser->load_data($content);
    $rows = $csvParser->parse($csvParser->find_delimiter());
    
    if(!$rows) {
        return $data;
    }
    $headers = array_shift($rows); // remove the first item
    $headerIndex = array_search($columName, $headers);
    
    foreach ($rows as $row) {
        
        if(!empty($row[$headerIndex])) {
            $result[]=
                
                [
                    "label"      => $row[$headerIndex],
                    "value"      => $row[$headerIndex],
                    "calc_value" => ""
                ];
        }
    }
    
    $result = ($uniqueData === true) ?   array_map("unserialize", array_unique(array_map("serialize", $result))) :  $result;
    
    // Merging with existing options here
    $data['settings']['advanced_options'] = array_merge($data['settings']['advanced_options'], $result );
    return $data;

}, 10, 2);

You need to do the following :

1. Change your form ID and place this code in your function.php file.
2. Change the $csvUrl with the Google sheet link published as CSV.
3. Add your column name in $columName.
4. Here we have used ‘dropdown’ as the name attribute
5. Set $uniqueData to true to remove duplicated data
6. Save the form once again from the form editor

That is all. New data added to the sheet will be automatically added to your dropdown option when you go into the form editor. Keep in mind that if you need new data then you have to go to the editor and save the form, so the newly added data gets saved in the database.

We hope that will be useful. Feel free to let us know if you need any help with our hooks and filters.

Using this filter you can create an email confirmation field. By default email input name attribute is ’email’ and if you add another email input its name is ’email_1′. So in this example, we have used these two names for two email fields, to make sure these match. Here is the following code :

 add_filter('fluentform/validate_input_item_input_email', function($errorMessage, $field, $formData, $fields, $form) {

    $target_form_id = 8;
    if($form->id != $target_form_id ) {
     return $errorMessage ;
    }
    
    
    if( $formData['email'] !=  $formData['email_1']  ){
        $errorMessage =  ['Error! Email does not match'];
    }
    
    return $errorMessage;
}, 10, 5);

Just change your form ID and place this code in your function.php file. You can do this for other fields as well such as the password fields using their respective validation filters. For the password field, the filter will be ‘fluentform/validate_input_item_input_password’ and the name attributes password fields which are by default ‘password’ and ‘password_1’.

Check all the input filter hooks in this page fluentform/validate_input_item_input_text.

But If you want to add your own smartcodes then it’s not that hard actually. Let’s see how you can add your own custom smartcode.

Pushing Smartcode to the suggested list of the Form editor

add_filter('fluentform/editor_shortcodes', function ($smartCodes) {
    $smartCodes[0]['shortcodes']['{my_own_smartcode}'] = 'My Own smartcode';
    return $smartCodes;
});

By using this code we have hooked the fluentform/editor_shortcodes filter hook and then added our own smartcode {my_own_smartcode} in the available list.

Pushing Smartcode to the suggested list of the Email / Confirmation Settings

add_filter('fluentform/all_editor_shortcodes',function($data){
	
	$customShortCodes = [
		     'title'=>'Custom',
                     'shortcodes' => ['{my_own_smartcode}' => 'my_own_smartcode',]
		];
	$data[] = $customShortCodes;
	return $data;
	
},10,1);

Transforming the value

Now our smartcode has been available and anyone can use that in any input field. Let’s transform that value with something dynamic.

/*
 * To replace dynamic new smartcode the filter hook will be
 * fluentform/editor_shortcode_callback_{your_smart_code_name}
 */
add_filter('fluentform/editor_shortcode_callback_my_own_smartcode', function ($value, $form) {
    $dynamicValue = $form->title; // We are send current form title. You can fetch any data and return
    return $dynamicValue;
}, 10, 2);

The following code will transform the value for Email and Confirmation Settings.

/*
 * Create a custom shortcode for email / confirmation or other after form submit
 * Usage: {my_custom_shortcode}
 * @param $value string original shortcode string
 * @param $parser class \FluentForm\App\Services\FormBuilder\ShortCodeParser
 */
add_filter('fluentform/shortcode_parser_callback_my_own_smartcode', function ($value, $parser) {
    // If you need $submittedData
    $entry = $parser::getEntry();
    $submittedData = \json_decode($entry->response, true);
  
    // if you need form ID
    $formId = $entry->form_id;
    
    return 'my custom value';
}, 10, 2);

So in this example, We are adding a composite filter fluentform_editor_shortcode_callback_my_own_smartcode. Here my_own_smartcode is the keyword of our SmartCode and then returns the current form’s title. You can definitely fetch your own value and return. Please note that You have to always return a number or string. No array or object return is allowed.

Build Geo Location SmartCode

Let’s build something useful. Some hosting providers provide $_SEREVR variable for geo-data based on IP address. Please note that It depends on your hosting provider. So please check if these $_SEREVR variables are available or not.

• $_SERVER[‘GEOIP_COUNTRY_NAME’] – Return Country Name
• $_SERVER[‘GEOIP_CITY’] – Return City name

So let’s create a smartcode {ffc_geo_country} smartcode which will return the user’s country name.

/*
 * Add the smartcode to the list
 */
add_filter('fluentform/editor_shortcodes', function ($smartCodes) {
    $smartCodes[0]['shortcodes']['{ffc_geo_country}'] = 'GEO Country';
    return $smartCodes;
});
/*
 * Transform the smartcode
 */
add_filter('fluentform/editor_shortcode_callback_ffc_geo_country', function ($value, $form) {
    if(isset($_SERVER['GEOIP_COUNTRY_NAME'])) {
        return $_SERVER['GEOIP_COUNTRY_NAME'];
    }
    return '';
}, 10, 2);

That’s it. It’s too easy to extend Fluent Forms. Please check the project at github.

If you did not start using Fluent Forms then you should definitely give it a try. It’s Free and available in the WordPress Plugin repository

For example for the phone field use this hook: fluentform/validate_input_item_phone

add_filter('fluentform/validate_input_item_{input_key}', function ($errorMessage, $field, $formData, $fields, $form) {
    
	$fieldName       = 'phone';
	$target_form_id  = 13;

	if($target_form_id !=  $form->id){ return $errorMessage; }
   	
	
	if ($inputValue = \FluentForm\Framework\Helpers\ArrayHelper::get($formData, $fieldName)) {
		$exist = wpFluent()->table('fluentform_entry_details')
			->where('form_id', $form->id)
			->where('field_name', $fieldName)
			->where('field_value', $inputValue)
			->first();
	
		if ($exist) {
			 $errorMessage = "Error ! This field needs to be unique.";
			 return [$errorMessage];
		}
	}
   	
    return $errorMessage;

}, 10, 5);

Use this code in the theme function.php file or any PHP code snippet plugin.

Feel free to share any insights or if you have a topic in mind you would like to see documentation and example code about it. For more discussion, join our Facebook group Fluent Forms Community.

This guide will walk you through the process step by step.

Easily create a login form using the fluentform/before_insert_submission hook.

For a more powerful and secure login solution, we highly recommend our dedicated free plugin, Fluent Auth. It offers features like two-factor authentication, social logins, login security, detailed audit logs, and automatic login/logout redirects without needing any code.

Build Your Login Form

Start by creating the login form that your users will use. In your Fluent Forms dashboard, click Add a New Form to begin. Click the New Blank Form option.

Add a minimum of two fields to your login form: an Email input field and a Password field (found under Advanced Fields).

Next, you’ll need to update the Name Attribute for each field so the code can identify them correctly. Click on the Email field, open the Advanced Options tab, and set the Name Attribute to email. Then do the same for the Password field, setting its Name Attribute to password.

When you’re done, save your form and copy its shortcode. You’ll need this shortcode later to display the form on a page and to connect it with the code snippet in the next step.

Create a New Page

Go to the WordPress Dashboard, click on the Add New Page from the left sidebar.
Here, paste your form’s Shortcode and save it.

Add the Custom PHP Code

After saving your login page, you’ll need to add some PHP code to make the form work. You can do this by editing your site’s functions.php file or by using FluentSnippets.

To set this up, add the code to your theme’s functions.php file. For safety, it’s best to use a child theme or a code snippets plugin so your changes aren’t lost when you update your theme.

Next, find the line that says if($form->id != 23) and replace 23 with your actual form ID. You can find this number in the shortcode you copied earlier.

Once you’ve updated the code, paste it into your functions.php file or your code snippets plugin and save the changes.

Note: In this example, No actual form submission will happen as we are redirecting the user before inserting the data

add_action('fluentform/before_insert_submission', function ($insertData, $data, $form) {

    if($form->id != 23) { // 23 is your form id. Change the 23 with your own login for ID
        return;
    }

    $redirectUrl = home_url(); // You can change the redirect url after successful login

    // if you have a field as refer_url as hidden field and value is: {http_referer} then
    // We can use that as a redirect URL. We will redirect if it's the same domain
    // If you want to redirect to a fixed URL then remove the next 3 lines
    if(!empty($data['refer_url']) && strpos($data['refer_url'], site_url()) !== false) {
        $redirectUrl = $data['refer_url'];
    }

    if (get_current_user_id()) { // user already registered
        wp_send_json_success([
            'result' => [
                'redirectUrl' => $redirectUrl,
                'message' => 'Your are already logged in. Redirecting now...'
            ]
        ]);
    }

    $email = \FluentForm\Framework\Helpers\ArrayHelper::get($data, 'email'); // your form should have email field
    $password = \FluentForm\Framework\Helpers\ArrayHelper::get($data, 'password'); // your form should have password field

    if(!$email || !$password) {
        wp_send_json_error([
            'errors' => ['Please provide email and password']
        ], 423);
    }

    $user = get_user_by_email($email);
    if($user && wp_check_password($password, $user->user_pass, $user->ID)) {
        wp_clear_auth_cookie();
        wp_set_current_user($user->ID);
        wp_set_auth_cookie($user->ID);
        /* user is not logged in.
        * If you use wp_send_json_success the the submission will not be recorded
        * If you remove the wp_send_json_success then it will record the data in fluentform
        * in that case you should redirect the user on form submission settings
        */
        wp_send_json_success([
            'result' => [
                'redirectUrl' => $redirectUrl,
                'message' => 'Your are logged in, Please wait while you are redirecting'
            ]
        ]);
    } else {
        // password or user don't match
        wp_send_json_error([
            'errors' => ['Email / password is not correct']
        ], 423);
    }
}, 10, 3);

Important: This method will not save any form entries in Fluent Forms. The code processes the login and stops the submission before the data is saved to your database. This is expected behavior for a login form.

If you have any further questions, concerns, or suggestions, please do not hesitate to contact our support team. Thank you. 

We used regular expressions here to check password strength for example minimum eight-character, must include one uppercase and one lowercase character. You can add more or remove them as you need. You can check live and get code from your regular expression from here.

Use the following code snippet in the theme function.php file or in any PHP snippet plugin. Make sure the password field input name is password or you can change it and add your form ID. That is all.

add_filter('fluentform/validate_input_item_input_password', function($errorMessage, $field, $formData, $fields, $form){
    
    $target_form_id = 9;
    if($form->id != $target_form_id){
        return;
    }
    
    $password =  $formData['password'];
    $errorMessage = '';
    
    //numbers
    $pattern = "/[0-9]/";
    $match = preg_match($pattern,$password);
    
    if (!$match){
        
        $errorMessage= "You need atleast 1 number!";
        return [$errorMessage];
    }
    
    // 8 charcter min
    $pattern = "/(?=.{8,})/";
    $match = preg_match($pattern,$password);
    
    //preg_match($pattern, $password, $matches, PREG_OFFSET_CAPTURE, 0);
    if (!$match){
        
        $errorMessage= "You need minimum 8 charcter!";
        return [$errorMessage];
    }

    // small and capital
    $pattern = "/(?=.*[a-z])(?=.*[A-Z])/";
    $match = preg_match($pattern,$password);
    if (!$match){

        $errorMessage= "You need one to 1 smaller and 1 upper charcter!";
        return [$errorMessage];
    }

    // special charcter
    $pattern = "/(?=.*[^\w\d])/";
    $match = preg_match($pattern,$password);
    if (!$match){

        $errorMessage= "You need one to 1 special charcter !";
        return [$errorMessage];
    }
    
    return ;
    
    
},10,5);

Feel free to share any insights or if you have a topic in mind you would like to see documentation and example code about it. For more discussion, join our Facebook group Fluent Forms Community.

add_filter('fluentform/validate_input_item_input_email', function ($default, $field, $formData, $fields, $form) {

    // You may change the following 3 lines
    $targetFormId = 140;
    $errorMessage = 'Looks like email is not correct'; // You may change here
    $emailableApiKey = 'live_b67c9cb0585e27dd256c';

    if ($form->id != $targetFormId) {
        return $default;
    }

    $fieldName = $field['name'];
    if (empty($formData[$fieldName])) {
        return $default;
    }
    $email = $formData[$fieldName];


    $request = wp_remote_get('https://api.emailable.com/v1/verify?email='.$email.'&api_key='.$emailableApiKey);

    if(is_wp_error($request)) {
        return $default; // request failed so we are skipping validation
    }

    $response = wp_remote_retrieve_body($request);

    $response = json_decode($response, true);

    if($response['state'] == 'deliverable') {
        return $default;
    }

    return $errorMessage;

}, 10, 5);

For details of the hook fluentform/validate_input_item_input_email check this documentation link.

Here is an example, this will be applied to form ID of 12.

add_filter('fluentform/validate_input_item_input_email', function ($error, $field, $formData, $fields, $form) {
    
     /*
     * add your accepted domains here
     * Other domains will be failed to submit the form
     */
    
    $targetFormId = 12;
    $acceptedDomains = ['gmail.com', 'hotmail.com', 'test.com'];
    $errorMessage = 'The provided email domain is not accepted';

    if ($form->id != $targetFormId) {
        return $error;
    }

    $fieldName = $field['name'];
    if (empty($formData[$fieldName])) {
        return $error;
    }

    $valueArray = explode('@', $formData[$fieldName]);
    $inputDomain = array_pop($valueArray);

    if (!in_array($inputDomain, $acceptedDomains)) {
        return [$errorMessage];
    }
    return $error;

}, 10, 5);

For details of the hook fluentform/validate_input_item_input_email check this documentation link.

If you are an advanced user open the file app/Modules/SubmissionHandler/SubmissionHandler.php file and check the submit() method to see the full implementation.

Server Side Lifecycle

The following steps completed one by one

1. Prepare the submitted the data
2. Validate the data
3. Prepare to insert data
4. Insert the data & initiate integrations and notifications
5. Send the response to the browser as a JSON response

Step 1: Preparing the Data

In this step, Fluent Forms set up the form data, available inputs, and submitted data from the browser. No major hooks fired in this step.

// Parse the url encoded data from the request object.
parse_str($this->app->request->get('data'), $data);

// Merge it back again to the request object.
$this->app->request->merge(['data' => $data]);

$formId = intval($this->app->request->get('form_id'));

$this->setForm($formId);

// Parse the form and get the flat inputs with validations.
$fields = FormFieldsParser::getInputs($this->form, ['rules', 'raw']);

// Sanitize the data properly.
$this->formData = fluentFormSanitizer($data, null, $fields);

Step 2: Validate the data

In this step, Fluent Forms validate the submitted data. If there has been any error or validation failure then it sends an error response to the client with in details errors object as JSON.

private function validate(&$fields)
{
    // Validate the form restrictions
    $this->validateRestrictions($fields);
    // Validate the form nonce. By default it does not verify as many people use caching
    $this->validateNonce();
    // If recaptcha enabled then it verify it.
    $this->validateReCaptcha();

    // Validate the required fields and offer each element to do their own validation. 
    // Please check the source code to get elements level validation filter hook.
}

Step 3: Prepare insert data

In this step, Fluent Forms prepare the data to insert into the database. You can use the following hooks to alter/format the data as per your need.

• fluentform/insert_response_data -> Use this to filter the actual response from the client
• fluentform/filter_insert_data -> The full entry. You don’t need to use this for almost 99% of cases.

Please check the corresponding filter hook doc for more information and its structure.

Step 4: Insert the data

In this step Fluent Forms provide an action hook before inserting data, inserting the data, and as well as after the submission hook. It’s an important hook for developers to do extended validations and post custom integrations.

Before Insert Action Hook: fluentform/before_insert_submission

After Insert Action Hook: fluentform/submission_inserted

If you want to do extended validation please use the fluentform/before_insert_submission hook. Check the corresponding hook documentation for more details.

Step 5: Send a response

This is the final step as everything is done and all the integrations and notifications are being processed. Fluent Forms finds the appropriate confirmation and send a response accordingly. You can use fluentform/submission_confirmation filter to alter the confirmation programmatically.

Server Side Hooks List for Submission

The hooks are fired as below (Step by Step)

• fluentform/insert_response_data [filter]
• fluentform/filter_insert_data [filter]
• fluentform/before_insert_submission [action]
• fluentform/submission_inserted [action]
• fluentform/submission_confirmation [filter]
• fluentform/before_submission_confirmation [action]

Client Side Submission Lifecycle

When you click the submit button the following steps are completed step by step

1. Validate the data
   • If validation is OK go to step 2
   • If validation failed, Stop and show the error messages
2. prepare form data
3. add loading icon to submit button
4. make the Ajax call to the server and wait for the server’s response
   • If the response success then go to step 5
   • If the response is failed, stop and trigger jQuery “fluentform_submission_failed” event to the jquery form object with the response
5. Trigger jQuery event “fluentform_submission_success” in the $form jQuery object with the response
6. Show a success message and redirect the user if confirmation is set so.
7. remove submit button loading.

var $inputs = $formSubmission
    .find(':input').filter(function (i, el) {
        return !$(el).closest('.has-conditions').hasClass('ff_excluded');
    });

validate($inputs);

var formData = {
    data: $inputs.serialize(),
    action: 'fluentform_submit',
    form_id: $formSubmission.data('form_id')
};

$(formSelector + '_success').remove();
$(formSelector + '_errors').html('');
$formSubmission.find('.error').html('');

$formSubmission
    .find('.ff-btn-submit')
    .addClass('disabled')
    .attr('disabled', 'disabled')
    .parent()
    .append('<div class="ff-loading"></div>');

$.post(fluentFormVars.ajaxUrl, formData)
    .then(function (res) {
        $theForm.trigger('fluentform_submission_success', {
            form: $theForm,
            response: res
        });

        if ('redirectUrl' in res.data.result) {
            if (res.data.result.message) {
                $('<div/>', {
                    'id': formId + '_success',
                    'class': 'ff-message-success'
                })
                    .html(res.data.result.message)
                    .insertAfter($theForm);
                $theForm.find('.ff-el-is-error').removeClass('ff-el-is-error');
            }

            location.href = res.data.result.redirectUrl;
            return;
        } else {
            $('<div/>', {
                'id': formId + '_success',
                'class': 'ff-message-success'
            })
                .html(res.data.result.message)
                .insertAfter($theForm);

            $theForm.find('.ff-el-is-error').removeClass('ff-el-is-error');

            if (res.data.result.action == 'hide_form') {
                $theForm.hide();
            } else {
                $theForm[0].reset();
            }
        }
    })
    .fail(function (res) {
        $theForm.trigger('fluentform_submission_failed', {
            form: $formSubmission,
            response: res
        });

        showErrorMessages(res.responseJSON.errors);
        scrollToFirstError(350);

        if ($theForm.find('.fluentform-step').length) {
            var step = $theForm
                .find('.error')
                .not(':empty:first')
                .closest('.fluentform-step');

            let goBackToStep = step.index();
            updateSlider(goBackToStep, 350, false);
        }
    })
    .always(function (res) {
        $formSubmission
            .find('.ff-btn-submit')
            .removeClass('disabled')
            .attr('disabled', false)
            .siblings('.ff-loading')
            .remove();
        // reset reCaptcha if available.
        if (window.grecaptcha) {
            grecaptcha.reset(
                getRecaptchaClientId(formData.form_id)
            );
        }
    });

fluentform_forms

Contains the forms that exist within Fluent Forms.

Structure

fluentform_form_meta

Contains metadata associated with forms.

fluentform_submissions

Contains Fluent Forms submission entries.

fluentform_submission_meta

Contains additional metadata related to entries. Mainly Submission notes stored here.

fluentform_entry_details

Contains key value pair of each entry for analyze and generating reports from the submitted entries.

fluentform_logs

Contains in details logs of Form/Entry. Any module can store details logs here. Currently, Each entry and it’s 3rd party integrations keeps logs for failed or success

fluentform_form_analytics

Contains in detailed form analytics data

fluentform_transactions

For Payment Type forms. Currently It’s not used by any module.

fluentform_transactions: This table structure may change. We are recommending not to use this table for now.