検索…

カタログ統計

CATALOG › Business › Form UI

フォーム UI

入力フィールド、ラジオ、チェック、ステップフォーム部品集。

Patterns

Business

Group

isValid=0

Verified

CSS

Animation

Form — Contact Card (Visual)

form-contact-card

Copy

Link

お問い合わせ

2 営業日以内にご返信いたします。お急ぎの方は電話でも承ります。

お名前

山田太郎

メールアドレス

[email protected]

お問い合わせ内容

ご質問やご要望をご記入ください…

送信する →

パターン名: Form — Contact Card (Visual)
概要: Static visual stub of a contact form (name / email / message + submit).
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 640px、主要ブロック group, group, heading, paragraph, paragraph, group, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Form UIをミニマルに見せる余白重視版 / Form UIをリッチに見せるカバー/カード強調版 / Form UIをコーポレート向けに整える情報密度高め版 / Form UIをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-contact-card"} /-->

CSS:
.section-form-contact-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-contact-card').forEach((el) => el.dataset.ready = 'true');

Form — Login Card

form-login-card

Copy

Link

おかえりなさい

アカウント情報を入力してください

G ・ Google で続ける

— または —

メール

[email protected]

パスワード

••••••••

ログイン

アカウントをお持ちでないですか？新規登録

パターン名: Form — Login Card
概要: Compact login card with social SSO and email/password fields.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px / 1px、推奨コンテンツ幅 440px、主要ブロック group, group, heading, paragraph, buttons, button, paragraph, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Form UIをリッチに見せるカバー/カード強調版 / Form UIをコーポレート向けに整える情報密度高め版 / Form UIをカジュアルに見せるアイコン/ラベル強調版 / Form UIをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-login-card"} /-->

CSS:
.section-form-login-card { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-login-card').forEach((el) => el.dataset.ready = 'true');

Form — Minimal Login Card

form-login-minimal

Copy

Link

パターン名: Form — Minimal Login Card
概要: Centered login card with email / password mock fields + primary submit.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px / 1px / 1px、推奨コンテンツ幅 420px、主要ブロック group, group, heading, paragraph, group, paragraph, paragraph, buttons

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Form UIをミニマルに見せる余白重視版 / Form UIをリッチに見せるカバー/カード強調版 / Form UIをコーポレート向けに整える情報密度高め版 / Form UIをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-login-minimal"} /-->

CSS:
.section-form-login-minimal { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-login-minimal').forEach((el) => el.dataset.ready = 'true');

Form — Hero Search Bar

form-search-bar

Copy

Link

何をお探しですか？

記事、動画、ドキュメントから、まとめて検索できます。

🔍 キーワードを入力…

検索

人気の検索: API リファレンス ・ 料金プラン ・ 導入事例

パターン名: Form — Hero Search Bar
概要: Centred hero search bar with rounded pill input and quick suggestions.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, heading, paragraph, group, paragraph, buttons, button, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Form UIをリッチに見せるカバー/カード強調版 / Form UIをコーポレート向けに整える情報密度高め版 / Form UIをカジュアルに見せるアイコン/ラベル強調版 / Form UIをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-search-bar"} /-->

CSS:
.section-form-search-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-search-bar').forEach((el) => el.dataset.ready = 'true');

Form — Inline Search with Suggestions

form-search-inline

Copy

Link

何をお探しですか?

人気の検索: 料金・使い方・ブログ

パターン名: Form — Inline Search with Suggestions
概要: Centered pill-shape search bar with popular-search suggestions below.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 1px、推奨コンテンツ幅 640px、主要ブロック group, heading, search, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Form UIをリッチに見せるカバー/カード強調版 / Form UIをコーポレート向けに整える情報密度高め版 / Form UIをカジュアルに見せるアイコン/ラベル強調版 / Form UIをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-search-inline"} /-->

CSS:
.section-form-search-inline { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-search-inline').forEach((el) => el.dataset.ready = 'true');

Form UI — EX01 Contact Form Mock

form-ui-ex01-contact-stack

Copy

Link

お問い合わせ

お名前 *

山田太郎

メールアドレス *

[email protected]

ご相談内容

できるだけ具体的にお書きください…

送信する

送信ボタンは実際のフォームプラグインに置き換えてご利用ください。

パターン名: Form UI — EX01 Contact Form Mock
概要: Contact form visual: labels, field placeholders and submit button.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex01-contact-stack"} /-->

CSS:
.section-form-ui-ex01-contact-stack { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex01-contact-stack').forEach((el) => el.dataset.ready = 'true');

Form UI — EX02 Two Column Fields

form-ui-ex02-2col-fields

Copy

Link

かんたん見積りフォーム

お名前

山田花子

電話番号

090-0000-0000

ご希望の工事内容

選択してください ▾

無料で見積りを依頼

パターン名: Form UI — EX02 Two Column Fields
概要: Two-column field layout mock for shorter forms.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex02-2col-fields"} /-->

CSS:
.section-form-ui-ex02-2col-fields { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex02-2col-fields').forEach((el) => el.dataset.ready = 'true');

Form UI — EX03 Reservation Quick Bar

form-ui-ex03-reservation-bar

Copy

Link

日付

6月20日(土) 📅

時間

19:00 ▾

人数

2 名 ▾

空席を探す

パターン名: Form UI — EX03 Reservation Quick Bar
概要: Date, time and party-size selector mock in one row with search button.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex03-reservation-bar"} /-->

CSS:
.section-form-ui-ex03-reservation-bar { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex03-reservation-bar').forEach((el) => el.dataset.ready = 'true');

Form UI — EX04 Option Chips

form-ui-ex04-options-chips

Copy

Link

Q. ご希望の連絡方法を選んでください

● メール

○ 電話

○ LINE

パターン名: Form UI — EX04 Option Chips
概要: Single-choice option chips mock with question label.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex04-options-chips"} /-->

CSS:
.section-form-ui-ex04-options-chips { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex04-options-chips').forEach((el) => el.dataset.ready = 'true');

Form UI — EX05 Privacy Consent Note

form-ui-ex05-privacy-consent

Copy

Link

☑

プライバシーポリシーに同意のうえ送信します。お預かりした情報はご返信のためにのみ使用し、第三者へ提供しません。

同意して送信

パターン名: Form UI — EX05 Privacy Consent Note
概要: Consent checkbox mock with privacy note before submission.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex05-privacy-consent"} /-->

CSS:
.section-form-ui-ex05-privacy-consent { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex05-privacy-consent').forEach((el) => el.dataset.ready = 'true');

Form UI — EX06 Thanks Confirmation

form-ui-ex06-thanks

Copy

Link

✅

送信が完了しました

確認メールをお送りしました。
二営業日以内に担当者からご連絡します。

トップへ戻る

パターン名: Form UI — EX06 Thanks Confirmation
概要: Submission complete message with next-step guidance.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex06-thanks"} /-->

CSS:
.section-form-ui-ex06-thanks { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex06-thanks').forEach((el) => el.dataset.ready = 'true');

Form UI — EX07 Newsletter Inline Field

form-ui-ex07-newsletter-inline

Copy

Link

週刊ニュースレターを購読

[email protected]

購読する

パターン名: Form UI — EX07 Newsletter Inline Field
概要: Inline email field and subscribe button mock.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex07-newsletter-inline"} /-->

CSS:
.section-form-ui-ex07-newsletter-inline { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex07-newsletter-inline').forEach((el) => el.dataset.ready = 'true');

Form UI — EX08 Form Steps Header

form-ui-ex08-steps-header

Copy

Link

資料請求(入力 1 / 全 2 ステップ)

入力は 1 分で完了します。資料は即時ダウンロードできます。

🔒 SSL 暗号化通信

📵 営業電話はしません

⏱️ 約 1 分で完了

パターン名: Form UI — EX08 Form Steps Header
概要: Form header with progress note and reassurance row.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex08-steps-header"} /-->

CSS:
.section-form-ui-ex08-steps-header { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex08-steps-header').forEach((el) => el.dataset.ready = 'true');

Form UI — EX09 Site Search Box

form-ui-ex09-search-box

Copy

Link

🔍 キーワードで探す(例: 営業時間)

よく検索される語:

#予約方法

#駐車場

#ギフト

パターン名: Form UI — EX09 Site Search Box
概要: Large centered search field mock with popular keywords.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex09-search-box"} /-->

CSS:
.section-form-ui-ex09-search-box { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex09-search-box').forEach((el) => el.dataset.ready = 'true');

Form UI — EX10 Validation Notice

form-ui-ex10-error-summary

Copy

Link

⚠ 入力内容をご確認ください(2 件)

・メールアドレスの形式が正しくありません
・電話番号は数字とハイフンのみで入力してください

パターン名: Form UI — EX10 Validation Notice
概要: Form validation error summary mock with retry guidance.
使用目的: Form UI領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: Group / Columns / Heading / Paragraph / Buttons を中心とした標準ブロック構成、推奨コンテンツ幅 1180px

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: 配色をブランドカラーへ寄せた強調版 / 情報密度を上げたコーポレート版 / モバイル特化の単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/form-ui-ex10-error-summary"} /-->

CSS:
.section-form-ui-ex10-error-summary { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-form-ui-ex10-error-summary').forEach((el) => el.dataset.ready = 'true');

Form — FX01 Focus Ring

fx-focus-ring

Copy

Link

Tabでフォーカス

パターン名: フォーカスリング — Form — FX01 Focus Ring
概要: キーボード操作時に美しいリングが出る
適用シーン: フォーム・ボタン全般
使い方: 要素に fx-focus-ring(:focus-visible時のみ)

メリット: アクセシビリティと意匠の両立
デメリット: –
バリエーション案: 色
実装時の注意点: マウスクリックでは出ない(仕様)

使い方: 要素に fx-focus-ring(:focus-visible時のみ)
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

Form — FX02 Glass Panel

fx-glass

Copy

Link

Glassmorphism

パターン名: ガラスパネル — Form — FX02 Glass Panel
概要: すりガラスの入力パネル
適用シーン: 写真背景の上のフォーム・案内枠
使い方: グループに fx-glass

メリット: 背景を活かしたまま可読
デメリット: 背景が単色だと効果が出ない
バリエーション案: 曇り度
実装時の注意点: 写真/グラデ背景の上で

使い方: グループに fx-glass
検証: isValid 0 / 実証済み構造を移植 / fx.css v7.3

フォーム UI · Form UI · Blanc Nail

フォーム UI

お問い合わせ

おかえりなさい

ログイン

何をお探しですか？

何をお探しですか?

お問い合わせ

かんたん見積りフォーム

送信が完了しました

週刊ニュースレターを購読

資料請求(入力 1 / 全 2 ステップ)