送信完了画面
フォーム ／ パターン集トップ
3段の最後の画面。受け付けた事実を h1 で明言し、次に起きることと戻り先を示す
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<main class="form-done page">
<!-- 段の並びは確認画面と同じ。aria-current だけが「完了」へ移る -->
<ol class="form-confirm__steps" aria-label="進行">
<li>入力</li><li>確認</li><li aria-current="step">完了</li>
</ol>
<h1>お問い合わせを受け付けました</h1>
<p class="form-done__number">受付番号 <strong>A-0824-117</strong></p>
<p class="form-done__lead">確認メールを送りました。届いていないときは、迷惑メールの振り分け先も確かめてください。</p>
<section class="form-done__next" aria-labelledby="fd-next-title">
<h2 id="fd-next-title">このあとの流れ</h2>
<ol>
<li>担当者が内容を確認し、2営業日以内にメールで返信します。</li>
<li>打ち合わせが必要な内容は、日程の候補をあわせて案内します。</li>
</ol>
</section>
<a class="form-done__back" href="/">トップページへ戻る</a>
</main>/* 進行の段。「確認ステップ付きフォーム」と同じ名前を使う。
4画面を通しで組むなら、この規則は片方に1つあればよい */
.form-confirm__steps {
display: flex;
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
/* いま出している画面の項目にだけ aria-current を付け、見た目もその属性で切り替える */
.form-confirm__steps [aria-current="step"] {
color: var(--color-accent-text);
font-weight: 700;
}
.form-done .form-confirm__steps {
margin-block-end: var(--space-5);
}
/* 版面はこの1箇所だけが持つ。見出しも本文も箱も幅を持たず、同じ右端で折り返す */
.form-done {
max-inline-size: 40rem;
padding-block: var(--space-8);
}
.form-done h1 {
margin: 0 0 var(--space-3);
font-size: var(--text-2xl);
line-height: var(--leading-heading);
}
.form-done__number {
margin: 0 0 var(--space-5);
font-size: var(--text-lg);
}
.form-done__number strong {
font-variant-numeric: tabular-nums;
}
.form-done__lead {
margin: 0 0 var(--space-6);
line-height: var(--leading-body);
}
.form-done__next {
border: 1px solid var(--color-border);
background: var(--color-surface);
padding: var(--space-5);
margin-block-end: var(--space-6);
}
.form-done__next h2 {
margin: 0 0 var(--space-3);
font-size: var(--text-lg);
}
.form-done__next ol {
margin: 0;
padding-inline-start: 1.4em;
}
.form-done__next li + li {
margin-block-start: var(--space-2);
}
.form-done__back {
display: inline-flex;
align-items: center;
min-block-size: 2.75rem; /* 文字の行は 24px。指で押せる高さに広げる */
color: var(--color-accent-text);
text-underline-offset: .2em;
}確認する#
- 入力・確認・完了の段が出ていて、aria-current="step" が「完了」に付いている
- 受け付けた事実・次に起きること・戻り先の3点が載っている
- 送信後はリダイレクトでこの画面に移す（再読み込みで二重送信されない）
- 返信までの目安を書く（無反応の間に不安で再送信される）