Skip to content

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, Button, Label, Checkbox, Radio

Form — The container that wraps all other form elements. Every form must have one. It's like a Container that carries special form-specific properties. The Form block arrives with sample fields (Name, Email, Gender, Message and a Send button) that you can keep, change or delete.

Input — A single-line text field. Examples: name, email address, password. In the Element settings (gear icon at the top of the right panel), the Type menu offers:

  • text (default) — any text
  • email — for email addresses (shows validation error if the format is wrong)
  • password — hides the text as the user types
  • number — for numeric input

Checkbox and Radio — A checkable box, and a single-choice button (give the radios of a group the same Name).

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

Select — A dropdown menu. Write its choices in the Options field of the Element settings, one per line, as value::Label (for example small::Small).

Button — Set its Type to submit in the Element settings to make it send the form. The Button block, and the Send button of the Form block, are button by default: they do nothing until you change the Type.

Label — Optional but recommended. Associates text with an input field (improves accessibility and usability). Type the Input's ID (a field of its Element settings) in the Label's For field.

Building a simple contact form

Structure in the canvas:

  1. Add a Form element (Blocks → Forms → Form). It already contains a name field, an email field, Gender checkboxes, a message field and a Send button
  2. Select the Gender row and delete it
  3. Select the Send button, and in the Element settings set its Type to submit
  4. In the Style panel, set the Form to Display: Flex and Flex direction: Column to stack them vertically
  5. Add Row 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 proprietary form service with a free plan.

Handling submissions with external services

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

A Silex form is a plain HTML form: the visitor's browser sends it directly to the Action URL. The options below accept this kind of form, without extra code. After sending, the visitor sees the page that the service sends back (a thank-you page, or a raw response for some tools).

The options are sorted by type: libre first (free software that no company controls), then open source (free software, but a company or a contributor agreement decides), then everything else (open core, proprietary, source available).

Libre:

  • Huginn (libre, MIT) — An automation tool you install on your own server. A "Webhook" agent receives the form, an "Email" agent sends it to you. Run by volunteers. Needs some technical skills.

Open source:

  • WordPress + Contact Form 7 (open source, GPL) — Useful if you already use WordPress as a data source (WordPress setup). Contact Form 7 is made by Rock Lobster Inc. WordPress has a non-profit foundation, but the project is led in practice by Matt Mullenweg, who also runs the company Automattic. See How to use Contact Form 7 with Silex below.
  • Node-RED (open source, Apache 2.0) — An automation tool you install on your own server. An "http in" node receives the form, an email node (package node-red-node-email, to install) sends it to you. It is a project of the OpenJS Foundation (a non-profit), but contributors must sign a contributor license agreement, and most of the work comes from the company FlowFuse. Needs some technical skills.

Everything else (open core, proprietary, source available):

  • n8n (source available, not free software) — Automation tool. When self-hosted, a "Webhook" node receives the form and the workflow can send it to your email. Its license, the Sustainable Use License, allows use only for your own internal business purposes.
  • Formspree (proprietary) — Hosted service. Free plan: 50 submissions per month, Formspree's own thank-you page.
  • Basin (proprietary) — Hosted service. Free plan: 1 form, 50 submissions per month.
  • Web3Forms (proprietary) — Hosted service. Free plan: 250 submissions per month. You add your access key in a hidden field (an Input with the Name access_key, and in its Attributes section type = hidden and value = your key).
  • FormSubmit (proprietary) — Free hosted service. The action URL contains your email address; you confirm it once by email.
  • Static Forms (proprietary) — Hosted service with a free plan.
  • Netlify Forms (proprietary) — Only for sites published on Netlify. Add the data-netlify attribute with the value true to the Form (Attributes section of the Element settings).

Note on privacy: With a hosted service, your visitors' messages go through that service's servers and stay there. Tell your visitors in your privacy policy. A tool installed on your own server keeps the data with you.

Going further (these need JavaScript, a relay or an embed, not just the Action field):

  • Your own script — A small PHP or Node.js script on your hosting that receives the form and emails it to you. Gives full control, but you must write and maintain it.
  • hugo-contact (open source, MIT, by Caffeinated Softworks) — Small self-hosted Go program that receives forms and sends them by email. It needs a small script on the page against spam (custom code).
  • EmailJS (proprietary) — Sends emails from JavaScript. Free plan: 200 requests per month.
  • Grist (open core, grist-core is Apache 2.0, the Enterprise edition is proprietary) — Its API needs a token, so a Silex form cannot post to it directly. You can embed a form made in Grist in your page, or use a relay.

Example: Setting up a form submission service

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

  1. Create an account or set up your self-hosted tool
  2. Get a form action URL (e.g., https://formspree.io/f/xyzabc123 or https://your-node-red-server.example/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

Example: Contact Form 7

Contact Form 7 can receive a Silex form through the WordPress REST API, without an API key (CSS-Tricks tutorial):

  1. In WordPress, create a contact form in Contact Form 7 and note its ID (in the URL of its edit page). Its field names must match the Name of your Silex fields
  2. In Silex, set the Form Action to https://your-wordpress-site/wp-json/contact-form-7/v1/contact-forms/<ID>/feedback and Method to POST
  3. In the Attributes section of the Form, add enctype with the value multipart/form-data
  4. Add hidden fields to the form: for each one, add an Input, set its Name, then in its Attributes section add type with the value hidden and value with the value below. _wpcf7_unit_tag (e.g. wpcf7-f<ID>-o1) is required: without it Contact Form 7 refuses the form. The others are optional but recommended: _wpcf7 (the form ID), _wpcf7_locale (e.g. en_US) and _wpcf7_container_post (0)

Limits: the visitor lands on a raw JSON response, not a nice page. A response with status 200 can still mean the email was not sent: check the status value in the JSON when you test. If reCAPTCHA is active on the WordPress side, these submissions are all marked as spam (status is spam) and no email is sent.

Form validation

Modern browsers validate form fields before submission:

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

To make a field required:

  1. Select the field (Input, Textarea, Select, Checkbox or Radio)
  2. In the Element settings (gear icon), check 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 with the same Name) - Dropdown (Select and its Options field) - 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

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) Check Required in the Element settings (gear icon)
  • C) Use the Form's action property
Answer

B) Check Required in the Element settings (gear icon) — The browser then prevents 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.

Edit this page on GitLab