PressBuilder ContactForm7を使った問い合わせページの作成方法

Pocket

pressbuilder-520-01

PressBuilderはドラッグ&ドロップの簡単な操作でサクッとWebサイトを作れるWordpress向けレスポンシブテンプレートです。

PressBuilderなら問い合わせページも簡単に作成することができます。ここではPressBuilderに搭載されているレイアウトテンプレートとContactForm7を使って問い合わせページを作成してみます。

PressBuilderとCF7で問い合わせページを作る

ContactForm7のインストールと固定ページの作成

ContactForm7はWordressの中でも特に人気の高い、シンプルなフォームを作成できるプラグインです。

このプラグインを使用するにはプラグインのインストールが必要なので、管理画面メニューのプラグイン->新規追加から「Contact Form 7」を検索してプラグインをインストールしておいてください。
PressBuilder PressBuilderとCF7で問い合わせページを作る-01

プラグインがインストールできたら、次は固定ページの作成です。

固定ページの新規追加を選び、タイトルに「お問い合わせ」と入力しておきます。固定ページのテンプレートはデフォルトのままで構いません。

ここではCF7のデフォルトで用意されているフォームを使用してお問い合わせページを作成していきます。
PressBuilder PressBuilderとCF7で問い合わせページを作る-07

レイアウトテンプレートでお問い合わせページを作成

固定ページが作成できたら、ページビルダーを使ってページを作成します。

ページの作成は自由に行えますが、ここではPressBuilderに用意されたレイアウトテンプレートを使ってお問い合わせページを作成してみます。

ページビルダー上部にある「Layouts」ボタンからレイアウト選択画面を表示します。
PressBuilder PressBuilderとCF7で問い合わせページを作る-02

レイアウト画面にあるレイアウトテンプレートの中から「お問い合わせ」ページを選択し、「Insert」ボタンを押してレイアウトを挿入します。
PressBuilder PressBuilderとCF7で問い合わせページを作る-03

レイアウトテンプレートではすでにPageBuilderウィジェットのコンタクトフォームが設置されていますが、ここをContactForm7に変更すればOK。

「Add Widget」ボタンからウィジェット選択画面を開き、「SiteOrigin Editor」をクリックして配置します。

もともとあったコンタクトフォームはこの時点で削除しておきます。
PressBuilder PressBuilderとCF7で問い合わせページを作る-04

「SiteOrigin Editor」上でEditを押して設定画面を開き、入力エリアにContactForm7のショートコードをコピーします。
PressBuilder PressBuilderとCF7で問い合わせページを作る-05

設定が完了したら固定ページを保存し、ページを表示して確認してみましょう。ContactForm7のフォームが設置されています。
PressBuilder PressBuilderとCF7で問い合わせページを作る-06

あとはレイアウト内に設置しているウィジェットのテキストを変更したり、不要なウィジェットを削除することで、お問い合わせページの作成が完了です。

PressBuilder好評発売中!

コーディング不要でサクッとWebサイト制作が可能なPressBuilderはTetraThemesで好評発売中。

商用利用可能・複数サイト利用可能。1度の購入で開発環境も含めて複数サイトの利用ができるため、ものすごくお得!もちろん、更新費用や月額利用料などはありませんので安心して使用することができます。

購入はこちら