Skip to content

Christmas Holiday Special Discount

Flat 30% OFF!
Formidable Forms alternatives
  • Pricing
  • Features
  • Demos
  • Integrations
  • Blog
  • Docs
  • Contact
  • Account

Christmas Holiday Special Discount

Flat 30% OFF!
Formidable Forms alternatives
Popular Search entrysubmitpaymentsubmissionentries

Developer Docs

  • Database Tables of Fluent Forms
  • Submission Lifecycle
  • Integration Feed – Fields API
  • Creating Custom SmartCode for Form Editor
  • Limit Email Domains in Fluent Forms Form Submission
  • Email verification with Emailable
  • Email Confirmation Field
  • How to make a login form with Fluent Form
  • How to make a strong password requirement in user registration forms with Fluent Forms
  • Create Unique Fields in Fluent Forms
  • Populate dropdown field options from Google Sheet
  • Form PHP API
  • PHP Action Hooks
  • PHP Filter Hooks
  • Useful Snippets
  • Creating Pretty Conversational Form URL Slug
  • How to create your own custom field with Fluent Forms

Action Hooks

  • fluentform_before_insert_submission
  • fluentform_submission_inserted
  • fluentform_before_submission_confirmation
  • fluentform_inserted_new_form
  • fluentform_before_form_render
  • fluentform_loaded
  • fluentform_before_form_actions_processing
  • fluentform_before_insert_payment_form
  • flentform_form_duplicated
  • fluentform_form_imported
  • fluentform_after_save_form_settings
  • fluent_editor_init
  • fluentform_loading_editor_assets
  • fluentform_before_editor_start
  • fluentform_after_editor_start
  • fluentform_after_form_screen_wrapper
  • fluentform_before_form_screen_wrapper
  • fluentform_render_item_{$item}
  • fluentform_after_form_render
  • fluentform_form_element_start
  • fluentform_render_item_step_start
  • fluentform_render_item_step_end
  • ff_rendering_calculation_form
  • fluentform_maybe_scheduled_jobs
  • fluentform_do_email_report_scheduled_tasks
  • before_fluentform_permission_set_assignment
  • after_fluentform_permission_set_assignment
  • fluentform_global_menu
  • fluentform_after_form_navigation
  • ff_fluentform_form_application_view_{$route}
  • fluentform_init_custom_stylesheet
  • fluentform_load_form_assets
  • fluentform_scripts_registered
  • flunetform_render_payment_entries
  • fluentform_pre_load_scripts
  • fluentform_new_response_note_added
  • fluentform_starting_file_upload
  • fluentform_global_notify_completed
  • fluentform_save_global_integration_settings_{ $settingsKey}
  • ff_integration_action_result
  • fluentform_email_summary_details
  • fluentform_email_template_after_footer
  • fluentform_addons_page_render_{$current_menu_item}
  • fluentform_before_form_settings_app
  • fluentform_after_form_settings_app
  • fluentform_form_settings_container_{$current_sub_route}
  • fluentform_before_global_settings_wrapper
  • fluentform_after_global_settings_wrapper
  • fluentform_global_settings_component_{$currentComponent}
  • fluentform_after_global_settings_option_render
  • fluentform_before_global_settings_option_render
  • fluentform_before_export_import_wrapper
  • fluentform_after_export_import_wrapper
  • fluentform_before_export_import_container
  • fluentform_after_before_export_import_container
  • fluentform_form_styler
  • fluentform_after_style_generated
  • fluentform_conversational_frame_head
  • fluentform_conversational_frame_footer
  • fluentform_user_registration_before_start
  • fluentform_created_user
  • fluentform_user_registration_completed
  • fluentform_post_integration_success
  • fluentformpro_entry_confirmation
  • fluentform_before_partial_entry_deleted
  • fluentform_after_partial_entry_deleted
  • flunetform_render_payment_entries
  • fluentform_before_all_entries_render
  • fluentform_after_all_entries_render
  • fluentform_before_entry_deleted
  • fluentform_after_entry_deleted
  • fluentform_payment_receipt_before_content
  • fluentform_payment_receipt_after_content
  • fluent_payment_frameless_{$paymentMethod}
  • fluentform_rending_payment_method_
  • fluentform_payment_method_render_{$methodName}
  • fluentform_before_payment_status_change
  • fluentform_after_payment_status_change
  • fluentform_payment_refunded_{$method}
  • fluentform_payment_refunded
  • fluentform_payment_refund_updated_{$method}
  • fluentform_payment_refund_updated
  • fluentform_paypal_ipn_verification_failed
  • fluentform_ipn_endpint_
  • fluentform_ipn_paypal_action_
  • fluentform_ipn_paypal_action_web_accept

Filter Hooks

  • fluentform_insert_response_data
  • fluentform_filter_insert_data
  • fluentform_submission_confirmation
  • fluentform_validate_input_item_{input_key}
  • fluentform_entry_statuses_core
  • fluentform_rendering_field_data_{INPUT_KEY}
  • fluentform_email_body
  • fluentform_rendering_field_data_select
  • fluentform_filter_email_attachments
  • fluentform_rendering_form
  • fluentform_is_form_renderable
  • fluentform_is_handling_submission
  • fluentform_validation_errors
  • fluentform_honeypot_name
  • fluentform_before_render_item
  • fluentform_rendering_field_html_{$elementName}
  • fluentform_skip_no_conflict
  • fluentform_load_styles
  • fluentform_load_default_public
  • fluentform_is_hide_submit_btn_{ $formId}
  • fluentform_form_class
  • fluent_form_html_attributes
  • fluentform_editor_shortcodes
  • fluentform_shortcode_parser_callback_{smart_code_name}
  • fluentform_all_editor_shortcodes
  • fluentform_smartcode_group_{$group}
  • fluentform_payment_smartcode
  • fluentform_entry_statuses_core
  • fluentform_nonce_verify
  • fluentform_nonce_error
  • fluentform_numeric_styles
  • fluentform_akismet_fields
  • ff_will_return_html
  • fluentform_honeypot_status
  • fluentform_dashboard_notices
  • fluentform_is_admin_page
  • fluentform_single_response_data
  • fluentform/available_date_formats
  • fluentform_permission_set
  • fluentform_api_all_logs
  • fluentform_api_success_log
  • fluentform_api_failed_log
  • fluentform_truncate_password_values
  • fluentform_verify_user_permission_{ $eachPermission}
  • fluentform_permission_callback
  • fluentform_nonce_error
  • fluentform_editor_init_element_{$element}
  • fluent_editor_validation_rule_settings
  • fluent_editor_element_settings_placement
  • fluent_editor_components
  • fluent_editor_countries
  • fluent_editor_element_customization_settings
  • 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_{$feed->meta_key}
  • fluentform_integration_data_{$integrationKey}
  • fluentform_shortcode_defaults
  • fluentform_info_shortcode_defaults
  • fluentform_get_raw_responses
  • fluentform_export_data
  • fluentform_shortcode_feed_text
  • fluentform_entry_lists_labels
  • fluentform_all_entries
  • fluentform_step_string
  • 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_response_render_{element}
  • fluentform_settings_module_{$module}
  • fluentform_rendering_field_html_
  • fluentform_validation_message_{$ruleName}
  • fluentform_item_rules_{$item}
  • 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_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
  • fluentform_nonce_verify
  • fluentform_popup_shortcode_defaults
  • fluentform_survey_shortcode_defaults
  • fluentform_itl_options
  • fluentform_ip_provider
  • fluentform_post_type_selection_types_args
  • fluentform_post_selection_types
  • fluentform_post_selection_posts_pre_data
  • fluentform_post_selection_label_by
  • fluentform_user_registration_field_defaults
  • fluentform_icontact_request_args
  • fluentform_user_registration_feed_fields
  • fluentorm_UserRegistration_creatable_roles
  • fluentform_payment_settings_{$method}
  • payment_method_settings_validation_{$method}
  • fluentform_with_payment_submission_data
  • fluentform_submission_order_items
  • fluentform_payment_field_{$elementName}
  • fluentform_stripe_checkout_args
  • fluentform_uploader_args
  • fluent_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
  • fluentform_default_upload_path 

Reference API Classes

  • BaseFieldManager Class
  • IntegrationManager Class
  • PDF TemplateManager Class
  • BasePaymentMethod Class
  • BaseProcessor Class

Data Definations

  • $submission_data Array
  • $form Object
  • Home
  • Docs
  • Developer Docs
  • Submission Lifecycle

Submission Lifecycle

Table of Contents
  • Server Side Lifecycle
  • Step 1: Preparing the Data
  • Step 2: Validate the data
  • Step 3: Prepare insert data
  • Step 4: Insert the data
  • Step 5: Send response
  • Server Side Hooks List for Submission
  • Client Side Submission Lifecycle

In this article we will cover how Fluent Forms submission Life-cycle happens under the hood. From submit button click to get confirmation message.

If you are an advanced user open the file app/Modules/Form/FormHandler.php file and check the onSubmit() 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 insert data
  4. Insert the data & initiate integrations and notifications
  5. Send response to browser as JSON response
Fluent Form Submission Flow

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 the data. If there has any error or validation failed then it send error response to 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 in the database. You can use the following hooks to alter/format the data as per your need.

  • fluentform_insert_response_data -> Use this for filter the actual response from client
  • fluentform_filter_insert_data -> The full entry. You don’t need to use this for almost 99% cases.

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

Step 4: Insert the data #

In this step Fluent Forms provide action hook before insert data, insert the data and as well as after 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 response #

This is the final step as everything is done and all the integrations and notifications being processed. Fluent Forms finds the appropriate confirmation and send response accordingly. You can use fluentform_submission_confirmation filter to alter the confirmation programatically.

Server Side Hooks List for Submission #

The hooks are fired as bellow (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 completed as step by step

  1. Validate the data
    • If validation 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 server and wait for the server response
    • If response success then go to step 5
    • If response as failed, stop and trigger jQuery “fluentform_submission_failed” event to the jquery form object with response
  5. Trigger jQuery event “fluentform_submission_success” in the $form jQuery object with response
  6. Show 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)
            );
        }
    });

Tutorial
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Still stuck? How can we help?

How can we help?

Updated on July 20, 2021
Database Tables of Fluent FormsIntegration Feed – Fields API

Powered by BetterDocs

Table of Contents
  • Server Side Lifecycle
  • Step 1: Preparing the Data
  • Step 2: Validate the data
  • Step 3: Prepare insert data
  • Step 4: Insert the data
  • Step 5: Send response
  • Server Side Hooks List for Submission
  • Client Side Submission Lifecycle
Fluent Forms

Addons

  • Signature (Paid)
  • PDF Generator
  • Mautic
  • Mailpoet

Get Help

  • Documentation
  • API Docs
  • Support
  • Brand Guideline

Resource

  • Fluent Forms Free vs. Pro
  • Fluent Forms vs. WPForms
  • Fluent Forms vs. Gravity Forms
  • Fluent Forms vs. Ninja Forms
  • Fluent Forms vs. Forminator

Our Brands

  • Ninja Tables
  • FluentCRM
  • Fluent Support
  • FluentSMTP
  • WP Social Ninja
  • Paymattic
  • AzonPress

Email Newsletter

We won't send you spam. Unsubscribe at any time.
Ninja-Tables-BFCM-Popup-Banner
×
Facebook Facebook Group Twitter Instagram YouTube WordPress

Copyright © 2023 Fluent Forms. A Brand of  WPManageNinja™ | Affiliate | Terms & Privacy

Scroll to top
  • Pricing
  • Features
  • Demos
  • Integrations
  • Blog
  • Docs
  • Contact
  • Account