初心者でなんとか形にしようと
アレコレやっているのですが、上手くできません。
画像のお問い合わせフォームの
上下の間隔が詰まりすぎているので
上下をもっと開けたいです。
なにとぞ、ご教授お願いします。
お名前(ニックネームOK)
「 」
↕ ※この隙間をもっと開けたいのです…。
会社名・団体名
「 」
・ワードプレスを使用しています。
テーマは「Cocoon」です。
・お問い合わせフォームは「Contact Form 7」です。
Contact Form 7のフォームはこんな感じです。
<span class="haveto">必須</span><label> お名前(ニックネームOK)
[text* your-name placeholder "例)申込 太郎"]</label>
<span class="any">任意</span><label> 会社・団体名
[text text-company placeholder "例)〇〇株式会社"] </label>
<span class="any">任意</span><label> 電話番号
[tel tel-413 placeholder "例)〇〇-〇〇-〇〇"] </label>
<span class="haveto">必須</span><label> メールアドレス
[email* your-email placeholder "例)○○○@xxxx.com"]</label>
<span class="haveto">必須</span><label> メールアドレス(確認用)
[email* your-email_confirm placeholder "メールアドレスを再度ご記入ください"]
<span class="any">任意</span><label> 件名
[text your-subject placeholder "例)経営相談について"] </label>
<span class="haveto">必須</span><label> メッセージ内容
[textarea* your-message placeholder "お問い合わせ内容をご記入ください。"] </label>
[submit id:formbtn "送信"]
CSSはこんな感じです。
.wpcf7 input[name="your-name"] { /* 名前入力欄 /
width: 80%;
}
.wpcf7 input[name="text-company"] { / 会社・団体名入力欄 /
width: 80%;
}
.wpcf7 input[name="tel-413"] { / 電話番号入力欄 /
width: 80%;
}
.wpcf7 input[name="your-email"] { / メール入力欄 /
width: 80%;
}
.wpcf7 input[name="your-email_confirm"] { / メール確認欄 /
width: 80%;
}
.wpcf7 input[name="your-subject"] { / タイトル入力欄 /
width: 80%;
}
.wpcf7 textarea[name="your-message"] { / 本文入力欄 /
width:80%;
}
.wpcf7 input[type="submit"] { / 送信ボックス */
width:20%;
}
.wpcf7 input[type="submit"] {
color: #fff;
background:#000000;
border-radius: 100vh;
}
/必須の調整/
.haveto{
font-size:15px;
padding:5px;
background:#7dd5c5;
color:#000000;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
/任意の調整/
.any{
font-size:15px;
padding:5px;
background:#000000;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
0 コメント