エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

DAY22.『問い合わせフォームを実装しよう』 #30DAYSトライアル

DAY22.『問い合わせフォームを実装しよう』 #30DAYSトライアルです。 

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY22.『問い合わせフォームを実装しよう』

DAY22.『問い合わせフォームを実装しよう』ということで、ちょっと毛色を変えてフォーム(お問い合わせフォーム)作成です。

 

 

詳しくは懐かしのprogateのPHPで勉強するのもありかも

prog-8.com

 

今回やることはざっくりいうと2つです。

  1. お問い合わせフォームをHTMLの書き方に沿って作る
  2. お問い合わせ内容を送る先はWEBサービスが用意した場所にする(Google Forms / form run)

で、この1つ目の「お問い合わせフォームの作り方」が難しいと思うので、説明してみます。

 

フォームを作るためにHTMLのformタグを使う

お問い合わせフォームは、HTMLの<form>タグで作ることが出来ます。

 

WEBページの中にお問い合わせフォームを作ることで、何が出来るのかというと、

「問い合わせたい内容」を「どこか指定の場所」に送ることが出来ますよね。

そして、その指定の場所で、内容を色々と処理します。

※今回の場合だと、問い合わせ内容を受け取って、保管する処理です

 

つまり

  1. データを渡したい場所を決める
  2. 問い合わせたい内容を受け取って渡す
  3. 送りたい場所の中で、処理をする

という3つのやることがありますね。

このうち、formタグで出来るのは1つ目と2つ目です。

 

formタグの属性は「action」と「method」

formタグの属性で使うのは主に2つです。

「action属性」と「method属性」です。

 

先程のやりたいことは、この2つの属性を指定することで実現ができます

  1. データを渡したい場所を決める → action属性
  2. 問い合わせたい内容を受け取って渡す(その時の渡し方) → method属性

action属性で指定できるのは、データを渡す先(のURL)です。

 

一方で、method属性で指定できるのは、データの「渡し方」です。

「渡し方」は、主に2種類あります。

「get」と「post」というのですが、getよりもpostの方がたくさんの情報を送れるというイメージです。

※お問い合わせでは、名前・アドレス・本文と色々な情報を送るので、基本的に「post」を使いますね

 

formタグとinputタグで問い合わせフォームを作る

ということで、formタグではaction属性でデータを渡す場所を指定し、method属性でデータの渡し方を決めます。

 

あと2つやることがあります。

データを受け取る場所づくり(入力箇所)と、データを送る処理のトリガーづくり(送信箇所)です。

それぞれ、inputタグを使うことで実現できます。

 

ってことで全部で4つの処理を書けば、問い合わせフォームは作れます

  1. formタグのaction属性 → データを渡す場所を指定する

  2. formタグのmethod属性 → データの渡し方を決める

  3. inputタグのtypeを"text"にする → データを受け取る場所づくり(入力箇所)

  4. inputタグのtypeを"submit"にする → データを送る処理のトリガーづくり(送信箇所) 

って感じの4つの要素を組み合わせれば「データを受け取って、ある特定の渡し方で、ある場所に渡す」ことができます。

 

これで、以下の処理の上2つを実現できます。

  1. データを渡したい場所を決める
  2. 問い合わせたい内容を受け取って渡す
  3. 送りたい場所の中で、処理をする

 

で、3つ目の「送りたい場所の中で、処理をする」という所の「送り先」として、

  • 「Google Forms」
  • 「form run」

のどちらかを使う感じです。

 

実装自体は参考URLを真似すれば出来るはずです。

※form runの方が「わからない人向け」にかかれているのでやりやすいと思います。

 

 

…ということで、

  1. お問い合わせフォームをHTMLの書き方に沿って作る
  2. お問い合わせ内容を送る先はWEBサービスが用意した場所にする(Google Forms / form run)

の2つのことをやりましょう、というお話でした。

 

以上、DAY22.『問い合わせフォームを実装しよう』 でした。 

 

【余談】

ちなみに今回のような話は、WEBの基礎知識が無いと、分からないはずです。

もしも学びたいなら「プロになるためのWeb技術入門」という本が超オススメです。

3時間くらいで読めて、WEBの歴史や、基本が分かります。

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

 

 

【前回記事はこちらからどうぞ】