# Emergency contact form template A free online emergency contact form with two contacts, their relationship and phone numbers, and optional medical notes. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This form asks for the person’s name and email, one required contact with their relationship and phone number, an optional second contact, and an optional field for allergies or medication. You can search submissions by name in your inbox. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/emergency-contact-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Full name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Emergency contact name | `contact_name` | Short text | Yes | | Relationship to you | `contact_relationship` | Dropdown (Spouse or partner, Parent, Child, Sibling, Friend, Other) | Yes | | Emergency contact phone | `contact_phone` | Phone | Yes | | Second contact name | `second_contact_name` | Short text | No | | Second contact phone | `second_contact_phone` | Phone | No | | Medical notes | `medical_notes` | Long text | No | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html

Emergency contact

Who should we call if something happens to you?

``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html
``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function EmergencyContactForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks. Your emergency contacts are saved.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function EmergencyContactForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks. Your emergency contacts are saved.

return (
{status === 'error' &&

Something went wrong. Please try again.

}
) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks. Your emergency contacts are saved.

{:else}
{#if status === 'error'}

Something went wrong. Please try again.

{/if}
{/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" ---
``` ## When to use it - Employee onboarding, and the yearly reminder to update details - Schools, daycares and after-school programs - Sports clubs, camps, trips and races - Volunteers, contractors and event staff ## Customize it ### Collect updates by sending the link again Every submission is saved with the date it was sent. When someone fills in the form again, their newest submission is their current contact, and searching the inbox by name shows both. ### Only ask for medical details you need Health information is sensitive personal data under laws like the GDPR. If nobody on your side will act on allergies or medication, delete the notes field. ### Tell teams or groups apart Add `` to each copy of the form, or a select field, so every submission shows which group it came from. ### Keep a copy where you need it Export submissions as CSV on any plan, or on Pro add each one to Google Sheets as it arrives. ## Frequently asked questions ### Is it safe to collect emergency contacts with an online form? The form posts over HTTPS to Nisuform, and submissions are only visible to members of your team in the dashboard. Every account includes a Data Processing Agreement. Ask only for what you need, and make medical notes optional. ### Can I print this emergency contact form? This template is an online form, so people fill it in on a phone or computer. To keep a paper copy, export the answers as CSV and print them from a spreadsheet. ### How do people update their emergency contact? They fill in the form again. Each submission keeps its date, so the newest one for a person is their current contact. ### Can a parent fill it in for a child? Yes. Change the first label to the child’s name and the email label to the parent’s email, so replies go to the parent.