Creating a Functional Bootstrap 5 Contact Form

A step-by-step guide for creating working Bootstrap 5 contact forms with validation using the SB Forms service

July 19, 2021 by David Miller
guideforms

In this guide we will be creating a custom HTML contact form using Bootstrap 5 and adding functionality to the form using our form service, SB Forms. After following these steps, you will have a functional contact form ready to receive submissions to an email address of your choice with validation and spam protection included.

The only requirement is a basic understanding of HTML and the Bootstrap framework. No PHP, custom JavaScript, or any other form of backend integration is required! The markup is just plain and simple Bootstrap with a handful of data attributes, class names, and ID’s to pay attention to which we will cover here in this guide.

Creating the Form HTML

Our SB Forms service supports the following form field types:

  • Text inputs
  • Email inputs
  • Textareas
  • Selects
  • Radios
  • Checkboxes
  • Switches

In this guide, we will cover creating a form with only text, email, and a textarea form fields, but you can use any of the above input types as well.

Let’s start with the form element and a handful of Bootstrap 5 form fields.

In the above example, we have a container with some padding to wrap the form, and we have two form inputs, one for a name and another for an email address, a textarea for a message, and a submit button.

Make sure your form has an ID as well. In the above example, the ID is set to #contactForm.

Notice that the form fields use Bootstrap's .form-control component, and the form also has labels for each form field. The submit button has the type="submit" attribute, and is styled using Bootstrap's button component. It is wrapped in the .d-grid grid utility to make it appear as a block style button as well!

Adding Validation Attributes and Elements

We’ve made adding validation to your forms easy with SB Forms, and the process doesn’t involve any JavaScript! We've created a data-sb-validations data attribute which can be added to your form inputs. After the data-sb-validations data attribute has been added to any form input you want to be required, set the value of the attribute to required as well.

For an email address field, you can also add the email value to the attribute, separated by a comma, to validate that the email address is formatted correctly. We've built upon the form example in the first step below, where the validation attributes have been added to the form. Notice the difference in the values within the name field and email field validations.

Now that the validation data attributes have been added to your inputs, we need to add elements for the feedback messages to appear. This is done by using the .invalid-feedback class, which is included with Bootstrap 5, along with the data-sb-feedback data attribute attached to that element. Within this data attribute, set the value to the ID of the form field and required, separated by a colon. So, for example, the data attribute on the feedback element of the name input would appear as data-sb-feedback=”name:required”. Reference the updated form example below to see these feedback elements and their corresponding data attributes.

In this step, we will also add two more elements for providing the user with feedback when the form is submitted. There are two types of feedback needed, a success message and an error message. Do this by creating two new elements right before the submit button with the #submitSuccessMessage and #submitErrorMessage ID, respectively. Also add the .d-none utility class to those elements. This utility will be toggled by our SB Forms script that we will be adding in the last step.

We’ve also added the .disabled class and the #submitButton ID to the form submit button component, which will become enabled when the form passes validation and is ready to submit!

Integrate with SB Forms

Now that the form is set up, there are two more steps to complete to integrate with the SB Forms service, which will add functionality to the form. First, you will need to add a link to the SB Forms JavaScript file below your form before the closing </html> tag on your page, which you can see added in the next iteration of our form example below. You will also need to add the data-sb-form-api-token data attribute to the <form> element, which is where you will enter your API token after signing up for a subscription to SB Forms.

Take a look at the results below, which you can now test out! The validation and submission functionality are now working now that the SB Forms script has been linked, and all of the ID’s and data attributes have been properly added.

At this point you can test the form, but the submission is not going to be sending anywhere. The final step is to sign up for an SB Forms API token on Start Bootstrap. The subscription service is only $5 per month, and allows up to 500 form submissions per month. If you think you are going to go over the limit, no worries! You are automatically charged an extra $1 for each additional 100 submissions, so you only pay for what you use.

Once you sign up, you will be directed to your account on Start Bootstrap where you will be prompted to enter the domain name on which you will be using the form, and you will be able to set the email address that you want to receive your form submissions to. You will also be able to track how many submissions your form has received on your dashboard.

For more customization options, you can check out our Bootstrap form builder, which will help you create Bootstrap 5 forms that are ready pre-integrated with our forms service. You can also use select menus, checkboxes, and other input types which are included with the form builder!

Hopefully this guide will help you get started with working Bootstrap 5 contact forms on your website!



David Miller

David Miller

David Miller is the creator and founder of Start Bootstrap. He is a front end web designer working out of Orlando, Florida.