Forms

HTML forms collect information from visitors — emails, messages, contact details, feedback, and more. Silex includes form elements and you can handle submissions through external services.

Forms in Silex work like any other element: you add them visually, configure their properties, and publish. When a visitor submits a form on your live site, the data goes to a service you choose (like Formspree or Netlify Forms), not directly to your email.

Adding form elements

In the Blocks panel (left sidebar):

1. Look for the Forms section, or search for form elements
2. Available elements: Form, Input, Textarea, Select, Option

Form — The container that wraps all other form elements. Every form must have one. It's like a Div that carries special form-specific properties.

Input — A single-line text field. Examples: name, email address, website URL. In the Element settings (gear icon), you can set type to:

• text (default) — any text
• email — for email addresses (shows validation error if the format is wrong)
• tel — for phone numbers
• number — for numeric input
• password — hides the text as the user types
• date — shows a date picker on supported browsers
• checkbox — a checkable box (can have multiple per form)
• radio — a single-choice button (group them by name)
• submit — the button that submits the form

Textarea — A multi-line text field for longer messages. Good for contact forms, feedback, or comments.

Select — A dropdown menu. Add Option elements inside it to define the choices.

Label — Optional but recommended. Associates text with an input field (improves accessibility and usability). Set the Label's for attribute to match the Input's id or name.

Building a simple contact form

Structure in the canvas:

1. Add a Form element (Blocks → Forms → Form)
2. Inside the Form, add these elements in order:
3. Label + Input type="text" (for name)
4. Label + Input type="email" (for email)
5. Textarea (for message)

6. Input type="submit" (the submit button)

7. In the Style panel, set the Form to Display: Flex and Flex-direction: Column to stack them vertically

8. Add Column-gap (e.g., 16px) for consistent spacing between elements

Style the elements:

• Add padding and width to inputs to make them larger
• Set Font-size for readability
• Add Border and Border-radius for visual polish
• On the submit button: set a Background color, padding, and perhaps Font-weight: bold

Setting form action and method

After you've built the form visually, you need to configure where the data goes when someone submits it.

In the Element settings (gear icon), with the Form element selected:

• Action — The URL where the form data is sent. This is where external services come in (see next section).
• Method — Usually POST (recommended for most forms). GET is less common and puts data in the URL, which is visible to the user.

Example action: https://formspree.io/f/xyzabc123

This tells the form to send all submitted data to Formspree, a free form submission service.

Handling submissions with external services

Silex doesn't provide a built-in backend for form submissions. Instead, you use a third-party service that collects the data and usually sends it to your email.

Popular options:

Self-hosted / FOSS alternatives (recommended for privacy and independence):

• n8n (self-hosted automation) — Create a workflow that receives form submissions via webhook and sends them to your email, a database, or any other service. Free and open source when self-hosted.
• WordPress (with a contact form plugin) — If you already use WordPress as a data source, plugins like Contact Form 7 or WPForms can handle submissions on your WordPress instance.
• Your own backend — Self-host a simple server (e.g., a small Node.js or PHP script) that receives form data via POST and forwards it to your email. This requires developer skills but gives you full control.

Third-party services:

• Formspree (free tier) — Easy setup, sends submissions to your email. See Formspree's setup guide for step-by-step instructions.
• Basin (free) — Similar to Formspree. Sign up, create a form, get the action URL. See usebasin.com.
• EmailJS (free tier available) — Client-side service that sends form data directly to your email via JavaScript.

Note: When using a third-party service, form data passes through their servers. If privacy is a concern, prefer a self-hosted solution like n8n or your own backend.

Example: Setting up a form submission service

Whichever service you choose, the general steps are the same:

1. Create an account or set up your self-hosted endpoint
2. Get a form action URL (e.g., https://formspree.io/f/xyzabc123 or https://your-n8n-instance.com/webhook/contact)
3. In Silex, select your Form element
4. In the Element settings (gear icon), paste the URL into the Action field
5. Make sure Method is set to POST
6. Publish your site and test the form on your live site

Form validation

Modern browsers validate form fields before submission:

• email input — Must contain a valid email format
• number input — Must be a number
• date input — Must be a valid date
• required attribute — You can mark fields as required so users can't submit blank

To make a field required:

1. Select the Input or Textarea element
2. In the Element settings (gear icon), add an attribute: Name = required, Value = required
3. Now the browser prevents form submission if that field is empty

Styling form elements

Form elements are just HTML elements, so you can style them fully in the Style panel:

• Set Width to make inputs wider (e.g., 100% or 300px)
• Add Padding for internal spacing
• Set Border and Border-radius for visual appeal
• Use Font-size, Font-weight, Color, and Background for typography and colors
• Hover states: Select an input, then in the Style panel, look for pseudo-classes (:hover, :focus). These let you style how a field looks when the user hovers or clicks it

Responsive forms: On narrow screens, you might want full-width inputs. Use a breakpoint to set Width to 100% on mobile and 300px on desktop. See Responsive design for details.

Common form patterns

Newsletter signup: - Single email input + submit button - Action: Formspree, Mailchimp, or Substack - Users type their email and click Subscribe

Contact form: - Name, Email, Message fields - Action: Formspree or similar - Consider adding a checkbox for "I agree to be contacted"

Feedback form: - Textarea for feedback - Optional select dropdown for category (Bug, Feature request, General) - Submit button

Survey: - Multiple choice questions (radio buttons grouped by name) - Dropdown (select + option) - Submit button

Limitations and best practices

No client-side form storage — If a visitor refreshes the page, their form data is lost. If you want to preserve data, use JavaScript (outside Silex's scope).

No conditional logic — You can't hide/show form fields based on user input without custom code.

No multi-step forms — Silex doesn't support forms that span multiple pages out of the box.

Always test after publishing — Test your form on the live site. Submit test data and verify it reaches your email or the service dashboard.

Inform users about data handling — Be transparent about where data goes. If you use Formspree, mention in your privacy policy that a third party handles submissions.

Use HTTPS — Forms should only work over HTTPS (secure). Your Silex site is automatically HTTPS if published to GitLab Pages.

Learn more

• How publishing works — understanding the full pipeline your form data travels through
• Publish to GitLab — getting your site live so form submissions work
• Elements — all available HTML elements
• Element settings (gear icon) — setting attributes on elements
• Formspree documentation — detailed form submission service
• Basin documentation — alternative form handler
• HTML form accessibility — best practices for inclusive forms

---

Quiz

Q1: What HTML element wraps all form fields?

• A) Input
• B) Form
• C) Textarea

Answer

B) Form — Every form must have a Form container that wraps all inputs, textareas, selects, and buttons.

Q2: Where does form data go when someone submits?

• A) Directly to your email
• B) To a URL you specify in the Form's action field, usually a third-party service like Formspree
• C) To Silex's servers

Answer

B) To a URL you specify in the Form's action field, usually a third-party service like Formspree — Silex doesn't store form data; you configure where it goes.

Q3: What's the difference between an Input and a Textarea?

• A) Input is for single-line text, Textarea is for multi-line text
• B) Textarea is only for email
• C) They're the same; Input is just a shorthand

Answer

A) Input is for single-line text, Textarea is for multi-line text — Use Input for short entries (name, email), Textarea for longer messages.

Q4: How do you make a form field required?

• A) Set Width to required in the Style panel
• B) Add a required attribute in the Element settings (gear icon)
• C) Use the Form's action property

Answer

B) Add a required attribute in the Element settings (gear icon) — Add Name = required, Value = required to prevent submission if the field is empty.

Q5: What does the Form's method property control?

• A) How the form looks visually
• B) Where the form data is sent
• C) How form data is transmitted (usually POST or GET)

Answer

C) How form data is transmitted (usually POST or GET) — POST is standard and recommended. GET is less common and puts data in the visible URL.