Bootstrap is a front-end framework that provides web developers with re-usable components and themes. Bootstrap gives developers layout options that work across browsers and mobile devices, without having to dive into CSS to make them work. It takes the headache out of building good-looking websites.
We're going to use Bootstrap to build beautiful, mobile-first contact forms that are perfect for both business and blog owners alike.
To include Bootstrap on your site, you'll need to link Bootstrap's CSS file in the <head> tag of each page you plan to use Bootstrap on.
In your <head> tag, insert this line:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />Contact forms provide an effortless way for users to get in touch with your business, without having to reveal your personal information. On many sites, you'll find a contact form on their Contact Us page.
With 99inbound, we can create contact forms without maintaining expensive server infrastructure or exposing our email address to spammers.
Let's build a simple contact form that records a user's email address and their message to us. This type of contact form is great for blog owners because it is simple to create and easy to fill out.
First, you will need to grab your Form Endpoint URL. We're going to enter the Form Endpoint URL as an action parameter to our <form> tag.
Then insert this form into the <body> tag of your page.
<div class="container">
<!-- replace YOUR_ENDOINT_URL_GOES_HERE with your endoint URL -->
<form action="YOUR_ENDOINT_URL_GOES_HERE" method="POST" target="_blank">
<h3 style="text-align: center;">Contact Us</h3>
<div class="form-group">
<label for="email">Email address</label>
<input name="email" type="email" class="form-control" id="email" placeholder="Enter email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea name="message" class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<button type="submit" class="btn btn-primary float-right">Send</button>
</form>
</div>In the above, we take advantage of HTML5's validation feature and it's required parameter to hand-off form validation to our browser. That way, form validation will happen in a native and standardized fashion, which means less surprises for users.
If any input field isn't required on your page, simply removing the required parameter will allow the form to validate even if the field is left empty.
For example, if you want to receive messages even if the user doesn't provide their email address, simply removing required from this line in the above form allows you to do that.
<input name="email" type="email" class="form-control" id="email" placeholder="Enter email" required>Perhaps you want to create a more formal relationship with users by asking them for their name, as well as their email address. We can also include icons to create a professional-looking user experience.
We'll use the Font Awesome iconset to build this form. In your <head> tag, include the following line:
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />As always, make sure you've grabbed your Form Endpoint URL and insert it into the <form> tag as an action parameter.
<div class="container">
<!-- replace YOUR_ENDOINT_URL_GOES_HERE with your endoint URL -->
<form action="YOUR_ENDOINT_URL_GOES_HERE" method="POST" target="_blank">
<h3 style="text-align: center;">Contact Us</h3>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white">
<i class="fa fa-user"></i> 
</span>
</div>
<input name="name" type="name" placeholder="Name" class="form-control border-left-0" required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white">
<i class="fa fa-envelope"></i>
</span>
</div>
<input name="email" type="email" placeholder="Email" class="form-control border-left-0" required>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<button type="submit" class="btn btn-primary float-right">
<i class="fa fa-paper-plane"></i>
Send
</button>
</form>
</div>As we add fields to our form, it can elongate the page and overwhelm visitors. A compact form that takes advantage of horizontal space can provide a streamlined experience to our users.
Using Bootstrap's form grid, we can inline some of our form's fields. By using Bootstrap's row and col classes, we can create a row with two columns, where one column holds our name-field and the other holds our email-field.
Let's take a look at how we'd build this form. Make sure you have your Form Endpoint URL on hand.
<div class="container">
<!-- replace YOUR_ENDOINT_URL_GOES_HERE with your endoint URL -->
<form action="YOUR_ENDOINT_URL_GOES_HERE" method="POST" target="_blank">
<h3 style="text-align: center;">Contact Us</h3>
<div class="row">
<div class="col">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white">
<i class="fa fa-user"></i> 
</span>
</div>
<input name="name" type="name" placeholder="Name" class="form-control border-left-0" required>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white">
<i class="fa fa-envelope"></i>
</span>
</div>
<input name="email" type="email" placeholder="Email" class="form-control border-left-0" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<button type="submit" class="btn btn-primary float-right">
<i class="fa fa-paper-plane"></i>
Send
</button>
</form>
</div>Often, it's valuable to know how a user found your site, especially if you have marketing funnel expenses. While analytics software can help you track some of that information, it doesn't paint the whole picture. Why not ask the user how they found your site?
As in the other sections, we'll wire our Form Endpoint URL to our <form> tag.
<div class="container">
<!-- replace YOUR_ENDOINT_URL_GOES_HERE with your endoint URL -->
<form action="YOUR_ENDOINT_URL_GOES_HERE" method="POST" target="_blank">
<h3 style="text-align: center;">Contact Us</h3>
<div class="row">
<div class="col">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-user"></i> </span>
</div>
<input name="name" type="name" placeholder="Name" class="form-control border-left-0" required>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-envelope"></i></span>
</div>
<input name="email" type="email" placeholder="Email" class="form-control border-left-0" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<div class="form-group">
<label for="dropdown">How did you hear about us?</label>
<select name="heard_about_us_on" class="form-control" id="dropdown" required>
<option>Company Site</option>
<option>Google</option>
<option>Bing</option>
<option>Angel.co</option>
<option>Other...</option>
</select>
</div>
<button type="submit" class="btn btn-primary float-right">
<i class="fa fa-paper-plane"></i>
Send
</button>
</form>
</div>Nobody likes unsolicited emails or phone calls. Although our form collects an email address, some users will want to specify how they'd like to be contacted, such as through email or via a phone call.
Using our form, we can directly ask users how they'd like to be contacted. To do so, we'll use radio controls.
To complete the form below, make sure you have a copy of your Form Endpoint URL.
<div class="container">
<!-- replace YOUR_ENDOINT_URL_GOES_HERE with your endoint URL -->
<form action="YOUR_ENDOINT_URL_GOES_HERE" method="POST" target="_blank">
<h3 style="text-align: center;">Contact Us</h3>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-user"></i> </span>
</div>
<input name="name" type="text" placeholder="Name" class="form-control border-left-0" required>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-envelope"></i></span>
</div>
<input name="email" type="email" placeholder="Email" class="form-control border-left-0" required>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-white"><i class="fa fa-phone"></i></span>
</div>
<input name="phone" type="tel" placeholder="Phone" class="form-control border-left-0" required>
</div>
</div>
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<div class="form-group">
<fieldset>
<div class='row'>
<div class="col">
<legend><h5>Contact me via</h5></legend>
</div>
<div class="col">
<div class="form-check form-check">
<input class="form-check-input" type="radio" name="byemail" id="byemail" value="email" checked>
<label class="form-check-label" for="byemail">Email</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="radio" name="byphone" id="byphone" value="phone">
<label class="form-check-label" for="phone">Phone</label>
</div>
<div class="form-check form-check">
<input class="form-check-input" type="radio" name="dont" id="dont" value="dont">
<label class="form-check-label" for="dont">Don't contact me</label>
</div>
</div>
</div>
</fieldset>
</div>
<button type="submit" class="btn btn-primary float-right">
<i class="fa fa-paper-plane"></i>
Send
</button>
</form>
</div>It should always be easy for a customer to get in touch with a business owner or representative. Contact forms provide users with a simple method to reach out to us without having to give them our email address.
Using Bootstrap, we saw how quickly we could build different contact forms that are both beautiful and suitable for a variety of different business needs.
99inbound simplifies the process even further by eliminating server maintainence: all that's needed to enable our forms is a Form Endpoint URL. The rest is taken care of for us.