Modular elements

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 useFormspree. 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 thedata-formattribute on theformtag. Insrc/js/form-processor.js, Formspree is initialized using thedata-formattribute.

<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>