Uncategorized How to Create Forms Using Bootstrap 5 and Collect Data on Static.app – Designmodo
BootstrapSam Norton • January 19, 2022 • 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:
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.
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.
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.
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
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:
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:
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.
With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
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.
Our complete markup should look exactly like this:
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.
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.
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.
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.
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.
Now, if you visit your website, you’ll see something like the image below in your browser:
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.
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.
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.
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.
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.
You can also delete an item or mark an item as spam by clicking on the “Mark as Spam” or “Remove” link.
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.
Sam is a web designer and a front web developer with over 5 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics.
Sign up to get fresh stuff in your email monthly. For those who want to keep in touch with web design and development trends and tools.
We create beautiful website and email builders, helping 30,000 customers to grow their business.
A simple tool to create emails and newsletters.
Create an animated website in minutes.
A perfect tool to create Bootstrap website.
Earn 25% commission on affiliate sales. We have everything you need to make money.
Whether you’re an experienced web designer, developer, marketer, or a newbie looking to learn the basics, there’s something for everyone on this blog.
28 articles
13 articles
32 articles
47 articles
20 articles
23 articles
5 articles
4 articles
23 articles
77 articles
18 articles
91 articles
82 articles
24 articles
9 articles
18 articles
121 articles
24 articles
19 articles
7 articles
17 articles
9 articles
85 articles
10 articles
11 articles
4 articles
16 articles
22 articles
We’re always looking for new authors. We’re happy to publish useful articles and tutorials related to web design.
Made by Designmodo.
This website design and code was built using our tools. Treat it as a proof of concept.
Subscribe now to receive discounts, news, and updates. We pinky swear to not spam you. 😉
Copyright © 2010-2022. All Rights Reserved
We use cookies to ensure that we give you the best experience on our website. Privacy Statement.
Your cart is empty 🙀
Get started with the most advanced email builder for your next campaign or newsletter.
A perfect tool to create website or prototype projects. It will fit all kinds of projects.
Create an amazing static website in minutes and export ready-to-use template.
