@beantech-designs/contact-form
v2.0.0
Published
A react hook for handling beantech's contact us mailing
Downloads
47
Maintainers
Readme
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: "[email protected]",
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.