Sync the Current Email Function with React Hook Form and Zod

Combining Zod and React Hook Form for Email Validation

Frontend: React using Zod and React Hook Form

import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
const schema = z.object({
  fullName: z.string().min(1, "Full Name is required"),
  senderEmail: z.string().email("Invalid email address"),
  phone: z.string().min(10, "Phone number is too short"),
  message: z.string().min(1, "Message is required"),
});
const ContactForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema)
  });
  const onSubmit = async (data) => {
    const finalHtml = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    const finalText = renderToStaticMarkup(
      <ContactFormEmail message={data.message} senderEmail={data.senderEmail} />
    );
    try {
      const res = await fetch('/api/sendEmail.json', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          from: 'john@doe.com',
          to: 'john@doe.com',
          subject: 'New message from contact form',
          reply_to: data.senderEmail,
          html: finalHtml,
          text: finalText
        })
      });
    } catch (error) {
      setError('root', { message: error.response.data.message });
    }
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('fullName')} placeholder="Full Name" />
      {errors.fullName && <p>{errors.fullName.message}</p>}
      <input {...register('senderEmail')} placeholder="Email" />
      {errors.senderEmail && <p>{errors.senderEmail.message}</p>}
      <input {...register('phone')} placeholder="Phone" />
      {errors.phone && <p>{errors.phone.message}</p>}
      <textarea {...register('message')} placeholder="Message" />
      {errors.message && <p>{errors.message.message}</p>}
      <button type="submit">Send</button>
    </form>
  );
};
export default ContactForm;

Configuring the Email Sending Backend

Backend: Node.js with Express

const express = require('express');
const nodemailer = require('nodemailer');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
const transporter = nodemailer.createTransport({
  service: 'gmail',
  auth: {
    user: 'your-email@gmail.com',
    pass: 'your-password'
  }
});
app.post('/api/sendEmail.json', (req, res) => {
  const { from, to, subject, reply_to, html, text } = req.body;
  const mailOptions = {
    from, to, subject, replyTo: reply_to, html, text
  };
  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return res.status(500).send({ message: error.message });
    }
    res.status(200).send({ message: 'Email sent successfully' });
  });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Frequently Asked Questions regarding Zod Integration with React Hook Form

1. How can I combine Zod with React Hook Form?
2. To link Zod validation with React Hook Form, use the zodResolver function from the @hookform/resolvers/zod package.
3. Why does renderToStaticMarkup exist?
4. React components can be transformed into static HTML strings using renderToStaticMarkup, which can then be utilized for email content or other static HTML requirements.
5. How can I use React Hook Form to manage form submissions?
6. To manage form submissions and verify data before processing it, use the handleSubmit function from React Hook Form.
7. What does nodemailer.createTransport do?
8. nodemailer.createTransport constructs a transport object using the credentials of a given service in order to deliver emails.
9. Why is validation on the server side crucial?
10. Server-side validation protects against fraudulent inputs and guarantees the validity of the data received by the server.

Concluding Remarks about Form Submission and Validation

You may improve data consistency and user experience in your React applications by integrating Zod with React Hook Form for form validation. You may build a reliable form submission handling system by utilizing Node.js and Express to combine server-side processing with client-side validation. This methodology guarantees appropriate validation and secure processing of the data, hence mitigating errors and enhancing reliability. By putting these strategies into effect, you may greatly enhance your web forms' security and functionality.