cocoonのお問い合わせフォームを【Contact Form 7】で簡単設置

contactワードプレス
スポンサーリンク
銀ペン
銀ペン

お問い合わせフォームってまだ記事も書いてないのに?

sabo
sabo

前回「cocoonを設定をしよう!おすすめプラグイン導入」でプラグインは入れたよね!

今回はContact Form 7を使ってcocoonに簡単にお問い合わせフォームを設置する方法をご紹介します。
今後アドセンスなどの広告を設置するときに必ず必要になるものなので今のうちに入れておきましょう。

スポンサーリンク

cocoonのお問い合わせフォーム設置方法

前回の記事でわいひらさんオススメのプラグインをあなたのワードプレスに導入したと思います。

Contact Form 7をまだ導入していない方は下記を参考に導入後読み進めてくださいね!

Contact Form 7はショートコードを設置するだけで見た目も美しく、機能ももちろんしっかりしたお問い合わせフォームが設置できます。

Contact Form 7のショートコードをコピーする

まず、Contact Form 7のショートコードをコピーしに行きます。

ダッシュボードのサイドバーお問い合わせに入ります。

するとコンタクトフォーム1というフォームがすでにあると思います。
そのなかほどにショートコードがあります。
このショートコードをコピーします。

cocoonのお問い合わせフォームは固定ページで設置

このContact Form 7のショートコードは固定ページに設置します。

サイドバーから固定ページに入ります。

新規追加をクリック

タイトルに「お問い合わせ」等入れます。

その下に先ほどコピーしてきたContact Form 7のショートコードを貼ります。

右側にパーマリンクがあります。
そこに「お問い合わせ」と出ていると思いますが、「info」など英語に変えましょう。

下の方にスクロールするとseo設定が出てきます。
下記のように入れておきましょう(※もちろんあなたのサイトの名前にします)

右上の公開をクリックします。

これで、Contact Form 7の設置は完了です。

左上のワードプレスマークをクリックしてダッシュボードに戻っておきましょう。

cocoonのお問い合わせフォームへのリンクをサイドバーに表示しよう

Contact Form 7の設置は完了しましたが、このままではお問い合わせフォームにサイト内からアクセスできません。

サイトに表示するためにウィジェットを設定します。

外観→ウィジェットに入ります。

サイドバーを見つけます。
ここに固定ページのウィジェットを追加します。

左側から固定ページのウィジェットをドラッグ&ドロップで
サイドバーに追加します

サイトに移動して「お問い合わせ」へのリンクが出ていることを確認しましょう。
お問い合わせをクリックします。

お問い合わせフォームページ完成です。

銀ペン
銀ペン

ファ~
出来てる!!!

sabo
sabo

これも立派なカスタマイズだよ!
すごいね!お疲れ様!

コメント

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