【web】PHPなしでフォームを作成する方法

2024年5月14日 23:16

こんばんは、つちだにんじんです。
今回は、「PHPなんてそんなもの知らん！でもお問合せフォーム作りたい！」という方でも簡単にフォームの作成ができる方法をお伝えします。

この方法は、
・HTML・CSSでフォームのマークアップと装飾ができる
・Googleフォームを作成できる
という人なら問題ありません！
ちなみに私も「PHPなんて知らん民」です。

追記：nameプロパティのところ間違えて記載していましたので、修正しました。（2024/05/30）

1.フォームのマークアップ

まずはHTMLでフォームの形を作成します。

<form action="" method="post" >
<!---ここにフォームの内容を入れます。-->
</form>

まずは<form></form>タグで「フォームを作るよ」と宣言します。

「action属性」ではデータの送信先を指定します。
上記では空白にしていますが、""の中に後程GoogleフォームのURLを指定します。

「method属性」では主に「post」か「get」を指定します。
postはgetだとURLが引き渡され、postだと引き渡されません。
一般的にはpostが使われています。

それではformの中身をマークアップしていきます。

<dl>
<dt><label for="name">お名前<span class="required">※</span></label></dt>
<dd><input type="text" required="required" name="" placeholder="山田　太郎" id="name"></dd>
<dt><label for="mail">メールアドレス<span class="required">※</span></label></dt>
<dd><input type="email" required="required" name="" placeholder="sample@mail.com" id="mail"></dd>
<dt><label for="tel">電話番号</label></dt>
<dd><input type="tel" name="" placeholder="090-1234-5678" id="tel"></dd>
<dt><label for="coment">お問合せ内容<span class="required">※</span></label></dt>
<dd><textarea id="coment" name="" wrap="soft"></textarea></dd>
<input type="submit" name="" id="submit" value="送信する">
</dl>

今回は簡単に「名前」「メアド」「電話番号」「問い合わせ内容」の４つをマークアップしました。
内容はそれぞれ必要な内容で作ってください。

今回はdl要素（リスト要素）を使用していますが、そこはご自由に！
ついでに
・<lavel>要素でdtとddが一括りの要素だと認識できるように記述
・required="required"は「入力必須事項」とするために記述
・placeholder=""は「山田太郎」や「sample@co.jp」などサンプル文を表示させるために記述
しています。
必要なければ記述なしでOKです！

CSSで少し体裁を整えます。

.required{
  color: #FF6600 ;
}
dt{
  margin: 1vw 0 0.5vw 2vw;
}
dd{
  margin-top: 3px;
}
dd input{
  height: 1.5em;
  width: 20vw;
}
textarea{
  width: 20vw;
  height: 10vw;
} #submit {
  background: black;
  border-radius: 100vh;
  color: white;
  padding: 0.5vw 3vw;
  border: none;
  margin: 2vw 0 0 7vw;
  
} #submit :hover{
  background: #FF6600 ;
}

CSSは適当にこんな感じで笑
自由に装飾してください。

相対値で装飾したせいでCodepenだと幅とかが変ですが、実際はこんな感じになっています。↑

2.Googleフォームを作成する

さて、そうしたら先ほどマークアップしたフォームの内容に合わせてGoogleフォームを作成しちゃってください！

完成したら、右上にあるであろう目のマークからプレビュー画面を表示し、検証ツール（command＋option＋i)を開きます。

そしたらその中から「フォームのリンク」と「各nameプロパティ」を探していきます！

フォームのリンクを探す

form action="https://~~~のところを探します。
command＋Fで検索ツール呼び出して探すと早く見つかります。

form action="https://docs.google.com/forms/~~省略~~/formResponse"

このhttps://~~~~~formResponseのURLがフォームのリンク先になります。
覚えておいてください。

各nameプロパティを探す

今度は「名前」「メールアドレス」「電話番号」「問い合わせ内容」の各項目の名前を探していきます。
先ほどと同じように、検索ツールで「entry」で探せばすぐ見つかります。

上の画像であれば、「entry.⚫︎⚫︎⚫︎」というのが私の作成したGoogleフォームの「名前」のnameプロパティになります。

この調子で、各項目のnameプロパティを探し出してください！！！！
ファイトです！！！気合いです！！！

nameの並び順ははGoogleフォームで作成した並びと同じです。
なので私のを例に挙げるなら、
・「名前」→entry.1678874938
・「メールアドレス」→entry.1809048491
・「電話番号」→entry.1839454360
・「お問い合わせ内容」→entry.406612677
となります。

作成したGoogleフォームによってURLやname名は違いますので、ちゃんとご自分のもので調べてくださいね！！

マークアップしたフォームにGoogleフォームを反映させていく

お疲れ様です！！！最後の工程です！！！！
最後は、HTMLでマークアップしたフォームに、先ほど探したGoogleフォームのURLとnameプロパティを入れ込んでいきます。

<form action="https://docs.google.com/forms~~省略~~/formResponse" method="post" >
<!---ここにフォームの内容を入れます。-->
</form>

まずは、formタグのaction属性に先ほど探したGoogleフォームのURLを挿入します。

<dl>
<dt><label for="name">お名前<span class="required">※</span></label></dt>
<dd><input type="text" required="required" name="entry.406612677" placeholder="山田　太郎" id="name"></dd>
<!---省略-->
<input type="submit" name="" id="submit" value="送信する">
</dl>

次に、各項目のname=""に先ほど探したnameプロパティを挿入していきます。
送信ボタンは空でも大丈夫です。

これでフォームの完成です！！！
見た目的にもGoogleフォームを使っているだなんてバレません！！！

Googleフォームの設定で、回答があったらメールが送られてくるように設定しておけば、お問合せがあったことをすぐに把握することができます。

便利な世の中ですねえ

↑ちなみに私のHPにあるお問合せページも、この方法で作成しています。

私のHPです。
webやグラフィックデザイン、イラスト制作などのお仕事がありましたら、ぜひこちらからお気軽にお問合せください！

この記事が気に入ったらサポートをしてみませんか？