Arcframe Docs
Live preview · Version 1.0.0

Forms

Understand the demonstration forms and connect Netlify Forms, Formspree or a custom endpoint.

1. Form behaviour

The general contact form and multi-step enquiry are frontend demonstrations. They validate fields, expose errors, prevent repeated submission during the loading state and show a local success message. No message is delivered by default.

Required disclaimer

This product is a static HTML, CSS and JavaScript website template. It does not include a CMS, database, user-account system, hosting, payment processing, email backend or administrative interface. Forms are included as frontend demonstrations and require connection to a third-party service or custom backend to deliver submissions.

The multi-step form stores incomplete values in localStorage under arcframe-form-project-enquiry . Remove that code from assets/js/forms.js when local persistence is not appropriate.

2. Connect Netlify Forms

  1. Deploy the complete folder to Netlify.
  2. Add data-netlify="true" and a unique name attribute to the form.
  3. Add a hidden input named form-name with the same value.
  4. Set the form action to a local success page.
  5. Add data-native-submit so Arcframe leaves submission to the browser and Netlify. 
<form name="contact" method="POST" data-netlify="true" data-native-submit>
  <input type="hidden" name="form-name" value="contact">
  ...
</form>

Deploy once after changing the markup so Netlify can detect the form in the generated HTML.

3. Connect Formspree

  1. Create a form endpoint in your Formspree account.
  2. Open assets/js/config.js.
  3. Paste the endpoint into formEndpoint.
  4. Keep data-demo-form on the form so Arcframe can show loading, success and failure states.
  5. Test validation, spam controls, response handling and notification settings. 
// CUSTOMIZE: Form endpoint
formEndpoint: "https://formspree.io/f/YOUR_ID",

4. Connect a custom backend

Set formEndpoint in assets/js/config.js. Arcframe sends the form as FormData with an HTTP POST request and uses the supplied loading, success and failure states. 

// assets/js/config.js
formEndpoint: "https://your-domain.example/api/enquiry",

Your endpoint should accept multipart form data and return a successful HTTP status. Validate all values again on the server; browser validation is not a security boundary. Use HTTPS, rate limiting and server-side spam protection. Never place private API keys in frontend files.

5. Validation and accessibility

Labels are explicitly connected to fields. Invalid controls receive aria-invalid and the associated error container is announced through aria-describedby . The first invalid field receives focus. Keep those relationships when renaming IDs.

No-JavaScript behaviour

Every multi-step section is visible before JavaScript runs, so the enquiry becomes a normal long form. When connecting a backend, provide a real submit endpoint and server-generated success/error page for full no-JavaScript delivery.

6. Form testing checklist

  • Submit with every required field empty.
  • Enter an invalid email address.
  • Move through steps with keyboard only.
  • Use Back and confirm values remain.
  • Refresh and confirm expected local persistence.
  • Submit twice quickly and confirm duplicate requests are blocked.
  • Test server failure, timeout and success responses after integration.
  • Verify privacy wording reflects actual data handling.