Svelte forms
Use a compact Svelte component with progressive enhancement and no server endpoint to maintain. Browse 53 templates that generate clean Svelte code pointing to your Formward endpoint.
Implementation notes
- Paste the generated component
- Replace the endpoint placeholder
- Test loading, success and failure states
A working Svelte contact form
This server-rendered example is generated specifically for Svelte. Replace the endpoint placeholder with your public Formward form ID; it is not a secret.
Best for
Svelte applications that benefit from compact components and direct submission without a separate server handler.
Watch for
Do not make client-side state the only validation layer; retain named controls and endpoint-side validation rules.
<script lang="ts">
let sent = $state(false);
async function onSubmit(e: SubmitEvent) {
e.preventDefault();
const form = e.target as HTMLFormElement;
const res = await fetch("https://forms.formward.eu/f/your-form-id", {
method: "POST",
headers: { Accept: "application/json" },
body: new FormData(form),
});
if (res.ok) {
sent = true;
form.reset();
}
}
</script>
{#if sent}
<p>Thanks! Your message has been sent.</p>
{:else}
<form onsubmit={onSubmit}>
<label for="name">Name</label>
<input type="text" name="name" id="name" required />
<label for="email">Email</label>
<input type="email" name="email" id="email" required />
<label for="message">Message</label>
<textarea name="message" id="message" required></textarea>
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" aria-hidden="true" />
<button type="submit">Send</button>
</form>
{/if}
Application forms
6Simple job application
A short job application capturing the essentials.
View Svelte code →Rental application
Collect applicant details for a rental property.
View Svelte code →Job application
Standard job application with role and resume details.
View Svelte code →Vendor application
Onboard a new vendor or supplier.
View Svelte code →Employment application
Formal employment application with availability.
View Svelte code →Tenant application
Screen prospective tenants for a unit.
View Svelte code →Contact forms
6Simple contact
A minimal contact form with name, email and message.
View Svelte code →Contact me
Personal contact form for freelancers and creators.
View Svelte code →Contact us
General contact form for a company or team.
View Svelte code →Inquiry
Capture a general inquiry or question.
View Svelte code →Contact sales
Route qualified leads to your sales team.
View Svelte code →Media inquiry
Press and media contact form with deadlines.
View Svelte code →Donation forms
3Feedback forms
9Customer satisfaction survey
Measure customer satisfaction (CSAT).
View Svelte code →Documentation feedback
Collect feedback on docs and help articles.
View Svelte code →NPS survey
Net Promoter Score survey with a 0-10 rating.
View Svelte code →Complaint form
Let customers file a formal complaint.
View Svelte code →Client feedback form
Gather feedback from clients after a project.
View Svelte code →Anonymous feedback
Collect candid feedback without identifying details.
View Svelte code →Event feedback
Get attendee feedback after an event.
View Svelte code →Course evaluation
Evaluate a course and its instructor.
View Svelte code →Open house feedback
Capture visitor impressions after an open house.
View Svelte code →Order forms
6Bakery order
Take custom bakery and cake orders.
View Svelte code →Catering order
Request catering for an event.
View Svelte code →T-shirt order
Order custom or branded t-shirts.
View Svelte code →Change order
Request changes to an existing project or contract.
View Svelte code →Product order
Generic product order form.
View Svelte code →Quote request
Ask for a quote with the service, budget range, timing and project details.
View Svelte code →Registration forms
7Event registration
Register attendees for an event.
View Svelte code →Course enrollment
Enroll students into a course.
View Svelte code →Contest entry
Collect entries for a contest or giveaway.
View Svelte code →Webinar registration
Sign up attendees for a webinar.
View Svelte code →Warranty registration
Register a product for warranty coverage.
View Svelte code →RSVP
Ask invited guests whether they are coming and how many people they bring.
View Svelte code →Customer onboarding
Collect a new client's company, contacts, billing details and goals before kickoff.
View Svelte code →Request forms
12RMA request
Return merchandise authorization request.
View Svelte code →Change request
Submit a change request for review.
View Svelte code →Maintenance request
Report a maintenance or repair issue.
View Svelte code →Purchase request
Request approval to purchase goods or services.
View Svelte code →Creative request
Brief the creative team on a new request.
View Svelte code →Refund request
Request a refund for an order.
View Svelte code →Payment request
Request a payment or invoice settlement.
View Svelte code →Shipping request
Request shipment of an order or item.
View Svelte code →Support request
Open a support ticket.
View Svelte code →GDPR data subject request
Let people ask to see, correct, delete or export the personal data you hold about them.
View Svelte code →Booking request
Take requests for an appointment or session with a preferred date and time to confirm later.
View Svelte code →Document upload
Let customers send a requested document against a case, order or application reference.
View Svelte code →Signup forms
4Email signup
Simple email capture for a mailing list.
View Svelte code →Mailchimp signup
Newsletter signup styled for a Mailchimp audience.
View Svelte code →Klaviyo signup
Newsletter signup for a Klaviyo list.
View Svelte code →Waitlist
Pre-launch waitlist that asks what people want to use the product for.
View Svelte code →