fbpx

Tutorial

Elementor Form Data to Local Storage

Uses Plugins

Elementor PRO

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.

1

Add a form to the page

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

Main Javascript

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

Test Header on Change

  1. Drag a Heading Widget to the page
  2. Set Advanced -> CSS ID to 'target_heading_for_name'
  3. Edit the content to a single space
4

JavaScript for Heading Widget

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

Create a new Popup

  1. Create a new Popup
  2. Add a top message
  3. Drag a Heading Widget to the page
  4. Set Advanced CSS ID to 'target_name'
  5. Set the content to a single space

 

6

JavaScript for the Popup

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

Add a Button to open the popup

  1. Drag a Button Widget to the main page
  2. Set the "Dynamic Tag" to Popup
  3. Click the spanner
  4. 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);