LPデザインに自然に溶け込む資料請求フォームを設置する方法（Contact Form 7対応）

この記事では、ランディングページ（LP）に直接資料請求フォームを埋め込む方法を紹介します。
Contact Form 7を利用して、見た目の整ったレイアウトを実装します。
投稿ページ専用で動作し、「お知らせ」や「固定ページ」「アーカイブ」には影響しません。

1 実装のポイント

• LP内で左右2カラム構成にし、左に紹介文・右にフォームを配置。
• Contact Form 7のタグを使用しつつ、デザインをCSSで調整。
• メール(1)：管理者宛、申込通知。
• メール(2)：お客様宛、自動返信。

2 Contact Form 7 フォーム：（HTML構造内容）

<div class="lp-form-wrapper">

  <div class="lp-form-left">
    <h2>はじめやすく、<br>ずっと使える</h2>
    <p class="lp-subtext">介護・看護・障害福祉ソフト</p>
    <ul class="lp-features">
      <li><span>初期費用0円</span></li>
      <li><span>安心サポート</span></li>
      <li><span>導入数5万件以上</span></li>
    </ul>
    <p class="lp-note">※20××年1月時点</p>
  </div>

  <div class="lp-form-right">
    <h3>詳しい資料を取り寄せる</h3>

    <label>氏名<span class="required">必須</span><br>
      [text* your-name placeholder "多摩 太郎"]
    </label>

    <label>電話番号<span class="required">必須</span><br>
      [tel* your-tel placeholder "09012345678"]
    </label>

    <label>いつ開業しましたか？<span class="required">必須</span><br>
      [select* your-start-year include_blank "1年未満" "1～3年" "3～5年" "5年以上"]
    </label>

    <div class="submit-area">
      [submit "無料で資料を受け取る →"]
    </div>
  </div>

</div>

3 Contact Form 7：メール(1)（管理者宛）本文テンプレート

以下のフォームから資料請求がありました。

━━━━━━━━━━━━━━━━━━
■ お問い合わせ内容
━━━━━━━━━━━━━━━━━━

【氏名】
[your-name]

【電話番号】
[your-tel]

【開業年数】
[your-start-year]

--------------------------------------------------
ログインユーザー名: [_current_user_name]
IPアドレス: [_remote_ip]
ブラウザ情報: [_user_agent]
送信元ページ: [_url]
投稿日時: [_date] [_time]
--------------------------------------------------

4 Contact Form 7：メール(2)（お客様宛）本文テンプレート

[your-name] 様

このたびは、資料請求をいただき誠にありがとうございます。
以下の内容で受け付けいたしました。

━━━━━━━━━━━━━━━━━━
■ ご入力内容
━━━━━━━━━━━━━━━━━━

【氏名】
[your-name]

【電話番号】
[your-tel]

【開業年数】
[your-start-year]

━━━━━━━━━━━━━━━━━━
担当者より、折り返しご連絡を差し上げます。
今しばらくお待ちくださいませ。

──────────────────
介護・看護・障害福祉ソフト サポート窓口
メール：support@example.com
電話：03-XXXX-XXXX
受付時間：平日 9:00～18:00
──────────────────

※このメールは自動送信です。
※本メールに心当たりのない方は、お手数ですが破棄をお願いいたします。

5 汎用CSS

/*-----------------------------------
 資料請求フォーム
-----------------------------------*/

/* Contact Form 7 全体を中央寄せ＆幅制限 */
.lp-form-wrapper { /* フォーム全体の外枠 */
	max-width: 1200x; /* ← 横幅制限 LPだと1080px～1200px　自由に変えてください */
	margin: 0 auto; /* ← 中央寄せ */
	display: flex; /* 横並びレイアウト */
	flex-wrap: wrap; /* 画面幅が狭い時に折り返し */
	background: #fffbea; /* 明るいクリーム色背景 */
	padding: 30px; /* 内側余白 */
	border-radius: 10px; /* 角丸 */
	justify-content: space-between; /* 左右を均等配置 */
	gap: 30px; /* カラム間の間隔 */
	box-sizing: border-box; /* ← はみ出し防止 */
	width: 100%; /* ← 画面幅にフィット */
} 

/* 左右カラム共通 */
.lp-form-left,
.lp-form-right {
	box-sizing: border-box; /* ← 重要：padding計算含める */
}

/* 左側 */
.lp-form-left {
	flex: 1; /* 親要素内で余白を均等に分配し、右カラムと同じ比率で横幅を伸縮させる */
	min-width: 260px; /* 最小幅を260pxに固定して、狭い画面でも崩れないようにする */
}

/* 左側：特徴リスト */
.lp-features { /* 特徴リスト全体 */
	display: block; /* 縦方向に並べる */
	margin-bottom: 10px; /* 下の余白 */
	padding: 0; /* 内側余白なし */
	list-style: none; /* 「・」マークを削除 */
} 

.lp-features li { /* 各特徴の行 */
	margin-bottom: 8px; /* 行間を広げる */
} 

.lp-features li span { /* 各特徴の装飾ボックス */
	display: inline-block; /* インラインボックスとして表示 */
	background: #fff; /* 白背景 */
	border: 2px solid #ff6f00; /* オレンジの枠線 */
	color: #ff6f00; /* 文字色をオレンジ */
	font-weight: bold; /* 太字 */
	border-radius: 6px; /* 角丸 */
	padding: 6px 12px; /* 内側余白（上下・左右） */
	font-size: 0.9rem; /* 少し小さめの文字 */
} 

/* 右側エリア（フォーム本体） */
.lp-form-right { /* フォーム部分の枠 */
	flex: 1; /* 幅を均等に分配 */
	min-width: 300px; /* 最小幅を確保 */
	background: #fff; /* 背景を白に */
	border-radius: 10px; /* 角丸 */
	padding: 25px; /* 内側余白 */
	box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* うっすら影を付ける */
} 

.lp-form-right h3 { /* 見出しタイトル */
	font-size: 1.2rem; /* 文字サイズ */
	font-weight: 700; /* 太字 */
	margin-bottom: 20px; /* 下余白 */
} 

.lp-form-right label { /* 各ラベル */
	display: block; /* ブロック表示 */
	margin-bottom: 15px; /* 下余白 */
	font-weight: 600; /* 少し太字 */
	color: #333; /* 濃いグレー文字 */
} 

.lp-form-right input,
.lp-form-right select { /* 入力欄とセレクトボックス */
	width: 100%; /* 幅を100%に */
	padding: 10px; /* 内側余白 */
	border: 1px solid #ddd; /* 薄い枠線 */
	border-radius: 6px; /* 角丸 */
	font-size: 1rem; /* 標準文字サイズ */
}

/* 必須マーク */
.required { /* 「必須」ラベル */
	color: #f00; /* 赤文字 */
	font-size: 0.9rem; /* 小さめ文字 */
	margin-left: 4px; /* 左に少し余白 */
} 

/* 送信ボタン */
.submit-area { /* ボタンの外枠 */
	text-align: center; /* 中央寄せ */
	margin-top: 20px; /* 上余白 */
}

.lp-form-right input[type="submit"] { /* 送信ボタン */
	background: #ff6f00; /* オレンジ背景 */
	color: #fff; /* 白文字 */
	border: none; /* 枠線なし */
	border-radius: 6px; /* 角丸 */
	padding: 12px 25px; /* 内側余白（上下・左右） */
	font-size: 1.1rem; /* 少し大きめの文字 */
	font-weight: bold; /* 太字 */
	cursor: pointer; /* カーソルをポインタに */
	transition: background 0.3s ease; /* 背景色のフェード効果 */
} 

.lp-form-right input[type="submit"]:hover { /* ホバー時 */
	background: #e65a00; /* 少し濃いオレンジに */
} 

/* スマホ対応 */
@media (max-width: 768px) { /* 768px以下の画面 */
	.lp-form-wrapper { /* 全体を縦並びに */
		flex-direction: column; /* カラムを縦方向に変更 */
		padding: 20px; /* 内側余白を調整 */
	}

	.lp-form-left,
	.lp-form-right {
		width: 100%; /* ← 100%幅で確実に収まる */
		min-width: auto; /* ← 不要な最小幅を解除 */
		max-width: 100%; /* ← 右カラムの上限も解除 */
	}

	.lp-form-right {
		padding: 20px;
		box-shadow: none; /* スマホでは影を軽くする */
	}
}

6 完成イメージ

7 まとめ

このフォーム構成を利用すれば、LPデザインに自然に溶け込む資料請求セクションを簡単に設置できます。
フォームの背景色・ボタン色を変更すれば、他業種LPにも応用可能です。