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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1065閲覧

お問い合わせフォーム をjavascriptとgasで作成したい。自動返信機能付き&スプレッドシートに自動リスト追加

SyoheiOtomo

総合スコア0

Google フォーム

Google フォームは、 Google社が提供しているアンケートフォーム作成および集計ができる無料のツール。Googleアカウントがあれば利用が可能です。集計データは、スプレッドシートに収集され、データ分析もできます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/12/24 10:05

前提・実現したいこと

お問い合わせフォームを、javascriptとgoogle apps script を使用して作成したい。

サイトから申し込みがあったらその情報がスプレットシートに自動的に追加されて そのメールアドレスにサンキューメールの自動返信をしたいです。

発生している問題・エラーメッセージ

サイトのコードはビザスクで知り合った方に書いていただいたのですが、gas側で記載するコードをどのようにすればいいのか分かりません。本やインターネットで勉強はしたのですが上手くできませんでした。

該当のソースコード

こちらが作っていただいたコードです。 これに対応する形で、gasのコードを書いていきたいです。 ヒントだけでも教えていただけますと嬉しいです。 HTML CSS Javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#007BBB"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { } label { display: block; margin: 16px; } span { display: block; font-size: 13px; font-weight: bold; } input, textarea, button { border: none; appearance: none; padding: .5em .6em; display: inline-block; border: 1px solid #ccc; border-radius: 4px; vertical-align: middle; width: 100%; } input:focus, textarea:focus, button:focus { outline: 0; border-color: #129FEA; } #mask { position: absolute; z-index: 10; top: 0px; right: 0px; bottom: 0px; left: 0px; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, .7); color: #fff; font-weight: bold; display: none; opacity: 0; transition: opacity .2s linear; } </style> </head> <body> <label> <span>お名前</span> <input type="text" placeholder="山田 太郎" id="form-name" /> </label> <label> <span>メールアドレス</span> <input type="text" placeholder="xxx@example.com" id="form-mail" /> </label> <label> <span>問い合わせ内容</span> <textarea id="form-text"></textarea> </label> <div style="margin: 16px;"> <button onclick="submit()">送信する</button> </div> <div id="mask"> <div>送信しました</div> </div> <script> function submit() { const name = document.querySelector('#form-name') const mail = document.querySelector('#form-mail') const text = document.querySelector('#form-text') if (!name.value) name.style.borderColor = '#f00' if (!mail.value) mail.style.borderColor = '#f00' if (!text.value) text.style.borderColor = '#f00' if (!name.value || !mail.value || !text.value) { return } fetch('ここにURL', { method: 'POST', mode: 'no-cors', cache: 'no-cache', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: name.value, mail: mail.value, text: text.value, }) }).then(() => { const mask = document.querySelector('#mask') mask.style.display = 'flex' setTimeout(() => { mask.style.opacity = '1' }, 0) }) } </script> </body> </html>

試したこと

javascriptの本などを読んだ。
https://tonari-it.com/profile/
この方のかいたサイトで色々勉強した。

補足情報(FW/ツールのバージョンなど)

macbook pro 16in

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

papinianus

2020/12/28 07:50

この HTML を得るまでにかかった費用は?
SyoheiOtomo

2020/12/28 16:52

2000円です。 知り合いに手伝っていただいた金額です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問