SB Forms Setup with Custom HTML (Advanced)

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!