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

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

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

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

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

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

👇 メンターやってます 👇

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

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

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

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

この記事の目次

フォーム実装の選択肢

フォームの見た目にこだわる場合、実装方法は、下記の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 がアップデートするたびに動作確認をすることはありません。他のプラグインへの乗り換えをご検討ください。

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

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

• Newtが開発したヘッドレスフォーム「Form App」のご紹介

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

formrunは弊社のお問い合わせページでも使っています。見た目はHTML・CSSで自由に作れます。

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

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

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

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

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

弊社も特別な理由がない限り自作しません。

特にformrunは、簡単な顧客管理もできるので、気に入っています。最低でも3,880/月かかるので、ここがネックな場合は、NewtのForm App(30通までは無料)を使うのが良いでしょう。

駆け出しの方は、下記の2つの方法でフォームを作れるようになっておくと良いです。

• WordPressのプラグインでフォームを作れるようになる
• Newtを使ってフォームを作れるようになる

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

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

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

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

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

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

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

• コード型フォームのサンプルコード集

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

フォームを自作する場合

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

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

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

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

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

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

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