How to: Build a Custom Form

This tutorial is a quick introduction to custom forms that request user data and pass that data to the KaratEmail system. We highly recommend that you try using the built-in form builder for the CMS first and only attempt the following if a custom form is the only way to move forward.

Note: If your form requires heavy customization, submitee email response generation, etc. please consider reading through only the HTML section below and building your own back-end instead of using KaratEmail. If you're not sure how to build your customized back-end please submit a support request for assistance.


A form will have the following general structure:

<form role="form" action="XXXX">

Within this form you can have common items like <input>, <textarea>, <select>, <button>, and so forth.

Let's look at a simple example:

<form role="form" action="">
<!-- Fields required by KaratEmail -->
<input type="hidden" name="recipient" value="" />
<input type="hidden" name="subject" value="XXXX" />
<!-- Optional Fields for KaratEmail -->
<input type="hidden" name="required" value="first_name,last_name" />
<input type="hidden" name="redirect" value="" />
<!-- Honeypot Protection -->
<div class="hpreqSetting">
<input type="text" name="hpreq_name" autocomplete="off">
<input type="text" name="hpreq_email" autocomplete="off">
<!-- Primary Form Content -->
<div class="form-group">
<label for="first_name">First name:</label>
<input type="text" class="form-control" id="first_name" name="first_name" required="true">
<label for="last_name">Last name:</label>
<input type="text" class="form-control" id="last_name" name="last_name" required="true">
<div class="form-group">
<label for="date">Current Date:</label>
<input type="date" class="form-control" id="date" name="date">
<div class="checkbox">
<label><input type="checkbox">Remember me</label>
<div class="form-group">
<label for="how_found_us">How Did You Find Out About Us:</label>
<select class="form-control" name="how_found_us" id="how_found_us">
<option value=""></option> 
<option value="internet">Internet</option>
<option value="email">Email</option>
<option value="magazine">Magazine</option>
<option value="friend">Friend</option>
 <button type="reset" class="btn btn-default">Reset</button>
<button type="submit" class="btn btn-primary">Submit</button>

Now let's see what this form looks like. Click here and copy-paste the example code above into the appropriate location. Add the following style code to the HTML head.

<style type="text/css">
.hpreqSetting { display:none;visibility:hidden; }

Click [ See Result >> ] to preview the result.


KaratEmail is used as the form's action and replaces the old FormMail system for capturing user inputs and emailing them to the form recipient.

<form role="form" action="">

Extended Reading


Was this article helpful? 0 out of 0 found this helpful

Have more questions? Submit a Support Ticket