GASでフォーム作成

Googleフォームのデザインをもう少し自由にしたくて。

スプレッドシートを新規作成。

拡張機能→Apps Scriptを開く。

コード.gs

function doGet() {

var toppage=HtmlService.createTemplateFromFile("index");
return toppage.evaluate();
}

function doPost(postdata){

var sh=SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();

var time=new Date();

var name=postdata.parameters.name.toString();
var mail=postdata.parameters.mail.toString();
var gender=postdata.parameters.gender.toString();
var city=postdata.parameters.city.toString();

sh.appendRow([time,name,gender,mail,city]);

var resultpage=HtmlService.createTemplateFromFile("result");
return resultpage.evaluate();
}

const main = () => {
  SlidesApp
    .getActivePresentation()
    .getSlides()
    .forEach(s => {
      s.getSheetsCharts().forEach(c => c.refresh())
    })
}

index.html

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Form</title>   
 <base target="_top">
  <?!= HtmlService.createHtmlOutputFromFile("css").getContent(); ?>
</head>

<body>
 <h2 class="main-title">GASでフォーム作成</h2>
 <div class="main-container">
  <form method="post" action="https://script.google.com/macros/s/AKfycbxOWGAXSz4wBqQf_FsycDSZfk6o09xHsYTzlmBNqVHcHcjoFFqA7eV2wXALuNGh4Ytl/exec">

   <h3>Name :<input type="text" name="name"><br></h3>
   <h3>E-mail address :<input type="text" name="mail"><br></h3>
   <h3>Gender :</h3>
   <div class="gender">
    <input type="radio" name="gender" value="male">male <br>
    <input type="radio" name="gender" value="femail">female <br>
    <input type="radio" name="gender" value="another">another <br>
   </div>
  <br>

   <h3>Country :</h3>
   <div class="city">
    <input type="radio"  name="city" value="japan">japan　</br>
    <input type="radio"  name="city" value="korea">korea　</br>
    <input type="radio"  name="city" value="china">china　</br>
    <input type="radio"  name="city" value="usa">usa　</br>
    <input type="radio"  name="city" value="canada">canada　</br>
    <input type="radio"  name="city" value="another">another　</br>
   </div>
   </br>
   <input class="btn btn--orange" type="submit" value="送信する"><br>
  </form>
 </div>
 
</body>
</html>

result.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <h1>Thank You!</h1>    
  </body>
</html>

result.html

<style>
  body {
   background-color: lavender;
  }
  .gender {
    color:green;
  }
  .city {
    color:orange;
  }
  h3 {
    margin-bottom:0;
  }
</style>

デプロイしたフォーム

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル