コーダーはフォームの機能をどう実装すれば良い？

フォームの見た目にこだわりがない場合、Googleフォームを埋め込んだり、別タブでGoogleフォームに飛ばしたりすれば、簡単にフォームは作れます。

ただ、Web制作では、フォームのデザインにもこだわりたいことが多いです。自作する場合、フォームの機能面も含めて実装する必要があります。

ここで問題になるのが、フォームの機能面を自作するには、バックエンドの知識がないとできない点です。

• Googleフォームの埋め込みなどではなく、見た目にこだわりたい
• でも自分だけでは自作できない

こんな場合の対処法について紹介します。

コーダーのためのフォーム作成に関する、知っておくおくべき知識・スキルを学べる、超マニアックなUdemyの講座を作りました。フォームのコーディングに自身がない方は、下記のリンクから購入してみてください。

この記事は、フォームの機能について解説しています。フォームの見た目については、下記の記事で解説しています。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

基礎学習後に迷子になっていませんか？脱初心者したいなら、私たちにお任せください！

特にこんな方におすすめ！

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

まずは、下記リンクから個別ガイダンスへお越しください。

👆 メンターやってます 👆

この記事の目次

フォーム実装の選択肢

フォームの見た目にこだわる場合、実装方法は、下記の3パターンがあります。

• 見た目だけ作ってエンジニアにパスする
• WordPressのプラグインで作る
• ヘッドレスフォームを利用して作る

それぞれの方法について解説します。

見た目だけ作ってエンジニアにパスする

特別な仕様がある場合、後述する他の2つの方法では実装不可能なこともあります。その場合、自作することになります。(逆に言うと、特別な仕様がない限り、後述する他の2つの方法で良いです)

特別な仕様とは、例えば、下記のような日時選択ができるフォームなどです。

この画像は、日程調整ツールbookrunからの引用です。

見た目を細かくカスタマイズしなくて良いのであれば、bookrunなどのサービスを使ってしまうのが良いでしょう。

そうではない場合は、コーダーは見た目だけ作って、エンジニアにパスすることになります。

WordPressのプラグインで作る

WordPressでサイトを作っている&簡易的なフォームであれば、プラグインを使ってしまうのが1番楽です。見た目も自由に作れます。

よく使われるプラグインが、Contact Form 7とMW WP Formです。

ただし、MW WP Formは既に開発終了していて、公式サイトにも下記のように書いてあります。今は、Contact Form 7を使うのが良いでしょう。

MW WP Formの開発は脆弱性対応を除き停止しています。新しい機能が追加されたり、WordPress がアップデートするたびに動作確認をすることはありません。他のプラグインへの乗り換えをご検討ください。

ヘッドレスフォームを利用して作る

ヘッドレスフォームを使えば、バックエンドの開発なしで、簡単にフォームを作ることができます。

代表的なヘッドレスフォームには、下記があります。

SSGformは、弊社のコーポレートサイトやHello Mentorのサイトでも使っています。見た目はHTML・CSSで自由に作れます。

実は、Googleフォームをヘッドレスフォームのように使い、オリジナルデザインのフォームを作る方法もあります。

• 参考：Google FormをHTML/CSSでデザインしたフォームで運用する方法

この方法は、正規のやり方ではないので、Googleフォームの仕様変更で、いきなり使えなくなるリスクもあります。規約的にもこの方法で作って良いのか、怪しいところです。自分のサイト以外で使うことはおすすめしません。

弊社で作ったUdemy教材では、SSGformを使った実装方法も解説しています。

オーソドックスなフォームで自作はコスパが悪い

オーソドックスなフォームの場合、自作するよりもWordPressのプラグインやヘッドレスフォームを利用する方が、断然コスパが良いです。

弊社もクライアントワーク / 自社サービス問わず、特別な理由がない限り自作はしません。

駆け出しの方は、WordPressのプラグインとヘッドレスフォームを使ってフォームを作れるようになっておくと良いです。

バリデーションは誰が書く？

バリデーションとは、ユーザーが入力したデータが正しい形式であるか、必須項目が全て埋まっているかなどをチェックする機能です。

フロントエンドのバリデーションは、JavaScriptで書きます。

WordPressのプラグインやヘッドレスフォームの場合

WordPressのプラグインやヘッドレスフォームの場合は、バリデーションを簡単に追加できる機能が提供されていることが多いです。

Contact Form 7は、必須など簡単なバリデーションであれば、管理画面上から設定できます。それ以外のバリデーションンは、functions.phpに書く必要がありますが、有名なプラグインなのでググれば大体解決します。

formrunでは、下記のページ内に解説があるように、タグに属性をつけるだけで実装できます。(参考)

ex)
<input type="text" name="お名前" data-formrun-required>

SSGformの場合、バリデーションはJavaScriptで自作する必要があります。

フォームを自作する場合

フォームを自作する場合は、バリデーションも自分で書く必要があります。

• コーダーが書くのか
• エンジニアが書くのか

これは現場によってまちまちだと思いますが、弊社の場合は、コーダーはエラー文が入る場所だけ作って、あとはエンジニアが対応しています。

ex)
<input type="text" name="お名前">
<p class="error-text">ここにエラーが入る</p>

上記のように、エラーが入る場所に仮のテキストを入れて、見た目だけ作ってパスします。

ちなみに、バリデーションはフロント側とサーバーサイド側で実装します。コーダーが対応するとしてもフロント側のみです。

この辺りの知識に関しても、Udemy教材で解説しています。

基礎学習後...迷子になっていませんか？