【Framer】営業防止！フォームで文字数制限し、ボタンを押せなくする方法！

営業メールばかり来て困っていませんか？

Webサイトに問い合わせフォームを設置すると、どうしても営業メールやスパムが大量に届いてしまう問題があります。この記事では、Framerのフォームに文字数制限を設け、一定文字数を超えたら送信ボタンが機能しなくなる仕組みを実装する方法を紹介します。

実装の仕組み

Code Overrideを活用して、TextareaコンポーネントとButtonコンポーネントを制御します。

基本的な考え方

1. テキストエリアの入力文字数を監視する
2. 設定した上限文字数（例：MAX_LENGTH = 10）を超えた場合に、ビジュアルフィードバックを表示
3. 同時に送信ボタンを無効化して、フォーム送信を防止

テキストエリアの文字数超過時の挙動

文字数が上限を超えると、以下の変化が発生します。

• 境界線（border）が赤色に変化 — ユーザーに文字数超過を視覚的に通知
• ボタンのopacityが0.5に変化 — 送信ボタンが半透明になり、押せない状態であることを示唆
• ボタンが無効化（disabled） — 実際にクリックしても送信されなくなる

デザイン配慮のポイント

実装する際に注意すべきデザイン上のポイントがあります。

• ボタンの幅は「100%」を維持 — 無効化状態でもボタンのサイズが変わらないようにすることで、デザイン崩れを防止
• スムーズなトランジション — 状態変化が唐突にならないよう、CSSトランジションでなめらかに遷移させる
• ユーザーフレンドリーなフィードバック — 「なぜ送信できないのか」がユーザーに伝わるUIを心がける

応用案

この基本的な仕組みをベースに、さらに高度なフォームバリデーションも実装可能です。

• 特定キーワードのブロック — 営業メールでよく使われるキーワード（「ご提案」「サービスのご案内」など）を含む投稿を制限
• 極端に短いテキストのフィルタリング — 意味のない短文の送信を防止
• 入力パターンの検証 — メールアドレスや電話番号のフォーマットチェック

まとめ

Code Overrideを使ったフォームのバリデーションは、実用性と美しさを両立させた問い合わせフォームを実現できます。スパム対策は単純なCAPTCHAだけでなく、こうしたUI/UX上の工夫によっても効果的に行うことが可能です。