質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.13%

スプレッドシートでフォームから書き込む際送信ボタンを押すとHTMLページに飛んでしまう

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 538
SeiyaYamamoto

score 10

スプレッドシートでフォームから書き込む仕様にしたくて、スプレッドシート上にshouhtmlでフォームを表示させているのですが、入力後際送信ボタンを押すとHTMLページに飛んでしまうのですが、classなどが間違っているのでしょうか

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<base target="_top">
</head>
<body>
<h2>webmaster管理</h2>
<form method="post" action="https://script.google.com/macros/s/AKfycbxzYwMcEaofsHRoXnuTRuWHTVeKD_hK3VSudcfK5A/dev">

<div class="form-style-5">
<form>
<fieldset>
<legend><span class="number">1</span>webmaster追加</legend>
<select id="job" name="field4">
<optgroup label="Indoors">
<option value="1">webmaster1</option>
<option value="2">webmaster2</option>
<option value="3">webmaster3</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>
<option value="webmaster2">webmaster2</option>

</optgroup>
</select>    
<input type="text" name="field1" placeholder="URL *">

<input type="email" name="field2" placeholder="制作会社">
<textarea name="field3" placeholder="About yourself"></textarea>
<label for="job">Interests:</label>

</fieldset>
<fieldset>
<legend><span class="number">2</span> Additional Info</legend>
<textarea name="field3" placeholder="About Your School"></textarea>
</fieldset>
<input type="submit" onclick="run_input()" value="送信する" />

</form>
</div>
</form>
</body>
<style>
.form-style-5{
max-width: 500px;
padding: 10px 20px;
background: #f4f7f8;
margin: 10px auto;
padding: 20px;
background: #f4f7f8;
border-radius: 8px;
font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
border: none;
}
.form-style-5 legend {
font-size: 1.4em;
margin-bottom: 10px;
}
.form-style-5 label {
display: block;
margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(255,255,255,.1);
border: none;
border-radius: 4px;
font-size: 16px;
margin: 0;
outline: 0;
padding: 7px;
width: 100%;
box-sizing: border-box; 
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; 
background-color: #e8eeef;
color:#8a97a0;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;

}
.form-style-5 input[type="text"]:focus,
.form-style-5 input[type="date"]:focus,
.form-style-5 input[type="datetime"]:focus,
.form-style-5 input[type="email"]:focus,
.form-style-5 input[type="number"]:focus,
.form-style-5 input[type="search"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
background: #d2d9dd;
}
.form-style-5 select{
-webkit-appearance: menulist-button;
height:35px;
}
.form-style-5 .number {
background: #1abc9c;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 15px 15px 15px 0px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
position: relative;
display: block;
padding: 19px 39px 18px 39px;
color: #FFF;
margin: 0 auto;
background: #1abc9c;
font-size: 18px;
text-align: center;
font-style: normal;
width: 100%;
border: 1px solid #16a085;
border-width: 1px 1px 3px;
margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
background: #109177;
}
</style>

</html>

input.gs

function doPost(e){
//データを記録するスプレッドシート
var sheet =SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/jkhfdsfp:");
//データ取得
var name = e.parameter.name;
var food = e.parameter.food;
var field1 = e.parameter.field1;
var field2 = e.parameter.field2;  
var date = new Date();
var field4 = e.parameter.field4;
//データ
var array = [field4,field1,field2];
sheet.appendRow(array);

return HtmlService.createHtmlOutputFromFile("index");}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.13%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る