Bevestigingsscherm van een aangepast Google Form geïmplementeerd

In ons vorige artikel, Valkuilen bij het bouwen van uw formulier met GoogleForm, hebben we de knelpunten beschreven die we tegenkwamen bij het maken van een contactformulier via HTML-aanpassingen in GoogleForm. In dit artikel laten we zien hoe we het bevestigingsscherm hebben gemaakt.

In het vorige project ging het om

invoerscherm → bedankpagina → automatische bevestigingsmail

te implementeren.

Deze keer gaat het om

invoerscherm → invoerbevestigingsscherm → bedankpagina → automatische bevestigingsmail

Hieronder vatten we de implementatie van het bevestigingsscherm samen.

Conclusie: Met Google Forms alleen is het niet mogelijk om een "bevestigingspagina" tussen te voegen.

Met Google Forms kun je het verzenden van gegevens via JavaScript niet vrij aansturen of de navigatie regelen (om veiligheidsredenen is de inhoud van het formulier niet via JS toegankelijk).

Google Forms,

• Het is in principe niet mogelijk om een tussenpagina (bevestiging) vóór het verzenden in te voegen.
• Het is ook niet mogelijk om ingevoerde gegevens naar een andere pagina te sturen of in HTML in te voegen.

Daarom is een eigen HTML-formulier in combinatie met een GAS-webapp noodzakelijk.

Met een GAS-webapp bouw je het formulier met HTML en GAS in plaats van met Google Forms. Omdat ik een contactformulier met Google Forms 3 wilde maken, heb ik Gemini om advies gevraagd.

Kan ik de gegevens die op de statische pagina (index.html) zijn ingevoerd, doorgeven aan de bevestigingspagina confirm.html, en vervolgens de gegevens op die pagina koppelen aan het Google Form met ?

Het is een scherp idee, maar helaas is die aanpak in principe "bijna onmogelijk". Als je het toch wilt proberen: ① index.html → sla de waarden die in het formulier zijn ingevoerd op in sessionStorage met JavaScript. ② confirm.html → lees de waarden uit sessionStorage en toon ze. ③ Gebruik een om via POST naar de formResponse van Google Forms te sturen (pas dit aan met entry.xxxxx). Let op: deze methode is niet officieel ondersteund door formResponse, en werkt niet voor gebruikers met JavaScript uitgeschakeld.

Plus JavaScript voor de implementatie!

Laten we nu verdergaan met de implementatie via JavaScript.

① index.html: Invoerpagina aanmaken

Maak eerst op de invoerpagina het contactformulier aan. Op dit moment vul je de waarde van entry.xxxx van Google Form nog niet in.

<form id="form">
  <input type="text" name="category" placeholder="お問い合わせ種類">
  <input type="text" name="name" placeholder="お名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="submit">確認</button>
</form>

<script>
  document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    for (const [key, value] of formData.entries()) {
      sessionStorage.setItem(key, value); // sessionStorage に保存
    }
    window.location.href = '/inquiry/confirm.html';
  });
</script>

Zodra op de knop Bevestigen wordt geklikt, slaat JavaScript de ingevulde waarden van het formulier op in sessionStorage en gaat de pagina door naar de bevestigingspagina /inquiry/confirm.html.

② confirm.html: Bevestigingspagina aanmaken

De in sessionStorage opgeslagen waarden worden ingevoegd in class="confirmBlock".

Vul vervolgens in het formulier direct daaronder de waarde van entry.xxxxx van Google Form in.

<div class="confirmBlock">
  <p>お問い合わせ種類: <span id="category"></span></p>
  <p>お名前: <span id="name"></span></p>
  <p>メールアドレス: <span id="email"></span></p>
</div>

<form action="<https://docs.google.com/forms/d/e/1FAIpQLSc-.../formResponse>"
      method="POST" target="hidden_iframe" onsubmit="submitted = true;">
  <input type="hidden" name="entry.1234567890" id="categoryInput">
  <input type="hidden" name="entry.2345678901" id="nameInput">
  <input type="hidden" name="entry.3456789012" id="emailInput">
  <button type="submit">送信</button>
</form>

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

<script>
  // 表示とフォームへの挿入
  ['category', 'name', 'email'].forEach(key => {
    const value = sessionStorage.getItem(key);
    document.getElementById(key).textContent = value;
    document.getElementById(key + 'Input').value = value;
  });

  let submitted = false;
</script>

Waarom staat hier een invoerformulier, terwijl dit een bevestigingspagina is...?

Dat komt doordat we formResponse van Google Form via dit formulier laten werken!

Het formulier zelf wordt verborgen met type="hidden".

Hier is de daadwerkelijke bevestigingspagina:

Als je type="hidden" weglaat, is het aangepaste Google Form hier verborgen!

Wanneer op de verzendknop wordt geklikt

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

Het is in orde als je naar de bevestigingspagina complete.html verwijst!

De werkwijze is als volgt: de waarden die in index.html zijn ingevoerd, worden doorgegeven aan het Google Form in confirm.html en vervolgens verzonden.

Omdat het gaat om een aangepast Google Form, kun je ook een spreadsheet gebruiken voor het verzamelen van gegevens, en met GAS kun je automatisch bevestigingsmails versturen.

Conclusie

Een bevestigingsscherm, wat met een Google Form alleen moeilijk te realiseren is, kun je met JavaScript flexibel implementeren. Overigens is de broncode natuurlijk wel helemaal zichtbaar 💦

Met een kleine aanpassing kun je het uiterlijk en de gebruiksvriendelijkheid aanzienlijk verbeteren. Probeer het eens als extra stap.