This guide covers how to setup our SB Forms contact form solution when using a template or theme created by Start Bootstrap.
All of our templates and themes that include forms are already setup to use the data attributes specific to our form service, so setup is a lot easier! Just follow these easy steps.
If you are using SB Forms with your own custom HTML, go to our SB Forms Advanced Setup Guide.
Step 1: Subscribe to SB Forms
First, you will need an active subscription to SB Forms to receive an Access Key. To sign up, visit SB Forms Signup Page.
Add your Domain Name
Once your subscription is active, you will be directed to your Start Bootstrap account where you will see information about your forms in your dashboard. At this point, you will be prompted to enter the domain name that you will be using for your contact form.
After entering your domain name, you will then be able to copy your Access Key.
Add your Form Submission Email
Your form submission email address will be set by default to the email address used to create your account. If you wish to change this, you can do so on your account page by changing the value in the 'Form Submission Email' input and then saving the changes.
This is where your contact form will submit messages to.
Step 2: Add your Access Key to your Form
Once your subscription is active and you have entered your domain name, your access key will be available
Copy your Access Key from your dashboard by clicking on it (you will receive a notification
that it has been copied). Then, paste it into the
data-sb-form-api-token data attribute in
Look for the following code block in your theme's HTML:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
API_TOKEN with the Access Key that you copied from your account.
After doing this, the form will be functional, and submissions will be accepted and sent to the email address you have set in your SB Forms account!
After setting up your form, you may wish to do some basic customization to the form itself, like adding or removing inputs. Reference the below documentation to customize your forms!
Adding New Form Inputs
Our Start Bootstrap templates and themes include pre-built forms with commonly used inputs. You can also add new inputs quickly and easily if needed! The best way to do this is to copy one of the existing inputs in your form and changing the input's ID and corresponding validation feedback. For example, to add a new input to the form which allows a user to enter their occupation, you could use the following:
<!-- Example new input --> <div class="form-floating mb-3"> <input class="form-control" id="occupation" type="text" placeholder="Enter your occupation..." data-sb-validations="required"> <label for="occupation">Occupation</label> <div class="invalid-feedback" data-sb-feedback="occupation:required">A occupation is required.</div> </div>
Notice the input ID, label, and
data-sb-feedback attribute all include the new 'occupation' ID.
The example above is using the
data-sb-validations="required" attribute to add validation
to that input. It also includes a feedback element which will show when the field is not filled.
Inputs without Validation
You can also remove validation from inputs. To do this, simple remove the
attribute, and remove the feedback element. Using the above example, without validation, would look
<!-- Example new input without validation --> <div class="form-floating mb-3"> <input class="form-control" id="occupation" type="text" placeholder="Enter your occupation..."> <label for="occupation">Occupation</label> </div>
Do this when you want a form field to be optional.
Supported Input Types
SB Forms currently supports normal
<input> elements (including range sliders, checkboxes, radio inputs),
<textfield> element, and
<select> elements. SB Forms does not support file uploading, or other
custom form elements.
Deleting Form Inputs
If there is an input you wish to delete, simple remove the entire input from your HTML. The scripts will no longer read this input. That's it! There are no scripts or other code you need to update.
Testing the Form
In your SB Forms account, you will see a button to the right of your access key that will allow you to test your form. This will send an email to your form submission email address with a simple test message to verify that the form is working properly.
You can also test the form by making submissions on your live contact form, and you can even test your form on localhost during development! Remember that these test submissions do count towards the number of submissions you are allowed per month.
Form Submission Limits
We limit the number of contact form submissions to 500 per month, but if you go over that number, we will automatically bill you an additional $1 for every additional 100 submissions that you need so you're only paying for what you use after 500 submissions!