30DAYSトライアルのまとめ【DAY22】

DAY22の課題は「問い合わせフォームを実装しよう」になります。

DAY22課題

Twiiterでもつぶやいた通り、家族旅行のため30DAYSトライアル、ブログ更新共にお休みしていました。

今日から再開！！と意気込んでましたが、それもほとんどできずにやっとブログを書き始めました。

30DAYSトライアルのDAY22からはDAY21の課題である「モデルを決めて、実在するお店のLPを作ってみよう①」をやりながら、＋αを学習していく感じになっています。

先日作成したポートフォリオにも問い合わせフォームは設置しているだけで実際は動作するものはではなかったですし、Webサイトには問い合わせフォームは必須なので、しっかりと身につけておきたいですね。

課題として2つの実装方法が紹介されています。

Googleフォームを使用しての実装
formrunを使用しての実装
まとめ

Googleフォームを使用しての実装

まずはGoogleドライブのサービスの一つとして提供されている「Googleフォーム」を使用して実装する方法。

Googleフォームは簡単にお問い合わせやアンケートフォームを作成できる無料のサービスです。作成したフォームはWebサイトなどに簡単に貼り付けることができ、回答結果をGoogleスプレッドシートと連携させて、管理・分析もできるという優れものです。

Googleフォームの使用方法を徹底解説で詳しく解説されています。

今回DAY22の課題で紹介されている方法は作成したGoogleフォームをWebサイトに貼り付けるという方法ではなく、自分が思い思いに設置したお問い合わせフォームをGoogleフォームと連携させるというもので、Google Formsを自由なデザインで自サイトに組み込む方法を参考に実装します。

具体的な方法はGoogle Formsを自由なデザインで自サイトに組み込む方法通りにやれば問題ありません。

ポイントとしては

form要素のaction属性に作成したGoogleフォームのaction属性のURLを指定する
フォームの各項目のname属性に作成したGoogleフォームのname属性の値を指定する

というところですね。

作成したGoogleフォームのaction属性のURLやname属性の値はGoogleフォームのプレビューで表示させてソースを確認すればOKです。

formrunを使用しての実装

次に、問い合わせフォーム作成サービスの【formrun】を使用して実装する方法です。

【formrun】はGoogleフォームと同じようにお問い合わせフォームなどを作成できるサービスで、お問い合わせフォーム以外にもカタログ請求などといったフォームのテンプレートが100種類以上用意されています。

さらにには回答に対しての応答も自動化できたり、回答に対しての進捗管理などもできるという優れものです。

詳しくはformrun（フォームラン）とは？｜おすすめの顧客管理までできる問い合わせサービスで紹介されています。

問い合わせフォームの作り方は

フォームクリエイターで簡単作成
HTML・CSSをオリジナルで作成

の2種類が用意されていますが、DAY22ではHTML・CSSを学習してきているので「HTML・CSSをオリジナルで作成」を推奨されています。

「HTML・CSSをオリジナルで作成」は自分でHTML・CSSで実装したお問い合わせフォームと【formrun】を連携させる方法になるので、一つ目のGoogleフォームと連携させる方法と似ていますね。

一方「フォームクリエイターで簡単作成」は用意されたテンプレートをもとにフォームを作成して、自分のWebサイトに埋め込む感じですかね(使ってないので想像ですが)。HTMLの知識は不要って書いてあるので、初心者向けってとこだと思います。

今回は「HTML・CSSをオリジナルで作成」で作成ですが、表示されるサンプルコードに合わせて自作フォームのコードを

formタグのclass属性、action属性、method属性をサンプルコードのものにする
フォームの各要素のname属性に【formrun】で使用する項目名に変更する
formタグ内の送信ボタンのtype属性にsubmitを追加する

というように修正すればOKで、あとは【formrun】のJavaScriptをheadタグにコピペ、お問い合わせフォームを使用するWebサイトのURL、送信完了後のリダイレクトのURLを設定すれば完了です。(送信完了後のリダイレクトのURLは自分で準備しなくても【formrun】のデフォルトもものが使用可能))

簡単ですね。

と言ってる自分はformタグにHTMLテンプレートで使用してたname属性をそのまま残してたことで、問い合わせは送信されるけど、送信完了後のURLにリダイレクトしないという状況に陥ってハマってしまいましたけどね・・・。

その時はサンプルコードに少しずつ自作していたフォームのコードを足していくことで、なんとか解決できました。

コードを見てもどうしても分からない時は時間はかかりますが、一つずつ違いを検証していくしかないですからね。

慌てたり、焦ったりすると違いが見えなくなるので、そういう時こを落ち着いて。別作業をしてみると意外と簡単に解決できたりしますよ。