Forms

Swebsy recognizes valid HTML forms and their fields as editable components: form, fieldset, legend, label, input, textarea, select, option, checkbox, radio, and button each have their own settings.

There is no Forms category in the Components panel, so you do not drag a blank form onto the canvas. A form reaches your page one of three ways:

• A ready-made block — in the Blocks tab, search for form or open the Form group under By section.
• A template — Nimbus ships a support form already laid out.
• Imported HTML or the AI builder — pasted or generated form markup is parsed into the same editable components.

Static sites need an external form handler

Swebsy exports the form interface, not a submissions backend. Connect the form to a hosted form service, a serverless function, or your own API before publishing it.

Select the form

A form has no padding or background of its own, so clicking it on the canvas almost always selects the column around it instead. Its settings live on the form itself, so reach it one of these two ways:

• Layers panel (recommended) — open Layers in the left sidebar, expand the section, and click the Form row.
• From one of its fields — click any input, label, or the submit button on the canvas, then use the Form settings → link at the top of the Settings tab.

Selecting the Form row in Layers puts Action, Method, and Encoding in the Settings tab.

Connect an existing form

1. Select the form in the Layers panel, as described above.

2. Open the right sidebar’s Settings tab.

3. Enter the receiving endpoint in Action. Use an absolute HTTPS URL supplied by a form provider, or an explicit same-origin path such as /api/contact.

4. Choose the endpoint’s expected Method, normally POST.

5. Set Encoding if the receiver requires it.

6. Open Preview and send a test submission.

The status above the form settings tells you whether the Action is ready:

• Connected — an HTTPS URL, explicit same-origin path, or local development URL is configured.
• Action required — the Action is empty or #; submissions remain blocked.
• Invalid — the value is a placeholder, a bare domain, or an insecure production HTTP URL.

Local http://localhost, http://127.0.0.1, and http://[::1] endpoints are accepted for development. Published external endpoints should use HTTPS.

Configure fields

Select an input, textarea, checkbox, radio button, or select control and open Settings. Every submitted control needs a Name. The browser sends that name as the key and the visitor’s entry as its value. Radio buttons in the same group intentionally share one Name.

For example, an email input named email submits a value such as [email protected]. A field without a Name may look correct but is not included in the request.

Use the other field settings as needed:

• Type controls native input behavior, such as email or telephone input.
• Required enables browser validation before submission.
• Autocomplete helps browsers fill familiar fields.
• Disabled prevents a field from being edited or submitted.
• Read only keeps a value visible and submit-capable without allowing edits.

Labels should point to the matching field ID so the form remains accessible.

Choose an endpoint

Option	Best for	Action example
Hosted form endpoint	A contact form without maintaining a backend	Provider-supplied HTTPS URL
Same-origin function or API	Custom validation, storage, or email workflows	/api/contact
Hosted form embed	A provider-owned form and confirmation flow	Use the Embed component instead

Hosted endpoint services such as Formspree, Basin, and Getform typically provide an Action URL for a native form. Follow the provider’s instructions for the required method, field names, spam protection, redirects, and allowed domains. Never place API secrets in the Action URL or page source.

Preview and publishing behavior

• Design mode: submissions are blocked so clicking the form cannot navigate away from the editor. Use Preview to test it.
• Preview with no Action: the form stays on the page and explains that it is not connected, naming the Layers panel route to its Action setting.
• Preview with a valid Action: Swebsy sends a real browser submission to the configured endpoint and opens the provider’s response in a new tab, so the canvas keeps showing the site you are editing. Use test data because the provider may store or email it.
• Exported or deployed site: the form uses normal HTML submission behavior. An unconfigured form remains blocked instead of silently reloading the page.

The endpoint controls the success response and any redirect after submission. Test both successful and invalid submissions on the final deployed domain.

Embed a hosted form

1. Create the form in your form provider.
2. Copy the provider’s embed URL or iframe snippet.
3. In Swebsy, drag the Embed component onto the canvas.

4. Open the Settings tab and paste the form URL into Source URL.

5. Preview the page and test the form on the provider’s side.

Test before publishing

1. Give every submitted field a Name.
2. Submit once in Preview and confirm the provider receives the expected keys.
3. Export or deploy the site.
4. Submit again from the live domain.
5. Confirm the success response, email notification, spam protection, and error handling all work as intended.

Common issues

Clicking Submit does nothing — the hosted form provider may block embedded submissions from your domain, the Action may still be empty, or the URL may not be the provider’s native form endpoint.

Submitted data is missing — check that each field has a Name value. Fields without names are not included in normal form submissions.

Browser validation blocks submission — required fields must be filled before submit. Enable Disable native validation on the form only when the receiving service performs equivalent validation.

The live site returns 404 after submit — a same-origin Action such as /api/contact requires that route to exist on the deployed host. Static HTML alone does not create it.

The provider rejects the request — confirm its required Method, Encoding, field names, allowed domain, and anti-spam settings.