구성 요소 양식 Photography_Contact_Form

Photography_Contact_Form

사진 포트폴리오를 위한 깔끔하고 미니멀한 컨택트 폼으로, 스위스/인터내셔널 타이포그래피(Swiss/International Typography)에서 영감을 받았으며 차분한 레트로/빈티지 컬러 팔레트가 특징입니다. 다크 모드 지원으로 완벽하게 반응합니다.

미리 보기

HTML 코드

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-md w-full bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 space-y-6">
    <div>
      <h2 class="text-center text-3xl font-extrabold text-gray-900 dark:text-gray-100 tracking-tight leading-tight">
        Contact Photographer
      </h2>
      <p class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
        Get in touch for bookings or inquiries.
      </p>
    </div>
    <form class="space-y-6" action="#" method="POST">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Name
        </label>
        <div class="mt-1">
          <input id="name" name="name" type="text" autocomplete="name" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="email-address" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Email address
        </label>
        <div class="mt-1">
          <input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm">
        </div>
      </div>
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
          Message
        </label>
        <div class="mt-1">
          <textarea id="message" name="message" rows="4" required class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 transition duration-150 ease-in-out sm:text-sm"></textarea>
        </div>
      </div>
      <div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-800 dark:focus:ring-offset-gray-800 transition duration-150 ease-in-out">
          Send Message
        </button>
      </div>
    </form>
  </div>
</div>

Photography_Contact_Form

미리 보기

HTML 코드

관련 구성 요소

Neumorphic Forms 구성 요소

Neumorphic_Fashion_Form

JobApplicationForm_WatercolorArtistic