質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4611閲覧

コンタクトフォーム7で上下の間隔があけれません。教えてください。

ASA

総合スコア7

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/12/15 07:03

初心者でなんとか形にしようと
アレコレやっているのですが、上手くできません。

画像のお問い合わせフォームの
上下の間隔が詰まりすぎているので
上下をもっと開けたいです。

なにとぞ、ご教授お願いします。

お名前(ニックネーム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;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

下記でどうでしょう。

css

1.wpcf7 .wpcf7-form p { 2 margin-bottom: 3em; 3}

3em の部分をお好みで調整してください。

投稿2022/12/15 13:02

hatena19

総合スコア34353

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ASA

2022/12/16 00:53

できましたー!すごいすごい! ありがとうございました! 的確なご指示いただけて、とっても助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問