WordPressのブロックテーマで問い合わせページを作成するためには以下のことを行います。
- 問い合わせプラグインをインストール
- 固定ページで問い合わせページを作成する
- 問い合わせフォームのブロックを設置する
- フォームの内容を編集する
問い合わせページはデフォルトのテンプレートを使用するか、問い合わせページ用にテンプレートを作成して作ります。
問い合わせフォームはWordpressの標準ブロックでは作れないのでプラグインをインストールする必要があります。
ここからは、Wordpressのブロックテーマで問い合わせページを作る方法を画面の画像付きで詳しく解説していきます。
ブロックテーマで問い合わせページを作る方法
問い合わせプラグインをインストール
問い合わせページには問い合わせフォームを設置する必要があります。問い合わせフォームは標準のブロックにはないのでプラグインをインストールする必要があります。
問い合わせフォームを設置できるプラグインはたくさんありますが、ここでは最もよく使われていて日本語対応の「ContactForm7」を使います。
まずはWordpressの管理画面メニューから「プラグイン->プラグインを追加」を選択してプラグイン追加ページを開きます。
このページで「Contact Form 7」と検索して出てきたプラグインをインストールします。
「今すぐインストール」を押したあと、「有効化」ボタンを押せばインストール完了です。
固定ページで問い合わせページを作成する
次に問い合わせページを作成します。すでに作成されている場合はこのステップを飛ばして次に進んでください。
WordPressの管理画面メニューから「固定ページ->固定ページを追加」を選択してページを作成します。
問い合わせフォームは後ほど追加するので、タイトルと必要に応じて説明文を追加しておきましょう。
ここではデフォルトの固定ページテンプレートを使っていますが、問い合わせページ用にレイアウトをカスタマイズすることも可能です。固定ページ用テンプレートの詳しい作成方法については以下の記事をご覧ください。
問い合わせフォームのブロックを設置する
次は問い合わせフォームをページ内に設置します。
左上にある「+」アイコンのついたボタンを押すと、ブロック一覧が表示されるので、その中にある「Contact Form 7」を探してクリックします。
設置すると「コンタクトフォームを選択」というボックスが表示されるので、とりあえず「コンタクトフォーム1」を選択しておきます。
この状態で右上のボタンから固定ページを保存(公開)して、ページを確認してみます。
上の画像のように、入力したページタイトルと説明文、フォームが表示されればOKです。
フォームの内容を編集する
この状態だと、問い合わせタイトルと内容しかありませんが、編集画面で追加や変更することができます。例えば、お問合せ種別の選択肢を追加したり、ファイルのアップロードや電話番号、住所の追加もできます。
また、スタイルも非常にシンプルなのでCSSコードを追加することでもう少しいい感じの見た目に変更することができます。
フォームの内容を編集するには、固定ページの編集画面に戻って、右側のパネルにある「このコンタクトフォームを編集」から行うことができます。
編集画面では、各種フォームのタグが項目名と一緒に<label>というHTMLタグに囲まれています。
ここに電話番号を追加したい場合、テキストエリアの上にある「電話番号」のボタンを押します。設定項目が表示されますが、とりあえずそのままにして「タグを挿入」ボタンを押します。
するとテキストエリアにフォームのタグがコピーされるのでこれを他の項目と同じようにlabelと項目名で囲みます。
他に追加したい項目があれば同様に追加していきます。最後に右上にある「保存」ボタンを押して内容を保存し、問い合わせページを更新して正しく設置されていれば編集完了です。
ContactForm7のフォームのスタイルを変更するには？
フォームのスタイルを変更するには、テーマフォルダのstyle.cssファイルなどにCSSコードを記述する必要があります。
CSSファイルは、ローカル環境で作成したものをサーバーにアップするか、「ツール->テーマファイルエディター」からstyle.cssを選んで編集することができます。
Googleフォームで問い合わせページを作れる？
問い合わせプラグインを使わず、Googleフォームをページ内に埋め込んで問い合わせページを作成することもできます。
やり方は以下の通りです。
- Googleフォームを作成し、HTMLコードをコピー
- 問い合わせページにカスタムHTMLブロックを設置
- コピーしたHTMLを貼り付けて保存
コードはGoogleフォームの編集ページから「HTMLを埋め込む」をクリックして表示されたコードをコピーして使用します。
コードを貼り付けて表示すると、縦にスクロールバーが出ることがあります。これを消したい場合は、貼り付けたコードの`height`の値を増やして調整してください。
