Skip to main content

Use Cases

Discover how to use Form Guardian in real-world scenarios. From quick examples to advanced recipes.

📝 Quick Examples​

Simple examples to get you started:

🎯 Common Patterns​

Frequently used patterns:

🔥 Advanced Recipes​

Complex scenarios and solutions:

Basic Contact Form​

import { useFormAutosave } from '@form-guardian/react';

function ContactForm() {
  const { formRef, hasDraft, clearDraft } = useFormAutosave('contact-form', {
    autoRestore: true,
  });

  return (
    <form ref={formRef} onSubmit={async (e) => {
      e.preventDefault();
      await clearDraft();
      // Submit...
    }}>
      {hasDraft && <div>Draft found!</div>}
      <input name="name" placeholder="Name" />
      <input name="email" type="email" placeholder="Email" />
      <textarea name="message" placeholder="Message" />
      <button type="submit">Send</button>
    </form>
  );
}

Registration Form​

import { useForm } from 'react-hook-form';
import { useFormAutosave } from '@form-guardian/react';
import { useEffect } from 'react';

function RegistrationForm() {
  const { register, handleSubmit, setValue, getValues, watch } = useForm();
  const { formRef, restoreValues, clearDraft, saveValues } = useFormAutosave(
    'registration',
    { autoRestore: false }
  );

  useEffect(() => {
    restoreValues(setValue, getValues);
  }, []);

  useEffect(() => {
    const subscription = watch(() => saveValues());
    return () => subscription.unsubscribe();
  }, [watch]);

  return (
    <form ref={formRef} onSubmit={handleSubmit(async (data) => {
      await clearDraft();
      // Register user...
    })}>
      <input {...register('username')} placeholder="Username" />
      <input {...register('email')} type="email" placeholder="Email" />
      <input {...register('password')} type="password" placeholder="Password" />
      <button type="submit">Register</button>
    </form>
  );
}

Survey Form​

<script type="module">
  import { attachFormAutosave } from '@form-guardian/dom';

  const form = document.getElementById('survey-form');
  const autosave = attachFormAutosave({
    formId: 'survey-2024',
    root: form,
    autoRestore: true,
    ttl: { days: 30 }, // Survey drafts expire after 30 days
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    
    await fetch('/api/survey', {
      method: 'POST',
      body: formData,
    });
    
    await autosave.clear();
    alert('Thank you for completing the survey!');
  });
</script>

<form id="survey-form">
  <fieldset>
    <legend>Question 1</legend>
    <input type="radio" name="q1" value="yes" id="q1-yes">
    <label for="q1-yes">Yes</label>
    <input type="radio" name="q1" value="no" id="q1-no">
    <label for="q1-no">No</label>
  </fieldset>

  <fieldset>
    <legend>Question 2</legend>
    <textarea name="q2" rows="4"></textarea>
  </fieldset>

  <button type="submit">Submit Survey</button>
</form>

Next Steps​