<div class="mb-2 fw-light">
Click the button below to open the form
</div>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#popupModal">
Contact Us
</button>
<!-- Popup Modal-->
<div class="modal fade" id="popupModal" tabindex="-1" aria-labelledby="popupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="popupModalLabel">Contact Us</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="contact_form" name="contact_form" method="post">
<div class="mb-5">
<label for="email_addr">Email address</label>
<input type="email" required maxlength="50" class="form-control" id="email_addr" name="email"
placeholder="name@example.com">
</div>
<div class="mb-5">
<label for="name_input">Name</label>
<input type="text" required maxlength="50" class="form-control" id="name_input" name="name"
placeholder="Name">
</div>
<div class="mb-5">
<label for="phone_input">Phone</label>
<input type="tel" required maxlength="50" class="form-control" id="phone_input" name="Phone"
placeholder="Phone">
</div>
<div class="mb-5">
<label for="message">Message</label>
<textarea class="form-control" id="message" name="message" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
To seamlessly integrate the form code from ReusableForms.com into your web page, follow these simple steps:
The form code provided above is for the client side only. To fully benefit from the form's features, you'll need a back-end form processor. Ratufa is one such service, and integrating with it is straightforward. Watch the video demo for a step-by-step example.
To receive email notifications upon form submissions, store submission records, and search through them later, you'll need a back-end processor. Here's how to set one up: