問い合わせCTAの面
LPの節 ／ パターン集トップ
問い合わせへ誘導する面。電話とフォームの2択と受付時間
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<section class="contact-cta" id="contact" aria-labelledby="contact-cta-title">
<div class="contact-cta__inner page">
<h2 id="contact-cta-title">どの豆にするか、迷ったら</h2>
<p class="contact-cta__lead"><span>好みをうかがって、2〜3種類に絞ってお答えします。</span><span>贈りものの相談もどうぞ。</span></p>
<div class="contact-cta__actions">
<a class="button button--primary" href="/contact/">フォームで相談</a>
<a class="button button--secondary" href="tel:0000000000">電話 000-0000-0000</a>
</div>
<p class="contact-cta__hours">受付 8:00〜18:00（水曜・第2木曜を除く）</p>
</div>
</section>.contact-cta {
background: var(--color-surface);
border-block: 1px solid var(--color-border);
}
.contact-cta__inner {
padding-block: var(--space-8);
display: grid;
justify-items: center;
text-align: center;
gap: var(--space-3);
}
.contact-cta__inner h2 {
margin: 0;
font-size: var(--text-xl);
}
.contact-cta__lead {
margin: 0;
color: var(--color-text-muted);
}
/* 中央揃えの面では、幅で切らずに文の切れ目で折る。
版面が狭まると、この2文の境目で改行される */
.contact-cta__lead span {
display: inline-block;
}
.contact-cta__actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
margin-block-start: var(--space-3);
}
.contact-cta__hours {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* .button の基底と派生は「出発点のCSS」にある */
.contact-cta .button--secondary {
font-variant-numeric: tabular-nums;
}確認する#
- 面そのものに id="contact" があり、途中の節の「申し込む」がここへ着く
- 主ボタンはフォームか電話のどちらか1つにしている
- 塗りのボタン（--primary）はページでこの面だけにしている
- tel: と表示の番号は公開前に実番号へ差し替える
- 受付時間がボタンのそばにあり、押した後に気づかせない