Tutorial

Elementor Form Data to Local Storage

Video

Description

A common question in the Elementor Facebook Community is how to use form values from an Elementor Form to populate other elements.

I looked at using custom form actions. However, as the forms are submitted with AJAX, we would need to store the data on a PHP Session and recover it with REST or AJAX.

Another method would be to save the form values to LocalStorage and recover them as needed.

I demonstrate this with a Heading Widget on the page and a Popup.

The method described in this tutorial will only work with one form on a page and only with Elementor Forms. However, it is a good start and works well.

Add a form to the page

Drag a standard Elementor Form Widget to the page
Go to Advanced Tab, Set the CSS ID to 'source_form'

Main Javascript

Drag an HTML Widget to the page, just under the Form
Copy the javascript below and paste it into the Widget Content.

Test Header on Change

Drag a Heading Widget to the page
Set Advanced -> CSS ID to 'target_heading_for_name'
Edit the content to a single space

JavaScript for Heading Widget

Drag an HTML Widget to the page, just under the Heading
Copy the javascript below and paste it into the Widget Content.

Create a new Popup

Create a new Popup
Add a top message
Drag a Heading Widget to the page
Set Advanced CSS ID to 'target_name'
Set the content to a single space

JavaScript for the Popup

Drag an HTML Widget to the page, just under the Heading
Copy the javascript below and paste it into the Widget Content.

Add a Button to open the popup

Drag a Button Widget to the main page
Set the "Dynamic Tag" to Popup
Click the spanner
Select your Popup

Code (click to copy)

Main JS to store Form Data in Local Storage (javascript)

This Javascript goes in an HTML Widget on the page with the source form Widget.


    ;(w => {
        let $, $form;
        const formWidjetID = 'source_form';
        const localStorageVariable = 'source_form';
        const inputSelctor = 'input, textarea';
        const triggers = 'change';
        
        w.addEventListener('load' , ()=>{
            $ = jQuery;
            init();
        })
        
        const init = () => {
            $form = $('#' + formWidjetID);
            const $inputs = $form.find(inputSelctor);
            $inputs.on(triggers, setLocalStorage);
        }
        
        const setLocalStorage = () =>{
            let json = convertFormToJSON($form.find('form'));
            localStorage.setItem(localStorageVariable, JSON.stringify(json));
            const event = new Event('formToLocalStorage');
            w.dispatchEvent(event);
        }
        
        const clearLocalStorage = () => {
            localStorage.removeItem(localStorageVariable);
        }
        
        const getValueByName = name => {
            const vars = localStorage.getItem(localStorageVariable);
            const obj = JSON.parse(vars);
            const fieldName = 'form_fields[' + name + ']';
            return obj[fieldName]? obj[fieldName] : "";
        }
        
        const convertFormToJSON = $form => {
          const array = $form.serializeArray(); 
          const json = {};
          $.each(array, function () {
            json[this.name] = this.value || "";
          });
          return json;
        }
        
        //Make getter function available to Window        
        window._formToLocal = {
            getValueByName: getValueByName,
            clearLocalStorage: clearLocalStorage
        }
        
    })(window);

JS for Page Element Update Test (javascript)

Place this in another HTML Widget. Below the element you want to update


    ;(w => {
        let $, 
        varName = 'name',
        targetSelector = '#target_heading_for_name  h2',
        $target;
        
        w.addEventListener('DOMContentLoaded', ()=>{
            $ = jQuery;
            $target = $(targetSelector);
            
        })
        
        w.addEventListener('formToLocalStorage', ()=>{
            const val = w._formToLocal.getValueByName(varName);
            $target.text(val)
        });
        
    })(window);

JS for the Popup (javascript)

Place this in an HTML Widget on the Popup


console.log('INIT');
    ;( w => { 
        const $ = jQuery;
        const varName = 'name'; 
        const targetSelector = '#target_name h2';
        const $target = $(targetSelector);
        const val = w._formToLocal.getValueByName(varName);
        $target.text(val);
    })(window);