In our earlier posts, we listed some free plugins and tools that you can use to create your own forms. One major downside to using free tools to create forms is that the end product might not look as professional and polished as you expect. Similarly, using free libraries to code your own forms might not be possible for people who don’t have a lot of coding experience.
In such cases, you can either use third-party services—which can be a bit expensive—or you can purchase a premium framework, form builder, or plugin which offers free support for a certain period of time. In this tutorial, we will take a look at one of the most popular and feature-rich form frameworks available on CodeCanyon to create your own JavaScript forms.
Smart Forms Overview
The tool that we will use today to create our own forms is Smart Forms. This form framework has gained 3,819 sales at the time of writing, and it has an average rating of 4.5 based on 159 reviews. Most buyers who have used the framework in their website like its code quality, features, design, flexibility, and active customer support.
Some of the features of this framework are:
- responsive framework with over 40 starter templates
- multi-step forms and modal forms
- date picker, time picker, month picker, and color picker widgets among others
- drag-and-drop file uploads
- AJAX and PHP based, with support for Google reCAPTCHA
- and the list goes on!
If you want to create a lot of professional-looking forms, using the Smart Forms framework would be a good choice. Do check out all the features and reviews on the framework home page.
Example Forms
To show what you can create with Smart Forms, here are a couple of examples with varying themes and layouts. You can choose to have a social media login button placed either at the top or side by side. There are a lot of color schemes and three different themes available.
Here’s a login form.
And here’s that same login form with a different color and the social sign-in buttons on the top:
Similarly, here are two forms related to placing orders. As you can see, it is possible to create entirely different layouts based on your needs.
In the next form, you can see how Smart Forms can create attractive styling like large product option cards.
The download files contain hundreds of such template files, so you will almost always be able to find a template that suits your needs and styling. Not only that, but the documentation in the download is easy to understand in case you want to create an entirely new layout for your forms.
File Structure and Other Basics
Once you purchase Smart Forms, you will get detailed documentation about the process of creating your own forms and adding them to your own website in the zip download. Here are some key points that you have to remember:
- The forms rely on a single main CSS file for most of the styling. Make sure that you load any CSS reset files before loading the CSS for the plugin.
- The forms support Font Awesome icons and JavaScript features like AJAX submission and form validation. However, you can disable these features if you don’t need them.
- The framework loads an additional fallback stylesheet for IE8.
There are three folders inside the extracted archive called dark, flat, and light. These are the three main themes for different forms. Each theme contains three different folders. These are:
AJAX PHP: This folder contains working AJAX PHP forms like a contact form, order form, and more.
JavaScript enhancements: This folder has all the samples for form validation, as well as the date picker and other widgets.
Template samples: This folder includes HTML- and CSS-based form templates to help you build your forms faster. These templates can also act as a basic guideline when you create your own forms.
When creating your own forms, the first step is to load the necessary CSS files using the following lines:
<link rel="stylesheet" type="text/css" href="css/smart-forms.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
You’ll have to wrap your forms in two div elements with the smart-wrap and smart-forms classes.
Creating a Contact Form With Smart Forms
The documentation provides a detailed and easy-to-follow guide on creating different kinds of forms, explaining how to add text input elements, check boxes, radio buttons and file inputs with the theme of your choice applied to them.
In this tutorial, we will create a contact form with a blue theme and fields for name, email, subject, and message. We will need to load one additional CSS file in order to apply the blue theme.
<link rel="stylesheet" type="text/css" href="css/smart-forms.css">
<link rel="stylesheet" type="text/css" href="css/smart-themes/blue.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
Here is our initial markup for creating the form with a basic skeletal structure:
<div class="smart-wrap">
<div class="smart-forms smart-container wrap-3">
<div class="form-header header-blue">
<h4><i class="fa fa-comments"></i>Contact us</h4>
</div>
<form method="post" action="/" id="contact-form">
<div class="form-body theme-blue">
</div>
<div class="form-footer">
<button type="submit" class="button btn-blue pushed">Submit</button>
</div>
</form>
</div>
</div>
The wrap-3 class is used to control the width of the form that you are creating. You can set it anywhere from wrap-0 to wrap-4. Unless you change any CSS rules, the wrap-3 class will create the narrowest form, and wrap-4 will cover the full width of the body element. You can create your own CSS rules with additional classes like wrap-5, wrap-6, etc. to adjust the form width.
You have to apply a header-{colorname} class for the theme that you want to apply. The colorname will be the same as the additional CSS file that you loaded. The same goes for the theme-blue class on the body.
You can apply styling to your button elements by adding a class name like pushed, button-pointed, button-left, etc. You can find more information about styling buttons in the Form Buttons section of the documentation.
Now, it’s time to add the input elements to our form. All this markup will go inside the div element with the form-body class.
<div class="frm-row">
<div class="section colm colm6">
<label class="field prepend-icon">
<input type="text" name="names" id="names" class="gui-input" placeholder="Enter name...">
<span class="field-icon"><i class="fa fa-user"></i></span>
</label>
</div>
<div class="section colm colm6">
<label class="field prepend-icon">
<input type="email" name="email" id="email" class="gui-input" placeholder="Enter Email...">
<span class="field-icon"><i class="fa fa-envelope"></i></span>
</label>
</div>
</div>
<div class="spacer-t20 spacer-b30">
<div class="tagline"><span>Please Choose The Concerned Department And Provide All Relevant Details</span></div>
</div>
<div class="section">
<div class="option-group field">
<label class="option option-blue">
<input type="radio" name="department" checked>
<span class="radio"></span> Billing
</label>
<label class="option option-blue">
<input type="radio" name="department">
<span class="radio"></span> Technical Support
</label>
<label class="option option-blue">
<input type="radio" name="department">
<span class="radio"></span> Other
</label>
</div>
</div>
<div class="section">
<label class="field prepend-icon">
<input type="text" name="subject" id="subject" class="gui-input" placeholder="Enter subject...">
<span class="field-icon"><i class="fa fa-lightbulb-o"></i></span>
</label>
</div>
<div class="section">
<label class="field prepend-icon">
<textarea class="gui-textarea" id="comment" name="comment" placeholder="Enter message..."></textarea>
<span class="field-icon"><i class="fa fa-comments"></i></span>
<span class="input-hint"> <strong>Hint:</strong> Please enter between 80 - 300 characters.</span>
</label>
</div>
<div class="section">
<label class="switch switch-round switch-blue">
<input type="radio" name="newsletter" id="newsletter" checked>
<span class="switch-label" data-on="YES" data-off="NO"></span>
<span> Subscribe to our newsletter?</span>
</label>
</div>
The wrapper div with the class frm-row is helpful when you want to add multiple form elements on the same line. The width of individual form elements is controlled by the colm6 class. The total sum of the classes has to add up to 12 to fill the entire form width. This means that you can either set the width of two form elements to colm8 and colm4 or colm6 and colm6. In the first case, the left element would be twice as wide as the right one. In the latter case, both input elements would have the same width.
With the above markup, the final form will look like the image below:
Form Validation and Other Enhancements
The framework provides quite a few JavaScript files for adding additional features to the form. For example, there are separate files for input masking and adding file drag-and-drop functionality. The use of each file is explained very clearly in the documentation, so you only have to include those files whose functionality you are actually going to need.
In our case, we just want to validate the form input, so we will load the main jQuery script and two other validation files. One is the core jQuery validate plugin, and the other one provides additional validation methods.
You simply need to add the following script tags to your webpage in order to use JavaScript-based validation.
<script type="text/javascript" src="http://code.tutsplus.com/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script> <script type="text/javascript" src="js/additional-methods.js"></script>
The last step to enable the validation is to include the following code after the above scripts:
$(function() {
$('#contact-form').validate();
});
The #contact-form selector above is the value of the id attribute for our form. It will be different for your own forms if you changed that attribute. This line of code simply tells the webpage to validate the information supplied through the form.
Currently, the errors will be displayed without any change in font color or input highlighting. You can use the following code snippet to make the errors stand out better:
$('#contact-form').validate({
errorClass: "state-error",
validClass: "state-success",
errorElement: "em",
highlight: function(element, errorClass, validClass) {
$(element).closest('.field').addClass(errorClass).removeClass(validClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.field').removeClass(errorClass).addClass(validClass);
},
errorPlacement: function(error, element) {
if (element.is(":radio") || element.is(":checkbox")) {
element.closest('.option-group').after(error);
} else {
error.insertAfter(element.parent());
}
}
});
Once you add the above code to your webpage, the invalid fields will look like the image below:
Form validation has been covered in great detail in the documentation, so you won’t get stuck when implementing it in your own forms.
Final Thoughts
In this tutorial, we created a very attractive contact form using the Smart Forms JavaScript forms framework available from CodeCanyon. One of the best things about using this framework is that all the JavaScript functionality has already been written for you. Also, the forms look very professional with their neat design. You can choose from a large number of options and choose the form layout that suits you best.
The documentation that comes with the framework explains everything really well, so there is very little chance that you will get stuck. In the unlikely event that you do get stuck, the developer offers six months of free support, so all your problems will be resolved quickly! You can check out the demos to see if you like the styling of the forms. Using this framework to create your forms will save you a lot of time and money in the long run, so you should definitely give it a try.