Form Style 1
<form class="form-style-1">
<div class="row">
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Mail">
</div>
</div>
<input type="text" class="form-control" placeholder="Subject">
<textarea class="form-control" placeholder="Message"></textarea>
<button type="submit" class="btn btn-primary btn-style-1 btn-style-sm" title="Title">Submit<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<path id="Icon_ionic-ios-arrow-dropright-circle" data-name="Icon ionic-ios-arrow-dropright-circle" d="M3.375,63.375a60,60,0,1,0,60-60A59.991,59.991,0,0,0,3.375,63.375Zm70.529,0L50.279,39.981a5.568,5.568,0,1,1,7.875-7.875L85.673,59.712a5.561,5.561,0,0,1,.173,7.673l-27.115,27.2a5.558,5.558,0,1,1-7.875-7.846Z" transform="translate(-3.375 -3.375)" fill="#1a1725"/>
</svg>
</button>
</form>
Copy to clipboard
Form Style 2
Submit
<form class="form-style-2">
<div class="row">
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="Second name">
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<input type="tel" class="form-control" placeholder="Phone number">
</div>
<div class="form-group col-md-6">
<input type="email" class="form-control" placeholder="Mail id">
</div>
</div>
<button type="submit" class="btn btn-primary btn-style-1 btn-style-sm" title="Title">Submit<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<path id="Icon_ionic-ios-arrow-dropright-circle" data-name="Icon ionic-ios-arrow-dropright-circle" d="M3.375,63.375a60,60,0,1,0,60-60A59.991,59.991,0,0,0,3.375,63.375Zm70.529,0L50.279,39.981a5.568,5.568,0,1,1,7.875-7.875L85.673,59.712a5.561,5.561,0,0,1,.173,7.673l-27.115,27.2a5.558,5.558,0,1,1-7.875-7.846Z" transform="translate(-3.375 -3.375)" fill="#1a1725"/>
</svg>
</button>
</form>
Copy to clipboard
Form Style 3
<div class="form-style-3">
<div class="head">
<h3>Form Format</h3>
</div>
<form>
<div class="form-group">
<label for="forMail">User Name <sup>*</sup></label>
<input type="text" class="form-control" id="forMail" placeholder="Enter your name">
<span>Enter your Username.</span>
</div>
<div class="form-group">
<label for="forPassword">Password <sup>*</sup></label>
<input type="password" class="form-control" id="forPassword" placeholder="Enter your password">
<span>Enter the password that accompanies your username.</span>
</div>
<button type="submit" class="btn btn-primary btn-style-1 btn-style-sm" title="Title">Button<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
<path id="Icon_ionic-ios-arrow-dropright-circle" data-name="Icon ionic-ios-arrow-dropright-circle" d="M3.375,63.375a60,60,0,1,0,60-60A59.991,59.991,0,0,0,3.375,63.375Zm70.529,0L50.279,39.981a5.568,5.568,0,1,1,7.875-7.875L85.673,59.712a5.561,5.561,0,0,1,.173,7.673l-27.115,27.2a5.558,5.558,0,1,1-7.875-7.846Z" transform="translate(-3.375 -3.375)" fill="#1a1725"/>
</svg>
</button>
</form>
</div>
Copy to clipboard