logomedCode
Back to templates

Component

Professional Contact Us FormTemplate: Add To Your Project

Integrate a professional and user-friendly contact form template into your project effortlessly. Enhance user engagement and facilitate seamless communication with visitors by incorporating this customizable contact form, tailored to suit your project's needs

Full Screen
Professional Contact Us FormTemplate: Add To Your Project

code source

<div className="min-h-screen bg-gray-800 py-6 flex flex-col justify-center sm:py-12">
  <div className="relative py-3 sm:max-w-xl sm:mx-auto">
    <div className="absolute inset-0 bg-gradient-to-r from-indigo-700 to-purple-500 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
    <div className="text-white relative px-4 py-10 bg-indigo-400 shadow-lg sm:rounded-3xl sm:p-20">
      <div className="text-center pb-6">
        <h1 className="text-3xl">Contact Us!</h1>
        <p className="text-gray-300">
          Fill up the form below to send us a message.
        </p>
      </div>
      <form>
        <input
          className="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          type="text"
          placeholder="Name"
          name="name"
        />
        <input
          className="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          type="email"
          placeholder="Email"
          name="email"
        />
        <input
          className="shadow mb-4 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          type="text"
          placeholder="Subject"
          name="_subject"
        />
        <textarea
          className="shadow mb-4 min-h-0 appearance-none border rounded h-64 w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          type="text"
          placeholder="Type your message here..."
          name="message"
          style={{ height: 121 }}
          defaultValue={""}
        />
        <div className="flex justify-between">
          <input
            className="shadow bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="submit"
            defaultValue="Send ➤"
          />
          <input
            className="shadow bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
            type="reset"
          />
        </div>
      </form>
    </div>
  </div>
</div>

Recent Templates:

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy