SB Forms Setup with Start Bootstrap Templates and Themes

Setting up SB forms when using a template or theme from Start Bootstrap

June 2, 2021 by David Miller

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.

First, add your domain to your SB Forms account

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.

Optional: Change the form submission email address

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 your form.

Look for the following code block in your theme's HTML:

<form id="contactForm" data-sb-form-api-token="API_TOKEN">

Then, replace 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!

Optional Steps

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>

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 data-sb-validations data attribute, and remove the feedback element. Using the above example, without validation, would look like this:

<!-- 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>

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), the <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!

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.