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でお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク