ReusableForms v2.0 beta

HTML5 popup contact form

A simple HTML5 popup contact form
Here is a simple popup form. When you click on a button, it pops up a form where the user can enter details and then submit the form. The code is based on bootstrap framework so it is easy to integrate with your website if you are using Bootstrap already. Follow the instructions to integrate this form with your website.

Code


        
<div class="container-box rotated">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#popupModal">
    Contact Us
</button>
</div>

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

<style>

.container-box
{
	display:inline-block; 
	padding:10px; 
	background: rgba(255, 255, 255, .8);
	border: 1px solid #fff;	
	position: fixed;
  	top: 15%;
  	left: 0;

}

.rotated
{
	-moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    transform-origin: top left;  
}
</style>
      

How to Use

Simply copy the code to your web page HTML.

Back-end processing and record keeping

You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:

Using Ratufa backend

  • Go to ratufa.io
  • Press the "Connect your form" button
  • Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
  • Test your form. Ratufa will display the submissions - to the right side
  • Copy the combined code to your web page
Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.