Як додати контактні форми до статичного сайту WordPress

Запустивши надшвидкий статичний сайт на WordPress, ви задоволені його роботою, але швидше за все вас засмутить відсутність можливості додавати контактні форми.

Це суттєва вада статичних сайтів і, мабуть, одна з функцій, яку новачки в статичних сайтах мріють реалізувати. Що ж, можете називати мене феєю WordPress, тому що я збираюся виконати ваше бажання у цьому покроковому керівництві.

Залишайтеся зі мною до кінця, і я обіцяю, що ваш статичний сайт на WordPress безкоштовно міститиме повнофункціональні контактні форми, розміщені по всьому сайту. Якщо вас це влаштовує, то почнемо.

Як додати контактні форми до статичних сайтів WordPress

На звичайному сайті WordPress, коли хтось надсилає форму, PHP перехоплює відправку, обробляє її, зберігає дані в базі даних та/або надсилає електронні листи через сервер. Ваш статичний сайт не має жодної з цих можливостей - він просто надсилає файли браузерам. Це означає, що ми повинні обійти «традиційний» спосіб функціонування форм.

Я покажу, як це зробити за допомогою Formspree, який працює з будь-якою адресою електронної пошти (наприклад, Yahoo, Gmail) і вимагає мінімального технічного налаштування, достатньо лише скопіювати HTML-код і трохи його доопрацювати. Formspree також має щедрий безкоштовний тарифний план, що дозволяє розміщувати до 50 публікацій на місяць, що робить його ідеальним рішенням для невеликих блогів або компаній з невеликим або середнім оборотом.

Щоб дати вам уявлення про те, про що тут йдеться, основні кроки такі:

• Зареєструйте обліковий запис Formspree.
• Створіть свою першу форму.
• Додайте форму на сторінку або публікацію на статичному сайті.
• Налаштуйте форму за допомогою CSS.
• Повторно експортуйте статичні сайти на жорсткий диск.
• Повторно розгорніть свій сайт із доданою формою.

Зареєструйте обліковий запис Formspree та створіть свою форму

Для початку зайдіть на сайт Formspree та створіть новий (безкоштовний) обліковий запис.

Після підтвердження адреси електронної пошти та завершення процесу реєстрації перейдіть на панель керування Formspree та натисніть «Додати нову» → «Нова форма»:

У спливаючому вікні дайте формі ім'я. У цьому прикладі форма названа як "Статична форма зворотного зв'язку з сайтом". Потім вкажіть адресу електронної пошти, на яку надсилатимуться листи після того, як відвідувачі сайту надішлють форму:

Після натискання кнопки «Створити форму» буде показаний екран із кінцевою точкою форми:

Там буде приклад коду та інші опції. Поки не звертайте на всі уваги, але залиште цю вкладку у браузері відкритою. Ми скоро до цього повернемось.

Додати форму Formspree на свій статичний сайт

Наступний крок – додати форму на статичний сайт. Для цього поверніться до адмінпанелі WordPress, наприклад:

Перейдіть на сторінку або публікацію, куди хочете додати контактну форму, а потім виконайте такі дії:

1. Знайдіть на сторінці місце, де потрібно розмістити форму.
2. Натисніть + у редакторі блоків та введіть HTML у вікні пошуку блоків.
3. Коли з'явиться блок користувача HTML, клацніть по ньому, щоб вставити його на сторінку.
4. Скопіюйте наведений нижче код у буфер обміну, а потім вставте його в цей HTML-блок.

<form
  action="https://formspree.io/f/REPLACE_WITH_YOUR_ENDPOINT"
  method="POST"
>
  <label>
    Name:
    <input type="text" name="name">
  </label>
  <label>
    Email:
    <input type="email" name="email">
  </label>
  <label>
    Message:
    <textarea name="message"></textarea>
  </label>
  <!-- your other form fields go here -->
  <button type="submit">Submit</button>
</form>

5. Поверніться на вкладку Formspree у браузері та скопіюйте у буфер обміну лише кінцеву точку форми. Не вся URL-адреса, а лише кінцева точка після f/. Замініть заповнювач у HTML-коді (там, де написано)REPLACE_WITH_YOUR_ENDPOINT) кінцевою точкою, скопійованою з Formspree.

6. Наступним кроком є ​​вставити в публікацію ще один блок Custom HTML. Додайте його прямо над існуючим блоком і вставте наступний CSS-код:

CSS надасть вашій формі естетичного вигляду. Якщо на вашому сайті використовується певна колірна схема, то можете налаштувати код, щоб вона відповідала їй. Навіть якщо у вас немає досвіду програмування, CSS інтуїтивно зрозумілий, так що це не складе труднощів. Наприклад, якщо ви хочете змінити колір кнопки, вам потрібно змінити цей фрагмент коду:

button {
  background-color: #0066cc;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

Якщо ви не впевнені, які саме кольори використовуються на сайті, то зробіть таке:

• Зробіть знімок екрану частини вашого сайту, що містить кольори, які хочете використати у формі.
• Завантажте цей знімок у безкоштовний інструмент, наприклад, засіб вибору кольору зображення, і він визначить шестизначні шістнадцяткові коди #0066cc кольорів (наприклад, у поточній версії поля кольору тла).
• Скопіюйте їх і підставте код для внесення змін. Можна замінити колір шістнадцятковим кодом у полях, де вказані слова, які позначають колір (наприклад, змініть white#faf0e6).

По завершенню, перегляньте, як виглядатиме форма на зовнішньому інтерфейсі сайту:

Якщо усі ОК, збережіть свою роботу!

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/