【GASのWEBアプリ】で登録フォームを作る。

<スポンサーリンク>

今回作ったもの↓

下記の登録フォームです。

GASで登録フォームを作る。

GASで登録フォームを作る。

doPost(e)でformから、下記内容を取り出すことができ、

{contentLength=116.0, parameter={usex=F, uaddress=愛知県蒲郡市, uname=山下太郎, umail=DAFAFA@KOA, uzip=123-4567}, parameters={uzip=[Ljava.lang.Object;@e0b929d, uaddress=[Ljava.lang.Object;@4defa65b, uname=[Ljava.lang.Object;@31f04075, umail=[Ljava.lang.Object;@7faa2595, usex=[Ljava.lang.Object;@2de7cf87}, contextPath=, queryString=, postData=FileUpload}

そこから情報を抜き出すためには、e.parameter.○○で

e.parameter.unam　⇒　山下太郎

が取り出せる形になります。

function doGet() {
  let html = HtmlService.createTemplateFromFile('index').evaluate().getContent();
  return HtmlService.createHtmlOutput(html)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function doPost(e) {
  var sheet = SpreadsheetApp.openById("○○○○○○○○○○〇").getSheetByName("シート1");
  var array = [e.parameter.uname, e.parameter.umail, e.parameter.usex, e.parameter.uaddress];
  sheet.appendRow(array);

  //  var html = HtmlService.createHtmlOutputFromFile("thankyou");
  let html = HtmlService.createTemplateFromFile('thankyou').evaluate().getContent();
  sheet.getRange(7,1).setvalue(html);
  return HtmlService.createHtmlOutput(html)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

}

//https://officeforest.org/wp/2018/11/28/google-apps-script%E3%81%A7get%E3%83%BBpost/
//https://nixeneko.hatenablog.com/entry/2021/03/12/070000

index.html

<!--/*%_skip_start_%*/-->
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta http-equiv="content-Type" content="text/html" 　charset="utf-8">
  <title>登録フォーム</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>

</head>

<body>
  <div class="user">
    <header class="user__header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
      <h1 class="user__title">A lightweight and simple sign-up form</h1>
    </header>

    <form class="form" method="post"
      action="https://script.google.com/macros/s/○○○○○○○○○○○○○○/exec">
      <div class="form__group">
        <!--      お名前を入力してください。（必須）<br> -->
        <input type="text" name="uname" id="uname"  class="form__input"  placeholder="Username">
        <span class="alert"></span>
      </div>
      <!-- 性別を入力してください。（必須）<br> -->
      <input type="radio" name="usex" value="M">男性
      <input type="radio" name="usex" value="F">女性
      <span class="alert"></span>
      <div class="form__group">
        <!-- メールアドレスを入力してください。（必須）<br>-->
        <input type="text" name="umail" size="50" id="umail" placeholder="Email" class="form__input">
        <span class="alert"></span>
      </div>
      <!-- 郵便番号を入力してください。（例：012-3456）<br> -->
      <div class="form__group">
        <input type="text" name="uzip" id="uzip" placeholder="郵便番号(例:012-3456)" class="form__input">
        <span class="alert"></span>
      </div>
      <!-- 住所を入力してください。（100文字まで）<br> -->
      <div class="form__group">
        <textarea name="uaddress" cols="50" rows="3" placeholder="住所" class="form__input"></textarea>
        <span class="alert"></span>
      </div>
      <button  type="submit" class="btn">Register</button>

    </form>
  </div>
</body>

</html>

<!-- https://copypet.jp/692/-->

おしゃれシンプルデザインの新規登録フォーム！ コピペで差が付くデザインをCSSで - デシノン
ユーザーインターフェイスがよすぎる、おしゃれな新規登録フォームをまとめました！ プロ並のデザインなのに、ぜんぶコピペでできちゃう、、
deshinon.com

js1.html

<script type="text/javascript">


  $(function(){
	// フォームがサブミットされたときの処理
	$("form").submit(function(){
		// サブミットチェック用の変数を宣言
		var checkSubmit = true;

		// 名前の入力チェック
		if ($("#uname").val() == "") {
			// 未入力時はerrorクラスを追加
			$("#uname").addClass("error");
			// メッセージを追加
			$("#uname+span").text("名前を入力してください。");
			// 未入力なのでサブミットさせない
			checkSubmit = false;
		} else {
			// 入力時はerrorクラスを削除
			$("#uname").removeClass("error");
			// メッセージを削除
			$("#uname+span").text("");
		}

		// 性別の入力チェック
		if ($(":radio:checked").length == 0) {
			// チェックされた要素がない（＝未入力）
			// errorクラスを追加
			$(":radio").addClass("error");
			// メッセージを追加
			$(":radio+span").text("性別を入力してください。");
			// 未入力なのでサブミットさせない
			checkSubmit = false;
		} else {
			// 入力時はerrorクラスを削除
			$(":radio").removeClass("error");
			// メッセージを削除
			$(":radio+span").text("");
		}

		// メールアドレスの入力チェック
		if ($("#umail").val() == "") {
			// 未入力時はerrorクラスを追加
			$("#umail").addClass("error");
			// メッセージを追加
			$("#umail+span").text("メールアドレスを入力してください。");
			// 未入力なのでサブミットさせない
			checkSubmit = false;
		} else {
			// 入力時はerrorクラスを削除
			$("#umail").removeClass("error");
			// メッセージを削除
			$("#umail+span").text("");
		}

		// サブミットチェック用の変数を返す
		return checkSubmit;
	});

	// 名前が変更されたときの処理
	$("#uname").change(function(){
		// 名前の入力チェック
		if ($("#uname").val() == "") {
			// 未入力時はerrorクラスを追加
			$("#uname").addClass("error");
			// メッセージを追加
			$("#uname+span").text("名前を入力してください。");
		} else {
			// 入力時はerrorクラスを削除
			$("#uname").removeClass("error");
			// メッセージを削除
			$("#uname+span").text("");
		}
	});

	// ラジオボタンがクリックされたときの処理
	$(":radio").click(function(){
		// 性別の入力チェック
		if ($(":radio:checked").length == 0) {
			// チェックされた要素がない（＝未入力）
			// errorクラスを追加
			$(":radio").addClass("error");
			// メッセージを追加
			$(":radio+span").text("性別を入力してください。");
		} else {
			// 入力時はerrorクラスを削除
			$(":radio").removeClass("error");
			// メッセージを削除
			$(":radio+span").text("");
		}
	});

	// メールアドレスが変更されたときの処理
	$("#umail").change(function(){
		// メールアドレスの書式チェック
		if ($("#umail").val().match(/^[\w\.-]+\@[\w\.-]+$/)) {
			// 書式が正しい
			$("#umail").removeClass("error");
			$("#umail+span").text("");
		} else {
			// 書式に誤りがある
			$("#umail").addClass("error");
			$("#umail+span").text("書式に誤りがあります。");
		}
	});

	// 郵便番号が変更されたときの処理
	$("#uzip").change(function(){
		// 郵便番号の書式チェック
		if ($("#uzip").val().match(/^\d{3}\-\d{4}$/)) {
			// 書式が正しい
			$("#uzip").removeClass("error");
			$("#uzip+span").text("");
		} else {
			// 書式に誤りがある
			$("#uzip").addClass("error");
			$("#uzip+span").text("書式に誤りがあります。");
		}
	});

	// 住所の入力中の処理
	$("textarea").keyup(function(){
		// 文字数を取得
		var inputLength = $("textarea").val().length;

		// 住所の文字数チェック
		if (inputLength <= 100) {
			// 100文字以内
			$("textarea").removeClass("error");
			$("textarea+span").text(inputLength+"/100");
		} else {
			// 100文字を超えた
			$("textarea").addClass("error");
			$("textarea+span").text("入力文字数が長すぎます。");
		}
	});
});

//cssの何か
const button = document.querySelector('.btn')
const form   = document.querySelector('.form')

button.addEventListener('click', function() {
   form.classList.add('form--no') 
});


</script>

css.html

基本↓のサイトの内容からこのサイトに適応させております。
その他さまざまなCSSありますので、ぜひ参考に下さい。

おしゃれシンプルデザインの新規登録フォーム！コピペで差が付くデザインをCSSで - デシノン

ユーザーインターフェイスがよすぎる、おしゃれな新規登録フォームをまとめました！プロ並のデザインなのに、ぜんぶコピペでできちゃう、、

<style>
  //エラー用
  .error {
    background-color: #FFCCCC;
  }

  .alert {
    color: #FF0000;
    font-size: small;
  }

  //cssのもの

  $font-family: "Roboto";
  $font-size: 14px;

  $color-primary: #ABA194;

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: $font-family;
    font-size: $font-size;
    background-size: 200% 100% !important;
    animation: move 10s ease infinite;
    transform: translate3d(0, 0, 0);
    background: linear-gradient(45deg, #49D49D 10%, #A2C7E5 90%);
    height: 100vh
  }

  .user {
    width: 90%;
    max-width: 340px;
    margin: 10vh auto;
  }

  .user__header {
    text-align: center;
    opacity: 0;
    transform: translate3d(0, 500px, 0);
    animation: arrive 500ms ease-in-out 0.7s forwards;
  }

  .user__title {
    font-size: $font-size;
    margin-bottom: -10px;
    font-weight: 500;
    color: white;
  }

  .form {
    margin-top: 40px;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    transform: translate3d(0, 500px, 0);
    animation: arrive 500ms ease-in-out 0.9s forwards;
  }

  .form--no {
    animation: NO 1s ease-in-out;
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .form__input {
    display: block;
    width: 100%;
    padding: 20px;
    font-family: $font-family;
    -webkit-appearance: none;
    border: 0;
    outline: 0;
    transition: 0.3s;

    &:focus {
      background: darken(#fff, 3%);
    }
  }

  .btn {
    display: block;
    width: 100%;
    padding: 20px;
    font-family: $font-family;
    -webkit-appearance: none;
    outline: 0;
    border: 0;
    color: white;
    background: $color-primary;
    transition: 0.3s;

    &:hover {
      background: darken($color-primary, 5%);
    }
  }

  @keyframes NO {

    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }

  @keyframes arrive {
    0% {
      opacity: 0;
      transform: translate3d(0, 50px, 0);
    }

    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes move {
    0% {
      background-position: 0 0
    }

    50% {
      background-position: 100% 0
    }

    100% {
      background-position: 0 0
    }
  }
</style>

thankyou.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta http-equiv="content-Type" content="text/html" 　charset="utf-8">
  <title>登録フォーム</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <?!= HtmlService.createHtmlOutputFromFile('js1').getContent(); ?>
  <?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>

<body>
  <div class="user">
    <header class="user__header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3219/logo.svg" alt="" />
      <h1 class="user__title">ありがとう</h1>
    </header>
  </div>
</body>

</html>