openmindculture · March 24, 2021 13:00
diff --git a/webflow.js.html b/webflow.js.html
 <html>
  <head>
    <title>Webflow Form Value Persistance PoC</title>
  </head>
  <body>
    <!-- can be tested without being logged into webflow designer (see below) -->

 <script type="text/javascript">
 /* Formulardaten vor Absenden lokal speichern
 * um sie nach Abschluss des Abos wieder zu verwenden.
 *
 * Dieses Script/WF-Symbol auf allen Formularseiten einfügen!
 * Die IDs der Formularfelder müssen einheitlich benannt sein:
 * first-name, last-name, email
 * 
 * Funktionsweise (gängige Praxis laut Webflow-Forum):
 * Mangels ordentlicher Client JS API überschreiben wir eventuell
 * bestehende onSubmit-Handler aller Formulare auf dieser Seite.
 */

 document.querySelectorAll('form').forEach(
  function (currentForm) {
    if (currentForm.querySelectorAll('#first-name')) {
      currentForm.onsubmit = function () {
        var firstName = '';
        var lastName = '';
        var email = '';

        if (document.getElementById('first-name')) {
          firstName = document.getElementById('first-name').value;
        }
        if (document.getElementById('last-name')) {
          lastName = document.getElementById('last-name').value;
        }
        if (document.getElementById('email')) {
          email = document.getElementById('email').value;
        }
        
        localStorage.setItem('firstName', firstName);
        localStorage.setItem('lastName', lastName);
        localStorage.setItem('email', email);
      };
    }
  })
 </script>

 <script type="text/javascript">
 /* Dieses Script/WF-Symbol auf alle Dankeseiten einfügen! 
 *
 * Gespeicherte Formulardaten nach Abschluss des Abos
 * aus der LocalStorage lesen und mithilfe eines versteckten Formulars
 * an Webflow-Formularservice senden,
 * um ohne zusätzlichen Datenabgleich mit Zahlungsdienstleistern
 * alle Kunden als solche in unserer Datenbank zu speichern.
 *
 * Nach erfolgreichem Versand werden die gespeicherten Daten gelöscht.
 */

  (function () {
    var firstName = localStorage.getItem('firstName');
    var lastName = localStorage.getItem('lastName');
    var email = localStorage.getItem('email');
    if (firstName || lastName || email) {
      var saveCustomerForm = document.createElement('form');
      saveCustomerForm.setAttribute('id', 'wf-form-custom-planted-conversion');
      saveCustomerForm.setAttribute('name', 'wf-form-custom-planted-conversion');
      saveCustomerForm.setAttribute('data-name', 'Custom Planted Conversion');
      saveCustomerForm.setAttribute('method', 'get');
      saveCustomerForm.setAttribute('redirect', '#');
      saveCustomerForm.setAttribute('data-redirect', '#');
      saveCustomerForm.setAttribute('class', 'hidden wf-hidden visually-hidden');
      saveCustomerForm.setAttribute('aria-hidden', 'true');
    
      var firstNameField = document.createElement('input');
      firstNameField.setAttribute('type', 'hidden');
      firstNameField.setAttribute('name', 'first-name');
      firstNameField.setAttribute('value', firstName);
      saveCustomerForm.appendChild(firstNameField);

      var lastNameField = document.createElement('input');
      lastNameField.setAttribute('type', 'hidden');
      lastNameField.setAttribute('name', 'last-name');
      lastNameField.setAttribute('value', lastName);
      saveCustomerForm.appendChild(lastNameField);

      var emailField = document.createElement('input');
      emailField.setAttribute('type', 'hidden');
      emailField.setAttribute('name', 'email');
      emailField.setAttribute('value', email);
      saveCustomerForm.appendChild(emailField);

      var convertedField = document.createElement('input');
      convertedField.setAttribute('type', 'hidden');
      convertedField.setAttribute('name', 'converted');
      convertedField.setAttribute('value', window.location.pathname);
      saveCustomerForm.appendChild(convertedField);

      document.getElementsByTagName('body')[0].appendChild(saveCustomerForm);
      document.getElementById('wf-form-custom-planted-conversion').submit();

      /* TODO empty only if successful if we knew how webflow handles form submission */
      localStorage.removeItem('firstName');
      localStorage.removeItem('lastName');
      localStorage.removeItem('email');
    }
    
  })();

 </script>

    <!-- can be tested without being logged into webflow designer,
      by inserting JavaScript snippets using dev tools console:
    1. open default form page
    2. insert first JS snippet
    3. fill form
    4. send form (you should now see values ins localStorage)
    5. open thanks page (values still visibile ins localStorage)
    6. insert second JS snippet
       which will be excuted immediately,
       another form will be created and sent (visible in dev tools network panel)
       localStorage will be cleared
    -->

 <!-- sample webflow form with matching input field id's -->
 <!-- using action="#" to prevent actually submitting mock data -->
    <h1>Webflow Form Value Persistance PoC</h1>
    <form
      id="wf-form-FFF-Email-Details"
      name="wf-form-FFF-Email-Details"
      data-name="FFF Email Details"
      method="get"
      redirect="https://example.com/fff-external"
      data-redirect="https://example.com/fff-external"
      class="form-fff-data"
      action="#"
    >
      <div class="form-group">
        <div class="form-grid-halves">
          <input
            type="text"
            id="first-name"
            name="first-name"
            data-name="First Name"
            placeholder="Vorname"
            maxlength="256"
            required=""
          >
          <input
            type="text"
            id="last-name"
            name="last-name"
            data-name="Last Name"
            placeholder="Nachname"
            maxlength="256"           
          >
        </div>
      </div>
      <div class="form-group">
        <input
          type="email"
          id="email"
          name="email"
          data-name="Email"
          placeholder="Email Adresse"
          maxlength="256"
          required="">
      </div>
      <input
        type="submit"
        value="Weiter (mock submit)"
        data-wait="Bitte warten..."
      >
    </form>
  </body>
 </html>
	<html>
	<head>
	<title>Webflow Form Value Persistance PoC</title>
	</head>
	<body>
	<!-- can be tested without being logged into webflow designer (see below) -->

	<script type="text/javascript">
	/* Formulardaten vor Absenden lokal speichern
	* um sie nach Abschluss des Abos wieder zu verwenden.
	*
	* Dieses Script/WF-Symbol auf allen Formularseiten einfügen!
	* Die IDs der Formularfelder müssen einheitlich benannt sein:
	* first-name, last-name, email
	*
	* Funktionsweise (gängige Praxis laut Webflow-Forum):
	* Mangels ordentlicher Client JS API überschreiben wir eventuell
	* bestehende onSubmit-Handler aller Formulare auf dieser Seite.
	*/

	document.querySelectorAll('form').forEach(
	function (currentForm) {
	if (currentForm.querySelectorAll('#first-name')) {
	currentForm.onsubmit = function () {
	var firstName = '';
	var lastName = '';
	var email = '';

	if (document.getElementById('first-name')) {
	firstName = document.getElementById('first-name').value;
	}
	if (document.getElementById('last-name')) {
	lastName = document.getElementById('last-name').value;
	}
	if (document.getElementById('email')) {
	email = document.getElementById('email').value;
	}

	localStorage.setItem('firstName', firstName);
	localStorage.setItem('lastName', lastName);
	localStorage.setItem('email', email);
	};
	}
	})
	</script>

	<script type="text/javascript">
	/* Dieses Script/WF-Symbol auf alle Dankeseiten einfügen!
	*
	* Gespeicherte Formulardaten nach Abschluss des Abos
	* aus der LocalStorage lesen und mithilfe eines versteckten Formulars
	* an Webflow-Formularservice senden,
	* um ohne zusätzlichen Datenabgleich mit Zahlungsdienstleistern
	* alle Kunden als solche in unserer Datenbank zu speichern.
	*
	* Nach erfolgreichem Versand werden die gespeicherten Daten gelöscht.
	*/

	(function () {
	var firstName = localStorage.getItem('firstName');
	var lastName = localStorage.getItem('lastName');
	var email = localStorage.getItem('email');
	if (firstName \|\| lastName \|\| email) {
	var saveCustomerForm = document.createElement('form');
	saveCustomerForm.setAttribute('id', 'wf-form-custom-planted-conversion');
	saveCustomerForm.setAttribute('name', 'wf-form-custom-planted-conversion');
	saveCustomerForm.setAttribute('data-name', 'Custom Planted Conversion');
	saveCustomerForm.setAttribute('method', 'get');
	saveCustomerForm.setAttribute('redirect', '#');
	saveCustomerForm.setAttribute('data-redirect', '#');
	saveCustomerForm.setAttribute('class', 'hidden wf-hidden visually-hidden');
	saveCustomerForm.setAttribute('aria-hidden', 'true');

	var firstNameField = document.createElement('input');
	firstNameField.setAttribute('type', 'hidden');
	firstNameField.setAttribute('name', 'first-name');
	firstNameField.setAttribute('value', firstName);
	saveCustomerForm.appendChild(firstNameField);

	var lastNameField = document.createElement('input');
	lastNameField.setAttribute('type', 'hidden');
	lastNameField.setAttribute('name', 'last-name');
	lastNameField.setAttribute('value', lastName);
	saveCustomerForm.appendChild(lastNameField);

	var emailField = document.createElement('input');
	emailField.setAttribute('type', 'hidden');
	emailField.setAttribute('name', 'email');
	emailField.setAttribute('value', email);
	saveCustomerForm.appendChild(emailField);

	var convertedField = document.createElement('input');
	convertedField.setAttribute('type', 'hidden');
	convertedField.setAttribute('name', 'converted');
	convertedField.setAttribute('value', window.location.pathname);
	saveCustomerForm.appendChild(convertedField);

	document.getElementsByTagName('body')[0].appendChild(saveCustomerForm);
	document.getElementById('wf-form-custom-planted-conversion').submit();

	/* TODO empty only if successful if we knew how webflow handles form submission */
	localStorage.removeItem('firstName');
	localStorage.removeItem('lastName');
	localStorage.removeItem('email');
	}

	})();

	</script>

	<!-- can be tested without being logged into webflow designer,
	by inserting JavaScript snippets using dev tools console:
	1. open default form page
	2. insert first JS snippet
	3. fill form
	4. send form (you should now see values ins localStorage)
	5. open thanks page (values still visibile ins localStorage)
	6. insert second JS snippet
	which will be excuted immediately,
	another form will be created and sent (visible in dev tools network panel)
	localStorage will be cleared
	-->

	<!-- sample webflow form with matching input field id's -->
	<!-- using action="#" to prevent actually submitting mock data -->
	<h1>Webflow Form Value Persistance PoC</h1>
	<form
	id="wf-form-FFF-Email-Details"
	name="wf-form-FFF-Email-Details"
	data-name="FFF Email Details"
	method="get"
	redirect="https://example.com/fff-external"
	data-redirect="https://example.com/fff-external"
	class="form-fff-data"
	action="#"
	>
	<div class="form-group">
	<div class="form-grid-halves">
	<input
	type="text"
	id="first-name"
	name="first-name"
	data-name="First Name"
	placeholder="Vorname"
	maxlength="256"
	required=""
	>
	<input
	type="text"
	id="last-name"
	name="last-name"
	data-name="Last Name"
	placeholder="Nachname"
	maxlength="256"
	>
	</div>
	</div>
	<div class="form-group">
	<input
	type="email"
	id="email"
	name="email"
	data-name="Email"
	placeholder="Email Adresse"
	maxlength="256"
	required="">
	</div>
	<input
	type="submit"
	value="Weiter (mock submit)"
	data-wait="Bitte warten..."
	>
	</form>
	</body>
	</html>