WordPress個別サポート

Contact Form 7で作成する問い合わせフォームをサイドバーに表示する方法を紹介します。

Contact Form 7の問い合わせフォームをサイドバーに設置

Contact Form 7の問い合わせフォームをサイドバーに設置

基本的には、ショートコードをウィジェットにコピーペーストするだけです。

スポンサーリンク

問い合わせフォームをサイドバーに設置する

「お問い合わせ」‐「コンタクトフォーム」メニューから問い合わせフォームのショートコードをコピーします。

問い合わせフォームのショートコードをコピー

問い合わせフォームのショートコードをコピー

「外観」-「ウィジェット」メニューでテキストウィジェットを任意のサイドバーに設置します。

テキストウィジェットを任意のサイドバーに設置

テキストウィジェットを任意のサイドバーに設置

「お問い合わせ」‐「コンタクトフォーム」メニューでコピーしたショートコードをペースト(1)して「保存」ボタンをクリックします。タイトル(2)の入力は任意です。

Contact Form 7のショートコードをペースト

Contact Form 7のショートコードをペースト

これで、サイドバーに問い合わせフォームが表示されます。

フォームの右端が切れてしまう

フォームの右端が切れてしまう

デザインの微調整

ただし、テーマによってはデザイン調整が必要です。上記の例でも右端が切れているので、はみ出したフォームをサイドバーに収める必要があるでしょう。

対策はいくつかありますが、たとえば、次のようなCSSを使えば、フォーム要素をサイドバーに収めることができます。

/* フォーム要素をサイドバー内に収める */
#sideTower input[type="text"],
#sideTower input[type="email"],
#sideTower input[type="number"],
#sideTower input[type="tel"],
#sideTower textarea {
    width: 95%;
}
BizVektorで使うCSSの例です。

フォーム要素の右端まで表示されるようになります。

フォーム要素の右端まで表示される

フォーム要素の右端まで表示される

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート