@beantech-designs/contact-form v2.0.0

Beantech Contact Form

A custom hook for handling contact form submission.

Installing

Using npm:

$ npm install @beantech-designs/contact-form

Example

import { useContactForm } from "@beantech-designs/contact-form";

const ContactForm = () => {
  const onSuccess = (data) => {
    console.log(data);
  };

  const onError = (error) => {
    console.log(error);
  };

  const options = {
    url: "http://www.domain.com",
    companyEmailAddress: "companyEmail@company.com",
    onSuccess,
    onError,
    template: (email, fullName, message) => `<h1>Name: ${fullName}</h1>
                                              <h2>Email: ${email}</h2>
                                              <p>${message}</p>
                                            `,
  };

  const { form } = useContactForm(options);
  return (
    <form onSubmit={form.handleSubmit}>
      // fullName
      <div>
        <input
          type="text"
          name="fullName"
          onChange={form.handleChange}
          value={form.values.fullName}
        />
        // validation error message
        {form.touched.fullName && form.errors.fullName ? (
          <div>{form.errors.fullName}</div>
        ) : null}
      </div>
      // Email
      <div>
        <input
          type="email"
          name="email"
          onChange={form.handleChange}
          value={form.values.email}
        />
        // validation error message
        {form.touched.email && form.errors.email ? (
          <div>{form.errors.email}</div>
        ) : null}
      </div>
      // subject
      <div>
        <input
          type="text"
          name="subject"
          onChange={form.handleChange}
          value={form.values.subject}
        />
        // validation error message
        {form.touched.subject && form.errors.subject ? (
          <div>{form.errors.subject}</div>
        ) : null}
      </div>
      // message
      <div>
        <textarea
          name="message"
          onChange={form.handleChange}
          value={form.values.message}
        ></textarea>
        // validation error message
        {form.touched.message && form.errors.message ? (
          <div>{form.errors.message}</div>
        ) : null}
      </div>
      <input type="submit" value="Submit" disabled={form.isSubmitting} />
    </form>
  );
};

useContactForm(options)

options

• url: required - Mail server endpoint.
• companyEmailAddress: required - Email address of the host company.
• onSuccess: required - Function to be called if email was successfully sent.
• onError: required - Function to be called if an error occured when sending email.
• template: optional - HTML template to render as email template.