ウェブサイト上でフォームは、ユーザーとサイト運営者のコミュニケーションの橋渡しとなる重要な要素です。問い合わせ、資料請求、会員登録など、フォームを通じてユーザーからの情報を効率的に収集し、迅速な対応やサービス向上に繋げることができます。そのため、使いやすさ、わかりやすさ、カスタマイズ性が求められます。

a-blog cms では、「お問い合わせフォーム」を、HTMLテンプレートを使用して柔軟にデザインに組み込む方法と、記事毎に管理画面からフォーム項目を追加できる簡易な設定方法が提供されています。本記事では、a-blog cms のフォーム機能と、HTMLテンプレートを利用したフォームの特徴について詳しく解説します。

---

プログラムを書くことなくHTMLのみで実装可能

a-blog cms のフォーム機能では、ユーザー向けの「お問い合わせフォーム」と、サイト運営者向けの「管理画面のカスタムフィールドのフォーム」を、共通のHTMLテンプレートを用いて実装できます。どちらのフォームもプログラムを記述する必要がなく、HTMLだけで対応可能です。また、「カスタムフィールドメーカー」を活用すれば、簡単にフォームの雛形を作成できます。

---

このように、HTML テンプレートを活用して運営者側とユーザー側の両方で利用できるフォームを実装できる点は、サイト全体の管理のしやすさや拡張性において大きなメリットです。また、既存のテンプレートを使い回すことで、作業の効率化やメンテナンスの手間軽減にもつながります。

---

複数ステップのフォーム作成

---

たとえば、ユーザーの基本情報を取得するページ、詳細情報の入力ページ、確認ページ、そして送信ページといったように、フォームをいくつかのステップに分割することができます。これにより、ユーザーは一度に大量の情報を入力する必要がなくなり、ページ遷移を通して段階的に入力を行えるため、入力の負担が軽減されます。また、各ステップごとに入力内容をチェックする機能を組み込むことで、入力ミスの防止にも役立ちます。

複数ステップのフォームは、例えば会員登録やサービスの申し込み、予約システムなど、特定の用途に合わせた情報収集に適しており、a-blog cms を利用することで柔軟なフォーム構築が可能になります。

---

入力チェックとデータ変換機能

ユーザーの入力内容を適切に管理するために、a-blog cms では多様な入力チェック機能とデータ変換機能が提供されています。これらの機能により、フォームの使いやすさと正確なデータ収集が実現します。

入力チェック

a-blog cms のフォームでは、HTML のカスタマイズを通じて様々な入力チェックを設定することが可能です。具体的には、以下のようなチェック機能が用意されています。

• 必須入力チェック：重要な情報の入力漏れを防ぎます。
• 文字数チェック：入力できる文字数を制限し、誤入力や入力内容の過不足を防ぎます。
• 数値の上限・下限チェック：年齢や数量などの入力に適切な範囲を設定できます。
• 正規表現チェック：電話番号や郵便番号など、特定の形式に沿った入力を求める場合に使用します。
• メールアドレス・URLチェック：入力が正しい形式かどうかを自動で確認します。
• ファイルサイズチェック：添付ファイルが大きすぎないように制限します。

データ変換

ユーザーが入力したデータを目的に合わせて変換することも可能です。例えば、全角で入力された英数字を半角に変換する、ひらがなをカタカナに変換する、といった操作が HTML のカスタマイズによって実現できます。このようなデータ変換により、フォーム入力時の負担を軽減し、データの統一性が保たれるため、運営者にとってもデータの管理がしやすくなります。

入力チェックやデータ変換機能を適切に活用することで、フォームの使い勝手を向上させ、ミスを減らすことができるため、ユーザーにとっても快適な利用体験が提供されます。

データの CSV出力と Webhook機能

フォームから送信されたデータは、サーバー上のデータベースに保存され、必要に応じてCSV形式でエクスポートできます。この機能は、顧客情報や問い合わせ履歴を整理・分析する際に非常に便利です。期間指定でのダウンロードも可能なため、特定の期間のデータを抽出し、データ分析や報告書作成にも役立ちます。

さらに、a-blog cms には Webhook 機能も搭載されており、外部サービスとリアルタイムでデータ連携が可能です。たとえば、フォームから送信された情報を自動で CRM（顧客関係管理）ツールや Google スプレッドシートに送信することで、チーム間で情報を即座に共有でき、迅速な対応が可能となります。

---

この機能は、以下のような場面で特に有用です。

顧客管理の効率化

問い合わせ内容を自動的に CRM に登録し、カスタマーサポートがすぐに対応できる体制を構築できます。

プロジェクト管理ツールとの連携

フォームを通じて受け付けた要望やフィードバックをプロジェクト管理ツールに自動反映し、進行中のプロジェクトやタスク管理に活用できます。

メールマーケティング

問い合わせフォームを通じて収集した情報を自動でメールマーケティングツールに送信し、顧客リストを更新することで、ターゲットに合わせたメールキャンペーンを実施できます。

Webhook 機能を活用することで、a-blog cms を単なる CMS としてだけでなく、他のビジネスツールと連携した総合的な顧客管理やデータ管理システムとして活用できるため、サイト運営の効率を大幅に向上させることが可能です。

まとめ

a-blog cms のフォーム機能は、シンプルな操作性と高度なカスタマイズ性を兼ね備えており、HTML テンプレートを利用することで、デザイン性や機能性を持たせた独自のフォームを構築できます。複数ステップのフォームや入力チェック機能、データ変換機能により、ユーザーにとって入力がしやすく、運営者にとってもデータの管理や分析がしやすいフォームが実現します。

また、データの CSV 出力機能や Webhook によるリアルタイム連携により、a-blog cms はサイト運営だけでなく、顧客管理やデータ連携の分野においても強力なツールとなります。これにより、ユーザーの満足度が向上し、業務効率も大幅に改善されるため、ビジネスの成功に向けた強力なサポートが得られるでしょう。a-blog cms のフォーム機能を最大限に活用し、より充実したサイト運営と効果的な顧客対応を実現してみてください。

---

概要

モデルハウスナビ様は、見学可能なモデルハウス情報を多数掲載する不動産ポータルサイトです。MAPや価格帯、キーワードで絞り込み検索ができる他、現在地の位置情報から近いモデルハウスに並び替える機能を実装しました。また、360°の3D内覧を可能とするMatterport（マターポート）によって、モデルハウスのイメージを隅々まで体感できます。

全国規模のモデルハウスポータルサイトを目指して

サイト公開時は「モデルハウスナビ 北海道版」のみで運用をスタートしましたが、徐々に全国各地のモデルハウス情報を掲載できるようにする必要があったため、エリア単位で子ブログ化しました。各エリアの子ブログで共通のテーマを利用することで、拡張性のある設計になっています。

---

---

3Dスキャン立体画像で360°の3D内覧を可能に

室内を360°見渡せる3D映像の「Matterport」の埋め込みに対応しました。モデルハウスの情報が隅々まで更新しやすい設計となっています。見学する前の検討段階で、モデルハウスの内覧の疑似体験が可能になっています。

---

---

今いる場所から近い順に並びかえる機能

新しい家を決める検討要素として「立地」はとても重要です。「住み慣れた街に住みたい＝現在の住まいから近い場所に住みたい」というニーズに答えるため、今いる場所から近い順に並びかえるソート機能を実装しました。a-blog cms の位置情報を使って記事を絞り込む「Entry_GeoList」で、今いる場所の近くで開催されているモデルハウスをワンクリックで知ることができます。

モデルハウスと建築会社を紐付ける関連エントリー

当然ですが、モデルハウスには建てた建築会社が存在します。1社が複数のモデルハウス情報をサイトに掲載する場合、毎回建築会社の情報を入力するのは、非常に手間がかかります。 そこで、建築会社情報のデータのみを扱う子ブログを構築し、モデルハウスの「関連エントリーとして建築会社を選択する」という運用にしました。

---

---

これにより、例えば建築会社が移転して住所が変わったり、電話番号が変わったりしても、建築会社の子ブログのデータを修正することで、モデルハウス情報側の建築会社情報も自動で更新される仕組みにできました。

モデルハウス見学の意思決定に役立つ「コラム」

コンテンツマーケティングの一環で、自然検索からの流入を意識した「コラム」を a-blog cms で実装。注文住宅に関する多種多様な記事を掲載しています。

---

---

約3,500棟の施工実績を誇る住宅メーカー「ジョンソンホームズ」が運営する、お庭づくりや外構を提案するブランド、さっぽろガーデンライフ。住宅会社にしかできない提案力を持っており、お客様の暮らしに合わせた提案はもちろん、住まいに合った外構づくりを目指しています。また一貫したサポート体制やアフターフォローを万全にし、お客様に寄り添ったお庭・外構づくりを進めていきます。

カテゴリーとタグを組み合わせた「お庭事例」

お庭づくりや外溝工事を希望されるお客様は、既に「どこを工事したいか」が決まっている場合がほとんどです。施工事例を絞り込む際も「自分の希望と同じ施工ポイントがあるかどうか」を参考にしたいはずです。そのため、検索機能としては「施工ポイント」から絞り込める機能を実装しました。「デザイン別で探す」はカテゴリー機能、「施工ポイントで探す」にはタグ機能を利用しています。タグはクライアント側で自由に増減が可能なので、事例のバリエーションが増えても問題がないような作りにしています。

---

---

お庭事例の写真はカスタムフィールドグループで登録することができ、公開画面ではスライド形式で画像を複数表示することができます。画像リサイズに関する校正オプションを使用し、写真は自動でトリミングされます。

---

運用を楽にするイベントフォーム

---

さっぽろガーデンライフは、お庭作りに興味がある人向けに、相談会やキャンペーンを定期的に開催しています。イベントの詳細画面には、イベントの参加受付が可能なように「フォーム」を設置できるようにしています。フォームはカスタムフィールドをつかって条件分岐し、ブラウザ上からクライアント様が表示／非表示を切り替えられるようになっています。 さらにこのフォームは、自由に会場を設定できるパターンと、決まった会場から選択できるパターンが管理画面から選べるようになっています。

---

---

また、イベントによっては、決まった日程で数日開催するものや長期的に開催するものがあります。 イベントに申し込みたいユーザーが適切に日程を選ぶことができるように、日程を指定することができます。イベントフォーム上でも、指定した日程のみを選ぶ仕組みです。

---

---

株式会社海外教育コンサルタンツ様が運営する「エディクム」は、 海外留学・ボーディングスクールの紹介・留学支援を行っています。

以前は別のCMSで構築されていましたが、コンテンツがまとまらなくなり、サイトの構造や導線が複雑であることから、情報整理と運用の負荷軽減のためにa-blog cmsが導入されることとなりました。

実際に利用してみたところ、運用・更新が非常に楽になったとの声をいただいています。

サイトの情報整理

既存サイトの散らばっていたコンテンツを全て読み込んだ上でページの分解と統合、ディレクトリの整理を行い、一目で内容を把握できるコンテンツマップをまず作りました。

それを元に、どのページを子ブログ・カテゴリーへ割り振れば更新がスムーズになるかを考えて、CMSの構造を決めています。

更新・運用の省力化

1つの修正に対し、複数箇所・複数ページの更新がないように注意しましたが、最も更新されるイベント情報の扱いに特に注力しています。

まず同じフォーマットでの記述・表示が維持できるよう、カスタムフィールドを使った入力を基本としてイベントページを作っています。

イベント開催日による分岐表示

またイベントの一覧は、開催前か終了後かを日付で判断し、2つのエントリーサマリーを使って表示させています。

---

---

イベント申し込みボタンのカスタマイズ

またイベントページには申し込みページへのリンクボタンを付けていますが、イベントが終了した場合・あるいは個別のページで申し込みを締め切った場合には、ボタンは表示させず、申し込みそのものができないようになっています。

イベントの開催状況のフォームへの反映

このイベントが申し込み可否の状況は、申し込みフォームにも反映させるようにし、終了したイベントや中止になったものについては、表示させないようにしています。この部分はフォームの中に、エントリーサマリーとIFブロックの組み合わせを埋め込んで実現させています。

---

---

留学体験談の掲載

留学体験談は1つにつき1エントリーとしており、「国」「年齢」「学校の種類」をタグを使って選別しています。例えば「ニュージーランド」「サマースクール」「小学生の留学」タグが選ばれている体験談であれば、それぞれのタグ名と同じ「国」「年齢」「学校の種類」のページに自動で掲載されるようになっています。

カスタムフィールドで実装させる方法もありましたが、カテゴリーの増加に柔軟に対応できるようタグを利用しています。

---

---

子ブログの活用

運用しやすいよう、イベント・ブログ・体験談・お知らせの4つの子ブログを作り、それぞれの更新が行いやすいよう、管理ボックスをカスタマイズしてボタンを増設しています。

---

---

---

前サイトからのブログ記事の移行

前サイトには700件以上のブログ記事がありましたが、前サイトのデータをCSV形式に変換したものを、a-blog cmsの標準機能で一括インポートしています。

a-blog cmsを導入して

リニューアル前のウェブサイトは、前任のウェブ制作会社が開発していた独自のCMSを使っていたため、情報の抽出や移設は難易度が高いと感じていましたが、問題なく行っていただけました。リニューアル後にコンバージョンという結果も出ていてお客様も満足しています。

以前のウェブサイトでは自由に装飾ができたため、文字の色やサイズなどが統一されていませんでした。編集ルールを設定すればよいのですが、お客様にはストレスになってしまいます。そこで今回のリニューアルのタイミングで文書作成時に使える機能を大幅に制限してもらいました。

お客様も迷いなくシステムが利用できますし、見た目がバラバラになることも防げています。その他、ウェブサイト運営時の手間を配慮して管理しやすい仕組みにカスタマイズしていただいており、このように柔軟に対応できるところがa-blog cmsの強みだと感じました。

---

a-blog cms の同梱テーマ「extend@beginner2018」をほぼそのまま使用したシンプルなサイトです。複雑なカスタマイズ、凝ったデザイン、大規模なサイトに向いている一方で、こういったオーソドックスな小規模サイトを短納期で仕上げることが可能なのも a-blog cms の魅力です。テーマには scss ファイルが含まれているため、余白や色やフォントをカスタマイズして雰囲気を変えることも簡単です。

手間がかかっていたイベント情報の伝達、参加申込の管理をスムーズに

もともとイベント情報（日時、場所、持ち物、備考など）の伝達はメーリングリストで行われていたため見落としが多いことがお悩みでした。また、外部からの参加申込の管理にも手間がかかっていました。

---

---

このお悩みを解決するため、イベントに必要な情報をカスタムフィールド に入力できるようにしました。JSで開催日と日付、終了日と掲載期限が同期するようになっています。イベント一覧で日付直近順でソートすることができ、イベントが終了する日には自動的にイベントが非公開になります。

---

---

イベント予約フォームの「設置する」がチェックされている場合には、イベント予約フォームが各イベントエントリーに設置されます。a-blog cms のエントリーにフォームを設置するやり方には「動的フォーム」と「フォームモジュール」の2種類がありますが、今回の場合はフォームの内容は一定であるため、「フォームモジュール」を使っています。

---

---

また、シークレットブログとして作成した内部用カレンダーではスタッフの方がカレンダー形式でイベントのスケジュールを確認できるようになっています。

---