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.
Creating the Form HTML
Our SB Forms service supports the following form field types:
- Text inputs
- Email inputs
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
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
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
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
#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,
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!