WordPressにお問い合わせページを作る方法

どうも!たら(@hajimetara)です。

ホームページやブログで欠かせないのがお問い合わせフォーム

今回はプラグイン「Contact Form 7」を使って簡単にお問い合わせフォームを作成する方法です。

プラグイン「Contact Form 7」をインストールする方法

プラグイン→「新規追加」をクリック。

 

右上に検索ボックスがあるので「contact」と入力します。

 

Contact Form 7の「今すぐインストール」をクリック。

 

インストールが終わったら「有効化」をクリック。

画面が切り替わります。

 

Contact Form 7の「設定」をクリック。

 

コンタクトフォーム1の「編集」をクリック。

 

コンタクトフォームの編集画面にある

ショートコード

をコピーしておきます。id=””の数字は表示されている数字です。

 

コンタクトフォームの編集画面にあるタブも確認しておきましょう。

メール」タブは

お問い合わせがきたときに、自分のメールに送られてくるアドレスなどが書かれています。

 

メッセージ」タブは

お問い合わせしてくれた方が
お問い合わせフォームでメッセージを送信したときに表示されるメッセージです。

メッセージは好きな文に変更してもいいですね。

変更したら「保存」をクリック。

固定ページに「Contact Form 7」を貼り付ける方法

先ほどコピーしたショートコードを

固定ページに貼ります。

 

固定ページの「新規追加」をクリック。

Gutenbergエディターに貼り付けます。

タイトルを追加」にお問い合わせと入力して、「文章を入力、または/でブロックを選択」にコードを貼り付けます。

 

しばらくすると

タイトルの上にパーマリンクが表示されるので「編集」をクリック。

 

 

「contact」や「mail」に変更しましょう。

確認して「保存」をクリック。

 

右上の「下書き保存」をクリックして保存しておきましょう。

 

Contact Form 7」のシェアボタンと日付を非表示にする方法

コードを貼り付けた画面の右上にある「プレビュー」をクリックしてみると…

 

お問い合わせの下にシェアボタンと日付が表示されています。

できればないほうがスッキリしますよね。

固定ページの「固定ページ一覧」をクリック。

 

IDと書かれている場所に数字があるので(この場合は17)メモしておきます。

 

外観の「テーマエディター」をクリック。

初めてクリックしたときは「注意!」と出ますが「理解しました」をクリック。

 

コードが書かれている一番下に

/*******************************
* 固定ページの日付非表示
********************************/
.post-○○ .date-tags {
display: none;
}
/*******************************
* 固定ページのSNSシェアボタン非表示
********************************/
.post-○○ .sns-share {
display: none;
}

Copy

コピーして貼り付けます。

「○○」の部分は、お問い合わせフォームのIDなので先ほどメモした数字に書き換えてください。

「17」の場合は上のようになります。

ファイルを更新」をクリック。

 

もう一度

固定ページの「固定ページ一覧」をクリック。

 

お問い合わせページのプレビューを見てみると

シェアボタンと日付が消えました。

固定ページの「公開する」をクリック。

グローバルナビメニューに追加する場合はコチラの方法でできます。

 

タイトルとURLをコピーしました