コーダーばフォームの機能をどう実装すれば良い？
フォームの見た目にこだわりがない場合、Googleフォームを埋め込んだり、別タブでGoogleフォームに飛ばしたりすれば、簡単にフォームは作れます。
ただ、Web制作では、フォームのデザインにもこだわりたいことが多いです。自作する場合、フォームの機能面も含めて実装する必要があります。
ここで問題になるのが、フォームの機能面を自作するには、バックエンドの知識がないとできない点です。
Googleフォームの埋め込みなどではなく、見た目にこだわりたい
でも自分だけでは自作できない
こんな場合の対処法について、この記事では紹介します。
【宣伝】
現役エンジニア・デザイナーがメンターになって、学習支援する『メンタリングサービス』を運営しています。
👉 Web制作のメンターならHello Mentor(ハローメンター)
✅ フォーム実装の選択肢
フォームの見た目にこだわる場合、実装方法は、下記の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 がアップデートするたびに動作確認をすることはありません。他のプラグインへの乗り換えをご検討ください。
【注意】間違ってもフォームを作るためにWordPressを導入するなんてことはないように！
あくまで、WordPressで作るサイトなら、フォームはプラグインを使うのが楽ということです。
✔️ ヘッドレスフォームを利用して作る
ヘッドレスフォームを使えば、バックエンドの開発なしで、簡単にフォームを作ることができます。詳しくは、下記の記事が参考になります。
代表的なヘッドレスフォームには、下記があります。
formrunは弊社のお問い合わせページでも使っています。見た目はHTML・CSSで自由に作れます。
✅ オーソドックスなフォームであれば自作はコスパ悪い
オーソドックスなフォームの場合、自作するよりもWordPressのプラグインやヘッドレスフォームを利用する方が、断然コスパ良いです。
弊社も特別な理由がない限り自作しません。
特にformrunは、対応ステータスの管理などもできるので、気に入っています。最低でも3,880/月かかるので、ここがネックな場合は、Newt(30通までは無料)を使うのが良いでしょう。
駆け出しの方は、下記の2つをやっておけば良いと思います。
WordPressのプラグインでフォームを作れるようになる
Newtを使ってフォームを作れるようになる
✅ バリデーションは誰が書く？
バリデーションとは、ユーザーが入力したデータが正しい形式であるか、必須項目が全て埋まっているかなどをチェックする機能です。
フロントエンドのバリデーションは、JavaScriptで書きます。
✔️ WordPressのプラグインやヘッドレスフォームの場合
WordPressのプラグインやヘッドレスフォームの場合は、バリデーションを簡単に追加できる機能が提供されていることが多いです。
Contact Form 7は、必須など簡単なバリデーションであれば、管理画面上から設定できます。それ以外のバリデーションンは、functions.phpに書く必要がありますが、有名なプラグインなのでググれば大体解決します。
formrunでは、下記のページ内に解説があるように、タグに属性をつけるだけで実装できます。
ex)
<input type="text" name="お名前" data-formrun-required>✔️ フォームを自作する場合
フォームを自作する場合は、バリデーションも自分で書く必要があります。
コーダーが書くのか
フロントエンドorバックエンドエンジニアが書くのか
これは現場によってまちまちだと思いますが、弊社の場合は、コーダーはエラー文が入る場所だけ作って、あとはフロントエンドorバックエンドエンジニアが対応しています。
ex)
<input type="text" name="お名前">
<p class="error-text">ここにエラーが入る</p>上記のように、エラーが入る場所に仮のテキストを入れて、見た目だけ作ってパスするイメージです。
ちなみに、バリデーションはフロント側とサーバーサイド側で実装します。コーダーが対応するとしてもフロント側のみです。
✅ Googleフォームを使ってオリジナルデザインのフォームを作るのはあり？
実は、Googleフォームを使って、オリジナルデザインのフォームを作る方法もあります。
この方法は、正規のやり方ではないので、Googleフォームの仕様が変わって、いきなり使えなくなるリスクもあります。
従って、自分のサイト以外で使うことはおすすめしません。
✅ Hello Mentorでは実務経験豊富なメンターが学習サポートします！
Hello Mentorでは、経験豊富な弊社のエンジニアやデザイナーがメンターになり、学習支援や転職・独立支援をしています。
興味がある方は、まずはお気軽にオンライン個別説明会へご参加ください！
👉 Web制作のメンターならHello Mentor(ハローメンター)
※ 少数で運営しているため、人数制限を設けています。お早めにお申し込みください。
✔️ Hello Mentorの特徴
Web制作・開発会社が運営
メンターは全員現役エンジニア・デザイナー
1対1で学習サポート
オーダーメイドでサポート
✔️ お客様の実績
副業・フリーランスデビュー
異業種からWeb制作会社へ転職成功
定期的に弊社の仕事をご依頼
✔️ お客様の声
複数のプログラミングサービスを利用しましたが「力がついた」と言えるのはHello Mentor様だけでした。
仕事を獲得していくために必要なアプローチなどもアドバイス頂き、独学時には感じられなかった速度で成長していることを感じています！
質問した内容以外の関連情報や最新のテクニックも教えてもらえるため、独学と比べると、効率的に学習を進められています。
コードレビューで改善点やコードを書く際の考え方を知れたのが良かったです。