目次
HTMLフォームの作成 name属性の設定
静的なフォームを作り、name属性をGoogleフォームの属性値とあわせる。Googleフォームのname属性は、デベロッパーツールで、検索。entry.でリストを探す。
<section id="information">
<div class="sub-heading">
<div class="sub-heading-text"><p>CONTACT</p></div>
<div class="sub-heading-box"></div>
</div>
<div class="contact-item">
<form id="contact-form" class="c-form" action="https://docs.google.com/forms/u/2/d/e/1FAIpQLSebUggyzrP8GrO_cGRZXOMwXfDQBHOevhQibRvjhapylYxsRQ/formResponse" method="POST" target="hidden_iframe">
<div class="c-form__item text-small">
<label class="c-form__label" for="field-name">名前</label>
<input type="text" class="c-form__input" id="field-name" name="entry.1411330169" placeholder="山田 太郎" required>
<span class="error">入力してください</span>
</div>
<div class="c-form__item text-small">
<label class="c-form__label" for="field-mail" >連絡先（メールアドレス）</label>
<input type="email" class="c-form__input" id="field-mail" name="entry.190713713" placeholder="sample@sample.com" required>
<span class="error">入力してください</span>
</div>
<div class="c-form__item text-small">
<label class="c-form__label" for="field-tel">連絡先（携帯）</label>
<input type="tel" class="c-form__input" id="field-tel" name="entry.1609146069" placeholder="080-1111-2222" required>
<span class="error">入力してください</span>
</div>
<div class="c-form__item text-small">
<label class="c-form__label" for="field-profile">所属</label>
<input type="text" class="c-form__input" id="field-profile" name="entry.295222285"/>
</div>
<div class="c-form__item text-small">
<label class="c-form__label">お問い合わせ内容</label>
<div class="c-form__inquiry">
<input type="radio" value="事業内容に関する質問" id="sitsumon" name="entry.197938579">
<label class="inquiry-label" for="sitsumon">事業内容に関する質問</label>
<input type="radio" value="取材依頼" id="syuzai" name="entry.197938579">
<label class="inquiry-label" for="syuzai">取材依頼</label>
<input type="radio" value="参加希望" id="sanka" name="entry.197938579">
<label class="inquiry-label" for="sanka">参加希望</label>
</div>
</div>
<div class="c-form__item text-small">
<label class="c-form__label" for="field-message">お問い合わせ内容</label>
<textarea class="c-form__input" id="field-message" name="entry.1960252539" placeholder="お問い合わせ内容" rows="8"></textarea>
</div>
<div class="c-form__submit">
<button id="js-submitButton" type="button">送信</button>
</div>
</form>
<p class="end-message">お問い合わせありがとうございました<br>
<span class="text-small">ご入力いただいたメールアドレス宛に、<br class="sp-wrap">自動返信メールを送信しました</span>
</p>
<p class="false-message">未入力の項目があります</p>
</div>
</section>フォーム送信時、画面遷移させないようにする＆必須チェックのバリデーション
body要素の閉じタグ手前にiframeで、フォームを設置する。
<iframe name="hidden_iframe" id="hidden_iframe" scrolling="no" frameborder="no" style="display: none"></iframe>
</body>
</html>フォーム送信のボタンをtype=submitから、type=buttonにしておく（type=submitのままにする場合は、event.preventDefault();を使う）
<div class="c-form__submit">
<button id="js-submitButton" type="button">送信</button>
</div>JQueryで、必須項目のinvalidチェックをする。invalidが存在しなければ、form.submit()でフォームを送信
/*==================================================
/*フォーム送信時の動き*/
/*===================================*/
$("#js-submitButton").on("click", event =>{
const form = $("#contact-form");
form.find('.invalid').removeClass('invalid');// 初期化
$('input[required]:invalid,textarea[required]:invalid').each(function(){// 項目が空だったらエラー表示をする
$(this).addClass('invalid');
$(this).next().addClass('invalid');
});
if($('.invalid').length == 0){
form.submit();
setTimeout(function(){
form[0].reset(); //フォーム送信時にリセットする
$(".end-message").slideDown();
$(".false-message").slideUp();
},500);
}else{
$(".end-message").slideUp();
$(".false-message").slideDown();
}
return false;
});フォームの送信時に、自動返信メールを送信したいとき （GASでやる）
ループ処理すれば、もっと簡単になりそう。GASの送信者（from）に使うメールアドレスは、フォームを作成したアカウントのGmailアドレスか、そのGmailアドレスに紐づけたメールアドレスしか利用できないので、注意。
function submitForm(e){
var itemResponses = e.response.getItemResponses();
var message = '';
for (var i = 0; i < itemResponses.length; i++) {
var itemResponse = itemResponses[i];
var question = itemResponse.getItem().getTitle();
var answer = itemResponse.getResponse();
if (question == 'お名前'){
var username = answer;
}
if (question == '連絡先（メールアドレス）'){
var usermail = answer;
}
if (question == '連絡先（携帯）'){
var phone = answer;
}
if (question == 'お問い合わせ内容'){
var description = answer;
}
if (question == '所属'){
var profile = answer;
}
if (question == 'お問い合わせ内容'){
var freetext = answer;
}
message += (i + 1).toString() + '. ' + question + ': ' + answer + '\n';
}
/* ユーザー宛メール送信設定 */
var title2 = '[問い合わせフォームへのお問合せを受付けました]';
var content2 = username
+ ' 様\n\n'
+ 'この度は、お問合せいただき、ありがとうございます。\n'
+ '下記の内容で、受付けました。\n'
+ '後ほど折り返しご連絡させていただきますので、いましばらくお待ちください。\n\n'
+ message
+ '\n\n'
+ '----------\n'
+ 'SAMPLE\n'
+ 'https://www.exsample.com'
+ '\n\n※このメールはお問い合わせフォームからの自動送信メールです。';
var options2 = {from: 'sample@gmail.com', name: 'サンプルのお問合せフォーム'};
GmailApp.sendEmail(usermail, title2, content2, options2);
/* 管理者宛メール送信設定 */
var address = 'sample@sample.co.jp';
var title = '[問い合わせフォームへのお問合せを受信しました]';
var content = '下記の内容で、お問合せを受信しました。\n\n'
+ message
+ '\n\n'
+ '※このメールはGoogleフォームからの自動送信メールです。';
var options = {from: 'sample@gmail.com', name: 'なかがわ', replyTo: usermail};
GmailApp.sendEmail(address, title, content, options);
}
