Are you building a Next.js application and need a simple way to handle form submissions without setting up a backend server? StaticForms.xyz is the perfect solution for collecting form data from your static sites and receiving submissions directly in your inbox. In this guide, we'll explore how to integrate the StaticForms service with your Next.js application, including both basic implementation and enhanced security with reCAPTCHA. ## What is StaticForms? StaticForms is a form-to-email service designed specifically for static websites. It allows you to receive form submissions via email without writing any server-side code. This is particularly useful for: - Contact forms - Feedback forms - Newsletter signups - Simple data collection The service is free to use (with some limitations) and provides a straightforward API for integrating forms into your static website. ## Getting Started with StaticForms Before implementing forms in your Next.js app, you'll need to: 1. Visit [staticforms.xyz](https://www.staticforms.xyz) 2. Register for a free account 3. Obtain your unique API key This API key will be used to connect your forms to your StaticForms account, ensuring submissions are forwarded to your email address. ## Basic Integration in Next.js Let's start by implementing a simple contact form without reCAPTCHA. This approach is quick to set up but offers less protection against spam. ### Create a Client Component for Your Form ```tsx // app/components/contact-form.tsx "use client"; import { useState } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; export default function ContactForm() { const [formData, setFormData] = useState({ name: "", email: "", message: "", subject: "Contact Form Submission", // Default subject honeypot: "", // Anti-spam field replyTo: "@", // This will set replyTo to the email provided apiKey: "YOUR_API_KEY" // Replace with your actual API key }); const [response, setResponse] = useState({ type: "", message: "" }); const [isSubmitting, setIsSubmitting] = useState(false); const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); try { const res = await fetch("https://api.staticforms.xyz/submit", { method: "POST", body: JSON.stringify(formData), headers: { "Content-Type": "application/json" } }); const json = await res.json(); if (json.success) { setResponse({ type: "success", message: "Thank you for your message! We'll get back to you soon." }); // Reset form fields setFormData({ ...formData, name: "", email: "", message: "" }); } else { setResponse({ type: "error", message: json.message || "An error occurred. Please try again." }); } } catch (error) { console.error("Error submitting form:", error); setResponse({ type: "error", message: "An error occurred while submitting the form. Please try again." }); } finally { setIsSubmitting(false); } }; return (

{response.type === "success" ? (

{response.message}

) : response.type === "error" ? (

{response.message}

) : null}

{/* Honeypot field to prevent spam */}

Name

Message

</div>

<Button
          type="submit"
          disabled={isSubmitting}
          className="w-full"
        >
          {isSubmitting ? "Sending..." : "Send Message"}
        </Button>
      </form>
    </div>
  );
}
```

### Use the Form Component in Your Page

```tsx
// app/contact/page.tsx
import ContactForm from "@/app/components/contact-form";

export const metadata = {
  title: "Contact Us",
  description: "Get in touch with our team"
};

export default function ContactPage() {
  return (
    <div className="container mx-auto py-12">
      <h1 className="text-3xl font-bold mb-8 text-center">Contact Us</h1>
      <ContactForm />
    </div>
  );
}
```

## Enhanced Integration with reCAPTCHA

For better protection against spam and bot submissions, we can add Google reCAPTCHA to our form. This requires a few additional steps:

1. Register for reCAPTCHA at [Google reCAPTCHA](https://www.google.com/recaptcha/admin) and get your site key
2. Add the reCAPTCHA component to your form

### Contact Form with reCAPTCHA

```tsx
// app/components/contact-form-with-recaptcha.tsx
"use client";

import { useState, useRef } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import ReCAPTCHA from "react-google-recaptcha";

export default function ContactFormWithRecaptcha() {
  const recaptchaRef = useRef<ReCAPTCHA>(null);
  
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
    subject: "Contact Form Submission",
    honeypot: "",
    replyTo: "@",
    apiKey: "YOUR_API_KEY", // Replace with your actual API key
    "g-recaptcha-response": "" // Will be filled programmatically
  });

const [response, setResponse] = useState({
    type: "",
    message: ""
  });

const [isSubmitting, setIsSubmitting] = useState(false);

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

const handleRecaptchaChange = (token: string | null) => {
    setFormData({
      ...formData,
      "g-recaptcha-response": token || ""
    });
  };

const json = await res.json();

if (json.success) {
        setResponse({
          type: "success",
          message: "Thank you for your message! We'll get back to you soon."
        });
        // Reset form fields
        setFormData({
          ...formData,
          name: "",
          email: "",
          message: "",
          "g-recaptcha-response": ""
        });
        // Reset reCAPTCHA
        if (recaptchaRef.current) {
          recaptchaRef.current.reset();
        }
      } else {
        setResponse({
          type: "error",
          message: json.message || "An error occurred. Please try again."
        });
      }
    } catch (error) {
      console.error("Error submitting form:", error);
      setResponse({
        type: "error",
        message: "An error occurred while submitting the form. Please try again."
      });
    } finally {
      setIsSubmitting(false);
    }
  };

return (
    <div className="w-full max-w-md mx-auto">
      {response.type === "success" ? (
        <div className="p-4 mb-4 text-sm rounded-md bg-green-50 text-green-700">
          {response.message}
        </div>
      ) : response.type === "error" ? (
        <div className="p-4 mb-4 text-sm rounded-md bg-red-50 text-red-700">
          {response.message}
        </div>
      ) : null}

<form onSubmit={handleSubmit} className="space-y-4">
        {/* Honeypot field to prevent spam */}
        <input
          type="text"
          name="honeypot"
          style={{ display: "none" }}
          onChange={handleChange}
        />

{/* Invisible reCAPTCHA */}
        <ReCAPTCHA
          ref={recaptchaRef}
          size="invisible"
          sitekey="YOUR_RECAPTCHA_SITE_KEY" // Replace with your reCAPTCHA site key
          onChange={handleRecaptchaChange}
        />

<div>
          <label htmlFor="email" className="block text-sm font-medium mb-1">
            Email
          </label>
          <Input
            id="email"
            name="email"
            type="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </div>

<div>
          <label htmlFor="message" className="block text-sm font-medium mb-1">
            Message
          </label>
          <Textarea
            id="message"
            name="message"
            rows={4}
            value={formData.message}
            onChange={handleChange}
            required
          />
        </div>

### Installing Required Dependencies

Don't forget to install the necessary packages:

```bash
npm install react-google-recaptcha
# or
bun add react-google-recaptcha
```

## Using Environment Variables for API Keys

For better security, it's recommended to use environment variables for your API keys instead of hardcoding them in your components:

1. Create a `.env.local` file in your project root:

```
NEXT_PUBLIC_STATICFORMS_API_KEY=your_staticforms_api_key
NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your_recaptcha_site_key
```

2. Update your components to use these environment variables:

```tsx
// In your form component
apiKey: process.env.NEXT_PUBLIC_STATICFORMS_API_KEY
```

```tsx
// In your reCAPTCHA component
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
```

## Advanced Configuration Options

StaticForms offers several additional configuration options for enhancing your forms:

### Custom Success/Error Redirects

You can specify custom URLs to redirect users after form submission:

```tsx
const [formData, setFormData] = useState({
  // ...other fields
  redirectTo: "https://yoursite.com/thank-you",
  apiKey: "YOUR_API_KEY"
});
```

### Custom Fields

You can add custom fields to your form by prefixing the field name with `$`:

```tsx
<div>
  <label htmlFor="company" className="block text-sm font-medium mb-1">
    Company
  </label>
  <Input
    id="company"
    name="$company" // Note the $ prefix
    type="text"
    value={formData.$company}
    onChange={handleChange}
  />
</div>
```

## Troubleshooting Common Issues

### Form Submissions Not Received

If you're not receiving form submissions:

1. Double-check your API key is correct
2. Make sure your email address is verified with StaticForms
3. Check your spam folder

### reCAPTCHA Not Working

If reCAPTCHA isn't functioning properly:

1. Verify your site key is correct
2. Ensure your domain is listed in the reCAPTCHA admin console
3. Check for any JavaScript errors in the console

## Conclusion

StaticForms provides a hassle-free solution for handling form submissions in your Next.js applications without the need for a dedicated backend server. By following this guide, you can quickly set up forms with or without reCAPTCHA protection.

For more information about the StaticForms API or further customization options, check out the [official documentation](https://www.staticforms.xyz) or our [previous post about form validation](/blog/understanding-recaptcha).

Remember, while StaticForms is great for simple contact forms and data collection, if you need complex form processing or data storage, you might want to consider a more robust solution with a dedicated backend.

Happy coding! </article></body></html>

Posts tagged “serverless”

Filter by Tag

Using StaticForms with Next.js: A Complete Guide