SWELLで求人募集を作成時のContact Form 7のレイアウト調整【追加CSSとContact Form 7記入内容】
Contents
Contact Form ７を設置したときのレイアウトを直す
Contact Form ７を使用すると、ワードプレスのテーマの仕様とおそらくバッティングかもで、チェックボックスとラジオボタンが縦並びになるのを回避。
今回は、「求人募集＋前回作成のお問い合わせフォーム」の両方のレイアウト調整。
※ワードプレスのテーマのレイアウトの問題か、
これがかかると落ちる→「width: 90%;」ので</div>でかからないようにした。
、追記→「display:inline-block;」
お問い合わせフォーム（Contact Form ７記入内容）
<div class="contactarea">
<label class="contactarealabel"> 【氏名】 ※必須</label>
[text* your-name]
<label class="contactarealabel"> 【メールアドレス】 ※必須</label>
[email* your-email]
<label class="contactarealabel">【電話番号】 </label>
[tel tel-882]
</div>
<label class="contactarealabel">【お問い合わせ内容】 </label>
[checkbox checkbox-391 use_label_element "ご相談" "お見積り" "その他"]
<br>
<div class="contactarea">
<label class="contactarealabel"> 【メッセージ本文】 (任意) </label>
[textarea your-message]
</div>
<p class="under">※ メールと電話番号の確認をお願いします。</p>
[submit "送信"]求人募集（Contact Form ７記入内容）
[checkbox checkbox-230 use_label_element "内装工事一式" "電気設備工事" "給排水衛生設備工事" "木製建具工事" "左官工事" "クロス床仕上げ工事" "塗装工事" "軽鉄ボード工事" "タイル工事" "空調換気設備工事" "大工工事" "制作金物工事" "石工事" "住設工事" "鉄骨工事" "組積･ALC工事" "防水工事" "看板･サイン工事" "板金工事" "鋼製建具工事" "家具制作" "IT･ネットワーク工事" "AV設備工事" "設計デザイナー"]
<br>
<div class="contactarea">
<label class="contactarealabel"> 会社名(必須)</label>
[text* your-name]
<label class="contactarealabel">会社所在地</label>
[text text-479]
<label class="contactarealabel"> お名前／ご担当者名</label>
[text text-663]
<label class="contactarealabel"> 電話番号(必須)</label>
[tel* tel-450]
<label class="contactarealabel"> メールアドレス(必須)</label>
[email* your-email]
</div>
<label class="contactarealabel">お客様への連絡方法</label>
[radio radio-523 use_label_element default:1 "メール連絡を希望" "電話連絡を希望"]
<br>
<div class="contactarea">
<label class="contactarealabel"> 施工可能地域</label>
[text* your-subject]
<label class="contactarealabel"> 主な仕事や実績 (必須)
セールスポイントやその他質問など</label>
[textarea your-message]
</div>
<p class="under">※ メールと電話番号の確認をお願いします。</p>
[submit "送信"]追加CSSに加えた内容
.contactarea input{
width: 90%;
margin: 1% 5%;
}
.wpcf7{
margin: 0% 0%;
padding: 0% 5%;
}
input.wpcf7-form-control.has-spinner.wpcf7-submit{
margin: 3% 22%;
padding: 2% 25% ;
background-color: #06394D;
color: white;
font-size: 100%;
}
.under{
margin: 5% 20%;
text-align: center;
border-bottom: solid 3px orange;
}
textarea {
width: 90%;
margin:1% 5%;
}
.contactarealabel{
margin: 3% 0 0 0;
display:inline-block;
}下記のレイアウトになる
お問合せフォーム
求人案内
