SB Forms Setup with Custom HTML (Advanced)
Advanced setup guide for using SB Forms with your own custom HTML
SB Forms also works when using your own custom HTML. There are a few things you will need to include when setting up your form. Follow this guide step by step to create a demo form that you can then customize!
If you are using one of Start Bootstrap's pre-built themes or templates, visit the SB Forms Basic 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: Create your form and add your Access Key
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, add the access key to your <form>
element using the
data-sb-form-api-token
data attribute and give your form the #contactForm
ID.
Here is an exmaple of what your form will look like after this first step:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
...
</form>
In the example above, API_TOKEN
should be the Access Key that you copied from your account.
Step 3: Add Inputs to your Form
When adding an input to your form, the inputs ID will be what our scripts will read in order to generate the email. First, add an input to your form with a specific ID, like so:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<input id="name" type="name" placeholder="Enter your name...">
</form>
The above code is an example of an input that would collect your users name.
Supported Input Types
SB Forms currently supports normal <input>
elements (including range sliders, checkboxes, radio inputs),
the <textfield>
element, and <select>
elements. SB Forms does not support file uploading, or other
custom form elements.
Step 4: Add Input Validation
If you wish to add validation to your form inputs, you can do so using our data attributes. Continuing the
example above, you would add validation by setting the value of the data-sb-validations
attribute to required
.
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<input id="name" type="name" placeholder="Enter your name..." data-sb-validations="required">
</form>
After setting the validation state to required, you will need to add an area for the validation feedback
to appear using the data-sb-feedback
attribute. The value in this attribute will use the input ID with
the required state (separated by a colon). For example:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<input id="name" type="name" placeholder="Enter your name..." data-sb-validations="required">
<div data-sb-feedback="name:required">A name is required.</div>
</form>
Step 5: Add a Submit Button
The last part of the form setup before linking to our scripts is assing the form submit button. Use
the #submitButton
ID so our scripts know which button is being used to submit the form. In the code,
it will look something like this:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<input id="name" type="name" placeholder="Enter your name..." data-sb-validations="required">
<div data-sb-feedback="name:required">A name is required.</div>
<button class="disabled" id="submitButton" type="submit">Send Message</button>
</form>
Step 6: Add Success/Failure Form Messages
After the form is submitted, our system displays a confirmation that the form has been sent.
To set this up, use the #submitSuccessMessage
and #submitErrorMessage
ID's with the
.d-none
class added to them. After adding these, the form will look something like this:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<input id="name" type="name" placeholder="Enter your name..." data-sb-validations="required">
<div data-sb-feedback="name:required">A name is required.</div>
<div class="d-none" id="submitSuccessMessage">Form submission successful!</div>
<div class="d-none" id="submitErrorMessage">Form submission failed!</div>
<button class="disabled" id="submitButton" type="submit">Send Message</button>
</form>
You can modify the text that is shown as you see fit!
Step 6: Link to the SB Forms Scripts
Next you need to link to our form scripts to make the form functional. In your template or theme,
link to the SB Forms CDN right befor the closing </body>
tag on the page. Use the following:
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
Once your form is complete, it will look something like this after taking all of the steps above:
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<input id="name" type="name" placeholder="Enter your name..." data-sb-validations="required">
<div data-sb-feedback="name:required">A name is required.</div>
<div class="d-none" id="submitSuccessMessage">Form submission successful!</div>
<div class="d-none" id="submitErrorMessage">Form submission failed!</div>
<button class="disabled" id="submitButton" type="submit">Send Message</button>
</form>
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
Reference
Many of our free templates and themes on Start Bootstrap use SB Forms, and the markup within the Pug and HTML are the same. You can refer to our themes for reference in addition to this guide. For example, our Business Frontpage theme has a form setup here.
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!