How to Create Forms Using Bootstrap 5 and Collect Data on Static.app

  • Home
  • Cloud & Data
  • How to Create Forms Using Bootstrap 5 and Collect Data on Static.app
How to Create Forms Using Bootstrap 5 and Collect Data on Static.app
Jan 19, 2022

[ad_1]


• 6 minutes READ

A web form is an HTML form on a web page that allows users to enter their information as required.

Most users interact with websites through the use of HTML forms from which data will be collected by a series of code or programs for a specific purpose. Forms were introduced early on in the development of the World Wide Web before the introduction of e-commerce and remained relevant up to date, due to their simplicity and ease of use. Eventually, improvements have been made over the years to make form handling more functional and easy to use.

Forms are built with one or more form controls which can be single or multi-line text fields such as text area, dropdown boxes, checkboxes, radio buttons and submit buttons (usually comes with <input> element).

Forms enables users to fill in data that are typically sent to a web server for processing, storing, or used on the client-side to interact or update the interface in one way or another.

Form data can be collected or processed in several ways either via:

  • a client-side programming language (such as JavaScript and related frameworks)
  • a server-side programming language (such as PHP, Ruby and Python)
  • Or any programming language or platform that can handle form data collection.

In this tutorial, I will show you how you can create your own html form in the form of a simple contact page with Bootstrap 5 and Sweet Alert 2. Then, we will use the Static.app static-form feature to collect, access and manage form data within the Static.app platform.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

Creating a Form on Bootstrap 5

Let’s start creating  a simple contact page with a contact form in it using Bootstrap 5. We will create a two column contact page where we will place an image on the left column and place the contact form on the right column.

File Structure

Before we start, let’s create the necessary files and folders. Our contact page project will have the following files and folders following this composition:

root/
|—css/
|——style.css
|—js/
|——script.js
|—index.html

Basic markup

For this project, we will not download the necessary library/framework files that we need locally. Instead, we will use the Content Delivery Network (CDN) versions. To be precise, we will use Bootstrap 5 and Sweet Alert 2 CDN’s on our markup. Moreover, we will also add our local file link for our style.css and script.js.

With this in mind, inside the index.html file, we need to add the following codes:


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="contact form" />
      <meta name="author" content="Sam Norton" />
      <title>Contact Page</title>
      <!-- GOOGLE WEB FONT -->
      <link
         href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;500;600;700&display=swap"
         rel="stylesheet"
         />
      <!-- BOOTSTRAP 5 -->
      <link
         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous"
         />
      <script
         src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous"
         ></script>
      <!-- SWEET ALERT 2 -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
      <!-- CUSTOM CSS -->
      <link href="css/style.css" rel="stylesheet" />
   </head>
   <body>
      <!--- Main content here →
      <script src="js/script.js"></script>
   </body>
</html>


Container and Two Columns

Next, let’s create a div with a .container-fluid class that is set to display two six grid columns. The left column will have a background image via the .background-image class and on the right column will have the contact form itself. We will also set some utility classes for spacing and display.

Note: I won’t go specific on what each Bootstrap 5 classes do since I’ve written separate tutorials about Bootstrap 5 already. You can read my articles below to learn more:


<div class="container-fluid p-0">
   <div class="row no-gutters row-height">
      <div class="col-lg-6 background-image d-sm-none d-md-block"></div>
      <div class="col-lg-6 d-flex flex-column content-right">
         <div class="container my-auto py-5">
            <div class="row">
               <div class="col-lg-9 col-xl-7 mx-auto">
               </div>
            </div>
         </div>
      </div>
   </div>
</div>


Contact Form

Now, on the right column, we will add the bootstrap form along with its supporting classes. Notice that on the <form> tag we added the code static-form and static-form-id=”contact_form” attribute.  The static-form attribute lets you collect any data from forms. While static-form-id=”contact_form” will create a new database called “contact_form” where all of our data submissions will be stored.


<h3 class="mb-5">Contact Form</h3>
<form static-form static-form-id="contacts" class="form-container" id="form">
   <div class="mt-4">
      <label for="name" class="form-label">Complete Name</label>
      <input type="text" name="name" id="name" class="form-control" required />
   </div>
   <div class="mt-4">
      <label for="email" class="form-label">Email Address</label>
      <input type="email" name="email" id="email" class="form-control" required />
   </div>
   <div class="mt-4">
      <label for="message" class="form-label">Message</label>
      <textarea name="message" id="message" class="form-control" required></textarea>
   </div>
   <div class="mt-4 mb-4">
      <div class="form-check">
         <input
            type="checkbox"
            class="form-check-input"
            name="agree"
            id="agree"
            required
            />
         <label class="form-check-label fw-bold" for="agree"
            >I agree to the
         <a href="#" data-bs-toggle="modal" data-bs-target="#term-modal"
            >Terms & Conditions</a
            >
         </label>
         <div class="invalid-feedback checkbox">
            You need to agree with Terms & Conditions!
         </div>
      </div>
   </div>
   <button class="send" type="submit">Send</button>
</form>
</div>


Additionally, we will add a simple Bootstrap 5 modal for our Terms & Conditions. This will be triggered once the user clicks on the Terms and conditions link.


<div
   class="modal fade"
   id="term-modal"
   tabindex="-1"
   role="dialog"
   aria-labelledby="termsHead"
   aria-hidden="true"
   >
   <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="termsHead">Terms & Conditions</h4>
         </div>
         <div class="modal-body">
            <p class="lh-base">
               Welcome to our website. If you continue to submit this form, you are agreeing to
               comply with and be bound by certain terms and conditions of use, including the
               collection of your information which together with our privacy policy govern
               relationship with you in relation to this website. If you think this is not something
               you want to do, please do not submit the form.
            </p>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>


Our complete markup should look exactly like this:


<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="description" content="contact form" />
      <meta name="author" content="Sam Norton" />
      <title>Contact Form</title>
      <!-- GOOGLE WEB FONT -->
      <link
         href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;500;600;700&display=swap"
         rel="stylesheet"
         />
      <!-- BOOTSTRAP 5 -->
      <link
         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
         crossorigin="anonymous"
         />
      <script
         src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
         crossorigin="anonymous"
         ></script>
      <!-- SWEET ALERT 2 -->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
      <!-- CUSTOM CSS -->
      <link href="css/style.css" rel="stylesheet" />
   </head>
   <body>
      <div class="container-fluid p-0">
         <div class="row no-gutters row-height">
            <div class="col-lg-6 background-image d-sm-none d-md-block"></div>
            <div class="col-lg-6 d-flex flex-column content-right">
               <div class="container my-auto py-5">
                  <div class="row">
                     <div class="col-lg-9 col-xl-7 mx-auto">
                        <h3 class="mb-5">Contact Form</h3>
                        <form static-form static-form-id="contacts" class="form-container" id="form">
                           <div class="mt-4">
                              <label for="name" class="form-label">Complete Name</label>
                              <input type="text" name="name" id="name" class="form-control" required />
                           </div>
                           <div class="mt-4">
                              <label for="email" class="form-label">Email Address</label>
                              <input type="email" name="email" id="email" class="form-control" required />
                           </div>
                           <div class="mt-4">
                              <label for="message" class="form-label">Message</label>
                              <textarea name="message" id="message" class="form-control" required></textarea>
                           </div>
                           <div class="mt-4 mb-4">
                              <div class="form-check">
                                 <input
                                    type="checkbox"
                                    class="form-check-input"
                                    name="agree"
                                    id="agree"
                                    required
                                    />
                                 <label class="form-check-label fw-bold" for="agree"
                                    >I agree to the
                                 <a href="#" data-bs-toggle="modal" data-bs-target="#term-modal"
                                    >Terms & Conditions</a
                                    >
                                 </label>
                                 <div class="invalid-feedback checkbox">
                                    You need to agree with Terms & Conditions!
                                 </div>
                              </div>
                           </div>
                           <button class="send" type="submit">Send</button>
                        </form>
                     </div>
                  </div>
               </div>
               <div class="container pb-3 copyright-text">© 2021 Contact Form - All Rights Reserved</div>
            </div>
         </div>
      </div>
      <div
         class="modal fade"
         id="term-modal"
         tabindex="-1"
         role="dialog"
         aria-labelledby="termsHead"
         aria-hidden="true"
         >
         <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title" id="termsHead">Terms & Conditions</h4>
               </div>
               <div class="modal-body">
                  <p class="lh-base">
                     Welcome to our website. If you continue to submit this form, you are agreeing to
                     comply with and be bound by certain terms and conditions of use, including the
                     collection of your information which together with our privacy policy govern
                     relationship with you in relation to this website. If you think this is not something
                     you want to do, please do not submit the form.
                  </p>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
               </div>
            </div>
         </div>
      </div>
      <script src="js/script.js"></script>
   </body>
</html>


CSS Styles

Next, let’s add our CSS styles via the style.css file. Our contact page will have a minimalistic style. We will start by adding general styles which include stylings for basic HTML tags such as the anchor tag and label. Then, we’ll go over and add our custom utility, input fields and buttons styles. Lastly, we’ll also add basic transition styles to create smooth hover effects on our links and buttons.


/* General */

html,
body {
	height: 100%;
	overflow: hidden;
}

body {
	font-family: "Poppins", sans-serif;
	background: #fff;
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgb(56, 56, 56);
}

label {
	font-size: 1rem;
}

p {
	margin-bottom: 30px;
}

a {
	color: #5c51e0;
	outline: none;
	text-decoration: none;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

a:hover,
a:focus {
	color: rgb(140, 134, 212);
	text-decoration: none;
	outline: none;
}


/* Utilities */

.row-height {
	min-height: 100vh !important;
	height: 100vh;
}

.content-right {
	overflow-y: auto;
}

.copyright-text {
	text-align: center;
}

.background-image {
	background-image: url("https://i.imgur.com/NXz5UXg.jpg");
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #ededed;
}

.modal-content .close {
	font-weight: 300;
	font-size: 32px;
	font-size: 2rem;
	outline: none;
}


/* Forms */

.form-control {
	border: 1px solid #dedede !important;
	font-size: 0.9rem;
	height: calc(2.46rem + 2px);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
}

.form-control:focus {
	box-shadow: none;
	border-color: #434bdf;
}

.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder {
	color: rgb(195, 195, 195);
	opacity: 1;
}

.form-container .form-control {
	border: none !important;
	border-bottom: 1px solid #dedede !important;
	padding-left: 0;
	padding-right: 0;
	height: calc(2.2rem);
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	-ms-border-radius: 0 !important;
	border-radius: 0 !important;
}

.form-container .form-control:focus {
	box-shadow: none;
	border-color: #5044ca !important;
}

.form-container .form-group {
	margin-bottom: 30px;
}

#message {
	height: 150px;
}

.form-label {
	font-weight: 600;
}

.form-check-label {
	margin: 3px 0px 0px 15px;
}

input[type="checkbox"] {
	cursor: pointer;
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	padding: 10px;
}

.form-check-input:checked {
	background-color: #5044ca;
	border-color: #5044ca;
	outline: none;
	box-shadow: none;
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
	background-color: #5044ca;
	outline: none;
	box-shadow: none;
}


/* Buttons */

.btn-primary {
	border: none;
	color: #fff;
	background-color: #5c51e0;
	outline: none;
}

.btn-primary:hover,
.btn-primary:focus {
	background-color: #5044ca;
	outline: none;
}

button.send {
	cursor: pointer;
	font-size: 19px;
	font-family: "Poppins";
	overflow: visible;
	position: relative;
	padding-right: 30px;
	display: block;
	cursor: pointer;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 10px 0px;
	background-color: #d9d6f9;
	border: none;
	border-bottom: 4px solid #5c51e0;
	color: #5c51e0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

button.send:hover {
	background-color: #c2bdf3;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}


Sweet Alert 2

Finally, inside our script.js file, let’s add some JavaScript code to enable Sweet Alert 2 which is a JavaScript plugin that enables you to create responsive popup boxes with zero dependencies.

Using JavaScript, we will first, select our form and then add an EventListener interface which will be handled by form submission. Once the form is submitted, it will show an animated success pop-up message.


const formSubmit = document.getElementById("form");
formSubmit.addEventListener("submit", (event) => {
    event.preventDefault();
    Swal.fire("Success!", "Your message was sent!", "success");
});

Host Contact Form on Static.app

Now to see this in action, we need to upload a zipped version of our project to Static.app. To do this, simply click on the “new site” box and it will redirect you to the upload website page as seen in the images below.

Host Contact Form on Static.app
This is a simple contact page made with Bootstrap 5 and Sweet Alert 2

From the upload website page, simply drag-drop the zipped version of the contact page which you can download here to add to your existing website’s list.

Next, we need to provide the title and description for this particular static website. For the sake of the example, I will put a title of “Contact Page” and a description of “This is a simple contact page made with Bootstrap 5 and Sweet Alert 2.” and click on the “Save Changes” button to save our settings as seen in the image below.

Contact details

To view and test our contact page, click on the “Domains” tab on the left menu panel and set up a  free sub-domain for our project as seen in the image below. For the sake of the example, I will simply take the default random generated free sub-domain from Static.app which is sensitive-seagull.static.app. Of course, you can change this to your preferred domain as long as it’s available. If you want to set up your own domain, you need to upgrade your account to a paid account.

Domain name

Now, if you visit your website, you’ll see something like the image below in your browser:

Contact Form Website

Managing Contact Form Submissions

It’s now time to test our contact form. Let’s fill up some information on the contact form and click on the “Send” button. Once the form is submitted, the Sweet Alert 2 animated popup will appear on the screen confirming that the message was sent successfully as seen in the images below.

Managing Contact Form Submissions
Success contact form

In order to check the form submissions, simply click on the “Forms” link on the top menu and you will see the list of form databases that you have in your website.

Forms

Next, if you click on the “contact_form” which is the name of the database that we set on our <form> tag, it will display all of the form submissions under the  contact form that we created.

Contact details on Static.app

If you want to check the contents of each form submission, simply click on the item you want to check and a modal with the form submission information will pop-up.

Contact form submissions on Static.app

Additionally, you can also click on the three vertical dots on the right corner of the item and click on the “View Entry” link which will also do the same thing.

Open details

You can also delete an item or mark an item as spam by clicking on the “Mark as Spam” or “Remove” link.

Remove contacts

Conclusion

Web forms are an essential part of a website, but creating the form layouts or styling the form controls can be quite challenging at times. Bootstrap 5 simplifies the design process of styling of form controls like labels, input fields, selectboxes, textareas, buttons using it’s built-in CSS classes.

On the other hand, Static.app static-form feature makes it easier for you to collect, access and manage any form submission of your choice. Using them together makes your static web development process a lot easier and convenient without having to deal with lots of third-party integration, mail or SMTP server coding and setup.

[ad_2]

NAKISISA GEORGE

Leave a Reply