Home

About

Projects

Pricing

Contact

Home

About

Projects

Pricing

Contact

Welcome to the Blog.

Thoughts, updates, and stories.

Welcome to the Blog.

Thoughts, updates, and stories.

Welcome to the Blog.

Thoughts, updates, and stories.

Welcome to the Blog.

Thoughts, updates, and stories.

Welcome to the Blog.

Thoughts, updates, and stories.

Featured Framer Blogs

Green Fern

How to Create a CMS Content Filter

CMS

Yellow Flower

What’s New

2

Orange Flower

Styling Elements

1

Purple Flower

Importing Content

2

Lilac Flower

Best Practices

3

Featured Framer Blogs

Green Fern

How to Create a CMS Content Filter

CMS

Yellow Flower

What’s New

2

Orange Flower

Styling Elements

1

Purple Flower

Importing Content

2

Lilac Flower

Best Practices

3

Featured Framer Blogs

Green Fern

How to Create a CMS Content Filter

CMS

Yellow Flower

What’s New

2

Orange Flower

Styling Elements

1

Purple Flower

Importing Content

2

Lilac Flower

Best Practices

3

Featured Framer Blogs

Green Fern

How to Create a CMS Content Filter

CMS

Yellow Flower

What’s New

2

Orange Flower

Styling Elements

1

Purple Flower

Importing Content

2

Lilac Flower

Best Practices

3

Featured Framer Blogs

Green Fern

How to Create a CMS Content Filter

CMS

Yellow Flower

What’s New

2

Orange Flower

Styling Elements

1

Purple Flower

Importing Content

2

Lilac Flower

Best Practices

3

import { useForm } from "framer"; import { useEffect } from "react"; export function FormValidator() { const { values, state, setError, setStep, submit } = useForm(); // Regex patterns const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const phoneRegex = /^\+?[0-9\s\-]{7,15}$/; const validPostcodes = ["10115", "75001", "80331"]; // or fetch from JSON useEffect(() => { if (state === "submit") { const { email, telephone, PLZ } = values; if (!emailRegex.test(email)) { setError("email", "Invalid email"); setStep("error"); return; } if (!phoneRegex.test(telephone)) { setError("phone", "Invalid phone number"); setStep("error"); return; } if (!validPostcodes.includes(PLZ)) { setError("postcode", "Invalid postal code"); setStep("error"); return; } setStep("success"); submit(); // Continue to Zapier } }, [state]); return null; }