[Framer] Preventing Sales! How to limit the number of characters in a form and disable the button!

Are you troubled by receiving too many sales emails from the inquiry form set up on your company site?
This time, I will introduce a method to set a character limit on Framer so that long and sales-like messages cannot be sent! Framer allows you to create websites easily with high design quality, and you can implement practical validation by using Code Override.

What you can do with this article

• Set a character limit on Textarea

• The submit button becomes unclickable if the input exceeds a certain number of characters

• The button visually appears disabled (opacity: 0.5)

• The button width maintains 100% (the design won’t break)

Elements to use and their purpose

Element Purpose Textarea Input field (e.g. inquiry content) Button Submit button Code Override Controls the button's behavior based on input character count

Implementation code (can be used as is)

tsxコピーする編集するimport { Override } from "framer"
import { useState } from "react"

let setDisabledState: (v: boolean) => void

export function TextareaOverride(): Override {
  return {
    onChange: (e) => {
      const value = e.target.value
      const overLimit = value.length > 10 // ←文字数制限（ここを調整）
      if (setDisabledState) {
        setDisabledState(overLimit)
      }
    },
  }
}

export function ButtonOverride(): Override {
  const [isDisabled, setIsDisabled]

How to use in Framer

1. Select the Textarea component and apply TextareaOverride

2. Apply ButtonOverride to the Button component

3. Set the button's Width property to "Fill (full parent width)" in Framer

Examples of usage scenarios

• Add a mechanism for "not allowing long messages" as a measure against spam sales

• Block unnecessary inquiries in advance

• Convey a subtle message to "please summarize your requirements concisely" before sending the form

Additional ideas

• Prevent submission if it contains specific keywords (e.g. "sales", "your company", "agency")

• Block not only by character count but also if the character count is extremely low (e.g. 3 characters or less)

• Display an error message to provide feedback to the user

Conclusion

With Framer, you can easily incorporate not only designs but also a little bit of logic using CodeOverride.
Let's make good use of such detailed implementations for spam prevention and improving UX!

Postscript

import { Override } from "framer"
import { useState, useEffect, useRef } from "react"

const MAX_LENGTH = 10

let setDisabledState: (v: boolean) => void

// ✅ Textareaのロジック + スタイル制御
export function TextareaOverride(): Override {
    const ref = useRef<HTMLTextAreaElement>(null)
    const [isOverLimit, setIsOverLimit] = useState(false)
    setDisabledState = setIsOverLimit

    useEffect(() => {
        const el = ref.current
        if (!el) return

        const handleInput = (e: any) => {
            const value = e.target.value
            const over = value.length > MAX_LENGTH
            setIsOverLimit(over)

            el.style.border = over ? "2px solid red" : ""
            el.style.backgroundColor = over ? "#ffecec" : ""
        }

        el.addEventListener("input", handleInput)
        return () => el.removeEventListener("input", handleInput)
    }, [])

    return {
        ref,
    }
}

// ✅ Buttonのスタイル制御（そのまま流用）
export function ButtonOverride(): Override {
    const [isDisabled, setIsDisabled] = useState(false)
    setDisabledState = setIsDisabled

    return {
        whileTap: isDisabled ? {} : { scale: 0.95 },
        style: {
            opacity: isDisabled ? 0.5 : 1,
            pointerEvents: isDisabled ? "none" : "auto",
            width: "100%",
        },
    }
}

This will get a red frame!