WordPressプラグイン「Contact Form 7」をご使用ください。Contact Form 7の詳細はこちらからどうぞ
Contact Form 7のフォーム挿入方法
Contact Form 7でフォームを作成してください。
「赤枠」内のコードをコピーしてください。
フォームの作成方法については割愛させていただきます。
フォームを挿入したいページをwelukaビルダー編集モードで表示してください。
「ドラッグウィジェット」の「段落」をドロップエリアに追加してください。
追加した段落ウィジェットをマウスで選択し、ウィジェットナビゲーションの「編集」をクリックしてください。ヴィジュアルエディタが表示されます。
エディタ内に先程コピーした「Contact fomr 7」のコードを貼り付けてください。
「保存」ボタンをクリックしてください。
フォームが追加されます。
表示されるフォーム内容は「Contact Form 7」で作成した内容により変わりますのでご注意ください。
フォーム内入力項目がフル幅にならない場合の対応方法
Contact Form 7の初期設定では入力（input）部分を下の図左のように<label></label>で囲んでいますが、このままショートコードを貼り付けてしまうと下の図右のように、コンタクトフォームが左に寄った形で表示されてしまいます。
※labelで囲んだ場合、cssの設定でwidthをautoに設定している為。（inputに設定しているwidth優先）
次にあげる方法（１ or ２）のどちらかで、下の図のように
コンテンツ幅内に対しフル幅でフォーム部品（text、textarea等）を表示することができます。
方法① <label>で囲まないように変更
例として下図のように</label>の位置を書き換えて保存します。
方法② cssを変更
例として下の図のように管理ページ「welukaテーマ設定」内の「Custom Css」に下記のcssを追加し、保存してください。
.wpcf7 label {
width:100%;
}
.wpcf7 label input[type="text"],
.wpcf7 label input[type="email"],
.wpcf7 label input[type="url"],
.wpcf7 label input[type="password"],
.wpcf7 label input[type="search"],
.wpcf7 label input[type="tel"],
.wpcf7 label input[type="datetime"],
.wpcf7 label input[type="date"],
.wpcf7 label input[type="month"],
.wpcf7 label input[type="week"],
.wpcf7 label input[type="time"],
.wpcf7 label input[type="datetime-local"],
.wpcf7 label input[type="number"],
.wpcf7 label textarea, label select {
width:100%
}
