お問い合わせフォームをサイドバーに設置するまでの手順 ⚪️

お問い合わせフォームをサイドバーに設置するまでの手順についての覚書です。

customform17

まず、「投稿」→「新規追加」の「カスタムフォームを追加」のところで、お問い合わせフォームのHTMLタグを生成します。

customform01

作成画面はこんな感じです。

customform02

各欄の上下はドラッグ&ドラッグで簡単に移動できます。

customform03

各欄の名称を変更するときには、「edit」をクリックし、

customform04

右側に表示される「Label」のところを適宜、修正します。

customform05

欄を増やすときには、下の方にある「Add a new field」をクリック。

customform06

すると、新しい欄が生成されます。

customform07

とりあえず、性別のチェック欄を追加してみました。

customform08

ひととおり、編集作業を終了したら、「Add this form to my post」をクリック。

customform09

編集画面にお問い合わせフォームのHTMLタグが挿入されます。

customform10

これをコピーして、

customform11

「外観」→「ウィジェット」をクリック。

customform12

テキストウィジェットをウィジェットエリアに追加して、

customform13

先ほどコピーしたお問い合わせフォームのHTMLタグを貼り付けます。

customform14

「保存」をクリック。

customform15

以上の作業でサイドバーにお問い合わせフォームが表示されます。しかし、一部のテーマにおいては、下図のようにお問い合わせフォームの右側が隠れてしまいます。

customform16

そこで、お問い合わせフォームのHTMLタグの前後に以下の記述を追加します。幅をパーセンテージで縮小するという命令です。数値は適当に調整します。

WS000888

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

customform17

投稿者: comemo

WordPress.com での記事の作成方法など

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。