ReusableForms v2.0 beta

Tailwind CSS contact form

A simple, beautiful contact form template using Tailwind CSS
This is a contact form built using Tailwind CSS. Designing web pages using Tailwind CSS is fun because the utility classes provides maximum flexibility and power to design the way you want. The contact form is simple, with just 3 fields. The code can be used for any website that requires a simple form for the contact page. This is especially useful if you are building your website using Tailwind CSS. You can just copy the form code and customize as required.

Code


        <div class="p-4">
  <h2 class="text-2xl text-gray-500 font-semibold mb-2">Contact Us</h2>
<form id="contact_form">
  <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>
  <div class="flex mb-5">
  <div class="w-1/2 mr-2">
  <label for="name_field" class="block text-sm text-gray-500">Your Name:</label>
  <input class="rounded border-gray-400 w-full" type="text" name="name" id="name_field" />
  </div>
  <div class="w-1/2">
  <label for="email_field" class="block text-sm text-gray-500">Email Address:</label>
  <input class="rounded border-gray-400 w-full" type="email" name="email" id="email_field" />
  </div>
  </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.