Form Processor

Form Processor

The form processor is used to send emails from a contact form directly to the owner's Gmail ( or any email) without requiring a backend server. The form is completely handled on the frontend, so you don't need to set up server-side logic. To achieve this, you can use Formspree. It submits the form data to their API endpoint. It allows you to configure the recipient email, handle success and error messages, and integrate email sending seamlessly into your frontend application, Here is the step-by-step way of using this approach.

How to integrate Formspree.

• Create a Formspree Account
  • Go To Formspree website.
  • Sign up with your email.
  • Create a new form in dashboard.
  • Copy the generated Form Endpoint URL
  • The endpoint will look like this:

     https://formspree.io/f/abcdwxyz

• Example

  To enable form submission using Formspree, you need to set the data-form attribute in the form tag. Insrc/js/form-processor.js initialize Formspree using the data-form attribute.

  <form data-form onsubmit="return false">
    <div class="form-group">
      <label class="form-label" for="name">Name</label>
      <input id="name" class="form-control" type="text" name="name" placeholder="Name" />
    </div>
    <div class="form-group">
      <label class="form-label" for="email">Your Email</label>
      <input id="email" class="form-control" type="email" name="from" placeholder="Email" />
    </div>
    <div class="form-group">
      <label for="message">Message</label>
      <textarea id="message" class="form-control" rows="8" name="message" placeholder="Write your message..."></textarea>
    </div>
    <div class="form-group">
      <input class="btn btn-primary d-block w-100" type="submit" value="Send!" />
    </div>
    <div class="feedback mt-3"></div>
  </form>