Google Form-aanpassing: bevestigingsscherm geïmplementeerd

In het vorige artikel, getiteld "Valkuilen bij het maken van uw formulieren met Google Form", hebben we de moeilijkheden samengevat die zich voordeden bij het maken van contactformulieren met HTML-aanpassingen in Google Form. Deze keer stellen we u de implementatie van het bevestigingsscherm voor.

In het vorige project hadden we

invoerscherm → verzendbevestigingsscherm → automatisch bevestigingsbericht

te implementeren.

Deze keer behandelen we

invoerscherm → bevestigingsscherm → verzendbevestigingsscherm → automatisch bevestigingsbericht

de implementatie van het bevestigingsscherm.

Conclusie: het is niet mogelijk om een "bevestigingspagina" in te voegen met alleen Google Form

Google Forms kan de inhoud van inzendingen niet vrij verwerken of omleidingen beheren met JavaScript (vanuit veiligheidsoogpunt heeft het formulier een structuur waarin JavaScript geen toegang heeft tot de inhoud).

Google Forms

• kan geen tussentijdse bevestigingsscherm voor inzending implementeren.
• Het is onmogelijk om gegevens die worden ingevoerd naar andere pagina's te verzenden of in HTML in te voegen.

Daarom is een aangepast HTML-formulier + GAS-webapplicatie essentieel.

Met een GAS-webapplicatie bouw je het formulier met HTML en GAS in plaats van Google Forms te gebruiken. Omdat ik een contactformulier wilde maken met Google Forms, besloot ik Gemini om advies te vragen.

Kan ik de gegevens die op een statische pagina (index.html) zijn ingevoerd, doorsturen naar een bevestigingspagina (confirm.html) en die gegevens vervolgens via aan Google Forms koppelen?

Dat is een scherp idee, maar helaas is deze benadering in principe "praktisch onmogelijk". Als je het per se wilt doen: ①index.html → Sla de waarden die in het formulier zijn ingevoerd op in sessionStorage met JavaScript. ②Lees de waarden uit sessionStorage in confirm.html en geef ze weer. ③POST naar Google Forms' formResponse met behulp van (aanpassen met entry.xxxxx) Let echter op: dit is een niet-officiële methode voor formResponse, en het werkt niet voor gebruikers met JavaScript uitgeschakeld, dus er zijn nadelen.

Geïmplementeerd met JavaScript!

Laten we nu de implementatiemethode met JavaScript doornemen.

①index.html: invoerpagina maken

Eerst maken we een contactformulier op de invoerpagina. Op dit moment voeren we de entry.xxxx-waarde 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>

Wanneer de bevestigingsknop wordt ingedrukt, worden de in het formulier ingevoerde waarden opgeslagen in sessionStorage met JavaScript, en wordt naar de bevestigingspagina /inquiry/confirm.html overgeschakeld.

②confirm.html: bevestigingspagina maken

De waarden die in sessionStorage zijn opgeslagen, worden in class="confirmBlock" ingevuld.

Voer vervolgens de entry.xxxxx-waarde van Google Form in het formulier eronder 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 plaatsen we een invoerformulier op een bevestigingspagina…

Dat is omdat we de Google Form formResponse laten werken met dit formulier!

We verbergen het formulier zelf met type="hidden".

Dit is de werkelijke bevestigingspagina

Als je type="hidden" verwijdert, zal het aangepaste Google Form hier zichtbaar worden!

Wanneer op de verzendknop wordt geklikt

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

Het is prima als je naar de pagina voor de voltooiingsscherm complete.html navigeert!

Het proces werkt als volgt: de waarden die in index.html zijn ingevoerd, worden doorgegeven aan het Google Form op confirm.html en verzonden.

Omdat het een aangepast Google Form is, kun je ook het samenvattingsspreadsheet gebruiken en kunt verzendbevestigingse-mails via GAS automatisch versturen.

Samenvatting

Het "bevestigingsscherm" dat moeilijk te realiseren is met alleen Google Form, kan flexibel worden geïmplementeerd door JavaScript te gebruiken. ※Hoewel je moet zeggen dat de broncode volledig zichtbaar is 💦

Met wat kleine aanpassingen kun je het uiterlijk en gebruiksgemak aanzienlijk verbeteren. Waarom voeg je niet even wat extra moeite toe?