Adding Contact Forms to Your Site

Forms are essential for collecting information from your visitors. Here's how to add and customize contact forms on your Framekit site.

Creating a Form with AI

The easiest way to add a form is using AI:

Click the "+" button to add a new block

Select AI

Describe your form: "Create a contact form with name, email, phone, and message fields"

AI generates a fully functional form

Example Form Prompts

Simple Contact Form:

"Create a contact form with fields for name, email, and message. Include a submit button."

Detailed Inquiry Form:

"Build a contact form with: full name, email address, phone number, company name, a dropdown to select inquiry type (General, Support, Sales, Partnership), and a large message textarea. Add a submit button that says 'Send Message'."

Newsletter Signup:

"Create an email signup form with just an email field and a 'Subscribe' button. Make it compact and stylish."

Quote Request Form:

"Design a quote request form with: name, email, phone, service type dropdown (Web Design, Branding, Marketing), budget range dropdown, project description, and preferred start date."

Form Fields You Can Request

• Text inputs: Name, email, phone, company, etc.
• Textareas: Messages, descriptions, comments
• Dropdowns/Selects: Categories, options, choices
• Checkboxes: Agreements, multiple selections
• Radio buttons: Single choice from options
• Date pickers: Scheduling, deadlines
• File uploads: Attachments, documents

Making Form Fields Editable

Ask AI to make form labels and placeholders editable:

"Create a contact form and make the field labels, placeholder text, and button text editable from settings."

This lets you customize the form text without regenerating.

Where Do Form Submissions Go?

All form submissions are automatically saved and accessible in your dashboard:

Go to your site's Settings

Click Forms in the sidebar

View all form responses with timestamps

Export submissions as CSV for external use

Form Best Practices

Keep It Short

• Only ask for essential information
• Fewer fields = higher completion rates
• Use optional fields sparingly

Clear Labels

• Use descriptive field labels
• Add placeholder text as examples
• Include help text for complex fields

Mobile-Friendly

• Test forms on mobile devices
• Ensure buttons are tap-friendly
• Check that fields are properly sized

Confirmation

• Consider asking AI to add a success message
• "After submission, show a thank you message"