【wordpress】デザインカンプからContactfoam７を使ってデザイン性の高いお申込みフォームを作る方法

2024年2月4日 02:38

デザインカンプに併せてまずはHTML/CSSでマークアップを行い、その後PHP化とwordpress化を行う際に、Contactfoam7を使って申し込みフォームを作る流れを備忘録としてまとめておきます。もしよろしければ参考にしてください。

1．デザインカンプの準備

まずは、お申込みフォームのデザインカンプを準備します。このカンプは、フォームの外観や配置、必要な入力フィールドを定義するためのものです。Photoshopやフィグマといったデザインツールで作っていきます。

デザインカンプに基づいて、HTMLとCSSを使用してフォームのマークアップを作成します。このステップでは、静的なHTMLファイルでフォームの外観を作ります。まだ、フォームは動作しません。今回は以下のページをwordpressのページとして作成していきたいと思います。

1.WordPressのテーマディレクトリ内に新しいPHPファイルを作成し、カスタムページテンプレートとして設定します。例えば、page-download.php という名前でファイルを作ります。テンプレートファイルを作る時は、page-〇〇〇.phpの〇〇〇の部分は自由に決められる。

2.ファイルの先頭に以下のようなPHPコメントを追加して、WordPressにこれがカスタムページテンプレートであることを認識させます。

↓ページテンプレートと認識させるためのコード

<?php
/*
Template Name: 資料ダウンロード
*/
get_header(); // ヘッダーを読み込む
?>

<!-- ここにカスタムHTMLを挿入 -->

<?php
get_footer(); // フッターを読み込む
?>

※Template Name: 資料ダウンロード　という部分が後ほど、テンプレート名として表示されます。コピペすると以下の様なイメージになる。

④上記コードを使って、ページのヘッダーからフッターの間のデザインカンプからマークアップしたボディコンテンツのコピペを行う。この時はまだcontactfoamのショートコード等は無い状態でOK。

WordPressにContact Form 7プラグインをインストールして有効化します。
プラグインを使用して、お問い合わせフォームを作成します。管理画面から「お問い合わせ」>「新規追加」に進み、必要なフィールドを持つフォームを作成します。
フォームを作る時、インプット欄はcontactfoam7が出力するショートタグを使う必要があるが、それ以外のlabelタグはオリジナルのhtml/cssで作成したものを使うことが出来る。実際に実装すると、コンタクトフォーム7が勝手に〈p〉タグや、〈span〉タグや、〈br〉などを自動で生成するため、初めは中々上手く行かないが、Googleの検証モードで検証しながら進めていく。
フォームを作成したら、生成されるショートコードをコピーします。

赤枠のショートコードをコピーする。

ステップ3で作成したカスタムページテンプレート内の適切な位置に、Contact Form 7から取得したショートコードを埋め込みます。ショートコードは以下のようにPHPの do_shortcode 関数を使用して埋め込むことができます。

<?php echo do_shortcode('[contact-form-7 id="123" title="Contact form 1"]'); ?>

<?php echo do_shortcode('[contact-form-7 id="123" title="Contact form 1"]'); ?>の「123」はあなたのフォームIDに置き換えてください。

WordPressの管理画面から「ページ」>「新規追加」に進み、「資料ダウンロード」というタイトルのページを作成します。パーマリンクは『page-download』と作ったとしたら、page-を抜いて、downloadとします。
ページ属性の「テンプレート」ドロップダウンメニューから、作成したカスタムテンプレート（この例では「資料ダウンロード」）を選択します。
ページを公開します。

これで、デザインカンプに基づいたお問い合わせフォームがWordPressサイト上で動作するようになります。必要に応じて、CSSを調整してフォームのスタイルを微調整することが出来ます。

以上です、いきなり思った通りに行くことは難しいかもしれないですが、頑張ってくださいね。それではまた！！！

この記事が気に入ったらサポートをしてみませんか？