Topics

vorige keer"Valkuilen bij het maken van klantformulieren met Google Formulieren"Ik heb een artikel geschreven waarin ik de punten samenvat die ik tegenkwam bij het maken van een aanvraagformulier met behulp van HTML-aanpassing in Google Forms. Deze keer zal ik uitleggen hoe je een bevestigingsscherm maakt.

In het vorige geval,

Invoerscherm → Verzenden voltooiingsscherm → Automatisch verzenden bevestigingsmail

Dit was de implementatie.

Deze keer,

Invoerscherm → Invoerbevestigingsscherm → Verzendvoltooiingsscherm → Automatisch verzenden van bevestigingsmail

Hieronder vindt u een samenvatting van de implementatie van het bevestigingsscherm.

Conclusie: Je kunt geen bevestigingspagina invoegen met alleen Google Formulieren

Met Google Formulieren heeft u geen vrije zeggenschap over de verwerking of doorgifte van ingediende inhoud met behulp van JavaScript (om veiligheidsredenen is de inhoud van het formulier niet toegankelijk met behulp van JavaScript).

Google Formulieren is

• Het is niet mogelijk om een ​​tussenliggend scherm (ter bevestiging) te maken vóór verzending.
• Het is ook niet mogelijk om de gegevens die u invoert naar andere pagina's te sturen of in HTML in te voegen.

Daarom, "Origineel HTML-formulier + GAS-webapp" is verplicht.

GAS-webappIk besloot HTML en GAS te gebruiken maar een Google Forms. Ik wilde een aanvraagformulier maken met Google Form 3, dus vroeg ik Gemini om hulp.

Is het mogelijk om de gegevens die op een statische pagina (index.html) worden ingevoerd door te geven aan de bevestigingspagina (confirm.html) en vervolgens de gegevens op die pagina te koppelen aan een Google Formulier met

?

Het is een slim idee, maar helaas is deze aanpak in principe "bijna onmogelijk". Als je het echt wilt doen: 1. index.html → Sla de waarden die in het formulier zijn ingevoerd op in sessionStorage met behulp van JavaScript. 2. confirm.html leest en toont de waarden van sessionStorage. 3. POST naar formResponse van Google Form (aanpassen met entry.xxxxx). Houd er echter rekening mee dat dit een onofficiële methode van formResponse is en het nadeel heeft dat het niet werkt voor gebruikers met JavaScript uitgeschakeld.

Plus geïmplementeerd met JavaScript!

Laten we nu eens kijken hoe we dit kunnen implementeren met behulp van JavaScript.

①index.html: Een invoerpagina maken

Maak eerst een aanvraagformulier op de invoerpagina. Hiervoor kunt u Google Forms gebruiken.entry.xxxxVoer geen waarde 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 u op de bevestigingsknop drukt, wordt de in het formulier ingevoerde waarde met behulp van JavaScript opgeslagen in sessionStorage en wordt de bevestigingspagina weergegeven./inquiry/confirm.htmlU wordt doorgestuurd naar.

②confirm.html: Maak een bevestigingspagina

De waarde opgeslagen in sessionStorageclass=”confirmBlock”Giet het erin.

En in het formulier er direct onder, voer je GoogleForm inentry.xxxxxVoer de waarde 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 wordt hier een invoerformulier geplaatst als het een bevestigingspagina is?

Het is Google FormulierformResponseOmdat het op deze manier werkt!

type="hidden"Het formulier zelf wordt verborgen.

Hier is het daadwerkelijke bevestigingsscherm

type="hidden"Als u deze verwijdert, wordt uw aangepaste Google Formulier hier verborgen!

Wanneer de verzendknop wordt ingedrukt

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

Pagina voor het voltooien van de inzendingcomplete.htmlGewoon doorlopen en je kunt aan de slag!

Als een stroomindex.htmlDe ingevoerde waarde inconfirm.htmlDe gegevens worden doorgestuurd naar het Google Formulier en verzonden.

Omdat het een aangepast Google Formulier is, kunt u ook samenvattende spreadsheets gebruiken en automatische antwoord-e-mails versturen via GAS.

samenvatting

Een "bevestigingsscherm" dat moeilijk te implementeren is met alleen Google Forms, kan flexibel worden geïmplementeerd met behulp van JavaScript. (De broncode is overigens wel volledig zichtbaar.)

Met een kleine aanpassing kunt u het uiterlijk en gebruiksgemak aanzienlijk verbeteren. Waarom probeert u het niet eens?