Статични сайтове като този си имат своите предимства и недостатъци. От една страна, са бързи, евтини за хостване и сигурно. От друга, те са по-трудни за обновяване и им липсва управление на потребители и по-сложни функционалности.

За щастие създаването на контактни форми не е сред тях. В тази статия ще опиша два начина, чрез които можете да добавите функционална контактна форма на своя статичен сайт.

Добавяне на форма чрез Formspree.io

Това е по-лесния начин за създаване на контактна форма. Не се изисква JS или PHP, няма нужда от регистрация.

Само трябва да добавите вашата форма и да я изпратите чрез POST заявка към https://formspree.io/email@domain.tld

Ето пример за HTML кода, който може да използвате:

<form action="https://formspree.io/email@domain.tld" method="POST">
  <input type="text" name="name">
  <input type="email" name="_replyto">
  <input type="submit" value="Send">
</form>

Подробности може да намерите на сайта им, https://formspree.io/, както и инструменти за тестване и различни примери.

На мен този вариант не ми допада, защото изисква да изпишете имейл адреса, който ще получава съобщенията в HTML кода на сайта.

Подозирам, че ако си купите платената версия на услугата им, ще можете да избегнете това.

Използване на Google forms за контактна форма на статичния сайт.

Този метод е донякъде сходен защото отново изпраща данните от формата към друга услуга, но този път те отиват във Формуляр, който можете да създадете чрез Google Docs.

Първата стъпка е да създадете формуляр във вашия Google docs акаунт. Добавете полетата, които искате контактната форма да има. В този пример това са: “Име”, “e-mail” и “Съобщение”

След това вървете на “Визуализация” и инспектирайте формата в Developer tools:

Копирайте URL-a от атрибута “action” както и атрибута “name” за всяко едно поле във вашата форма.

Пример:

<form action="https://docs.google.com/forms/d/e/1FAIpQLSfmMZQlo5TbqdJugPhT9Bwl44Fe4_AtsHIKOIwqUlaCUmbung/formResponse" method="post" >
      <label>Име*</label>
      <input type="text" placeholder="Име" name="entry.1953505700" required>

      <label>е-mail*</label>
      <input type="email" placeholder="е-mail адрес" name="entry.1443001926" required>

        <label>Съобщение*</label>
      <textarea rows="5" placeholder="Съобщение..." name="entry.887961021" required></textarea>

      <button type="submit">Изпрати</button>
</form>

Това е. Формата ви ще изпраща данните към Google Docs. Можете да се логнете и да проверите получените данни като отговори на формуляра. Отговорите могат също така да бъдат експортирани като електронна таблица, а формуляра може да ви известява всеки път като получи отговор.