Contact Form
Figma Component: 23564-197610
Last modified with commit b960ce3 on
by Sara Deric.
The Contact Form component provides a form for visitors to submit inquiries or messages. Includes configurable input fields (such as name, email, phone, subject, message, etc.) with validation and feedback messages on submission. Form submissions are handled using Cloudflare Pages static forms plugin.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display form structure | Shows a left panel with a heading and description text, alongside the form organized into sections with titles (e.g., contact details, trip details). Each section contains input fields with labels, placeholder text, and required field indicators (asterisk). |
| system | Add dynamic tour/activity entries | In trip inquiry forms, displays a section where users can dynamically add multiple tour or activity entries using an add button. Each entry can be filled with specific details about desired activities during the trip. |
| system | Request suggested itinerary | Shows an optional checkbox labeled "Ne vem kakšen bo program, želim predlog". When checked, the user can request a suggested itinerary and is not required to list individual activities. |
| system | Validate input | Validates required fields and email format before allowing submission. Shows error messages for invalid inputs. |
| system | Determine required fields | The system determines which fields are required. |
| system | Handle submission | Shows success message on successful submission or error message on failure. |
| editor | Customize title and description | Change translation strings for the form (labels, headings, placeholders). |
| user | Complete and submit form | Fill in form fields and click submit button. Receives feedback on submission success or errors. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |