静的なフォームにGoogleフォームを組み込むためのメモ

静的なフォームにGoogleフォームを組み込むためのメモ

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);
}
まい

フロントエンドエンジニア目指して、勉強中です。

その他カテゴリの最新記事