ReusableForms v2.0 beta

Tailwind contact form template

A Contact form template using Tailwind CSS
Tagged: tailwindtailwind csscontact form
This is a contact form that is designed using Tailwind CSS. Tailwind CSS is quite powerful that it gives you a lot of control over how your web pages look. Creating a contact form using Tailwind CSS is quite simple although you may not want to repeat creating from scratch every time you need a contact form. Here is a template for your rescue. You can copy and paste this template and customize for your needs.

Code


        <div class="p-4">
  <h2 class="text-2xl text-gray-500 font-semibold mb-2">Contact Us</h2>
  <div class="text-sm text-gray-600 mb-6">Do you have some feedback for us? An issue that bothering you? We are all ears! <br/>
  Please post your message below. We are constantly looking for ways to improve.</div>
<form id="contact_form">
  
  <div class="flex mb-5">
  <div class="w-1/2 mr-2">
  <label for="first_name_field" class="block text-sm text-gray-500">First Name:</label>
  <input class="rounded border-gray-400 w-full" type="text" name="first_name" id="first_name_field" />
  </div>
  <div class="w-1/2">
  <label for="last_name_field" class="block text-sm text-gray-500">Last Name:</label>
  <input class="rounded border-gray-400 w-full" type="text" name="last_name" id="last_name_field" />
  </div>
  </div>
<div class="flex mb-5">
  <div class="w-1/2 mr-2">
  <label for="email_field" class="block text-sm text-gray-500">Email:</label>
  <input class="rounded border-gray-400 w-full" type="email" name="email" id="email_field" />
  </div>
  <div class="w-1/2">
  <label for="phone_field" class="block text-sm text-gray-500">Phone:</label>
  <input class="rounded border-gray-400 w-full" type="tel" name="phone" id="phone_field" />
  </div>
  </div>
  
  <div class="mb-4">
    <label for="message_field" class="block text-sm text-gray-500">Message:</label>
    <textarea class="w-full rounded border-gray-400" name="message" id="message_field" rows="6"></textarea>
  </div>
  <button type="submit" class="bg-blue-600 py-2 px-4 rounded border-gray-400 shadow-sm text-gray-200 hover:text-white hover:bg-blue-800" >Send</button>
</form>
</div>

How to Use

Simply copy the code to your web page HTML.

Back-end processing and record keeping

You may want to get email notifications when a form is submitted. Moreover, you may want to store the form submission records, search the records later. All these requires a back-end processor. Here is how to add a backend to your form:

Using Ratufa backend

  • Go to ratufa.io
  • Press the "Connect your form" button
  • Code to connect your form is displayed. Copy the code to the bottom of the HTML code above
  • Test your form. Ratufa will display the submissions - to the right side
  • Copy the combined code to your web page
Ratufa will store your form submissions and you can configure to send email notifications. You can search and download the records whenever required.

Similar forms

Bootstrap 5 form template
PHP contact form with captcha
A reusable html5 contact form template
Bootstrap contact form withCaptcha
Tailwind CSS contact form
Working bootstrap contact form with php
Bootstrap contact form template with validation
jQuery contact form with validation
A reusable contact form using HTML and CSS
Contact form in bootstrap