Creating Fully Working Contact Forms in Bootstrap Studio

Contact forms are an important part of any website. They give users an easy way to inquire about your services or send you feedback.

But contact forms come with their challenges. You need to build validation, backend code for email sending, attachments and spam protection. Luckily, Bootstrap Studio makes this easy thanks to our free Smart Forms service, which handles all of this automatically.

You can download the complete example as a bsdesign file. Download Example

Constructing Your Form

Drag the elements of your form from the Components panel, or just grab the bsdesign file we've linked near the top. Here is the structure that will give you a form like the one in our screenshot.

The important part is to make sure you include a Button in your form, and you set it to type submit. This will enable the form to be submitted, and Smart Forms will kick in automatically.

You should also add validation, as it places some constraints on what users can input in your form. You can mark some fields as required, and place min/max lengths to others. You can learn more in our form validation tutorial.

Enabling Smart Forms

Lastly, to make the form submittable, you need to enable and set up the Smart Forms functionality. The process involves enabling the option in the form's settings and verifying your email address. You can watch our video demonstration on how to do this.

That's It!

You now have a fully working contact form. Every submission is validated and delivered to your email address, and spam is prevented thanks to Google Recaptcha.

Smart Forms works by including a JavaScript file in your website, which communicates with our server. This means that it will work on any hosting provider.

Note: Smart Forms is not limited only to contact forms and the service can handle any type of data, including email attachments - just drop a file input in your form.