Как добавить контактные формы на статический сайт 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 придаст вашей форме эстетичный вид. Если на вашем сайте используется определeнная цветовая схема, то можете настроить код, чтобы она ей соответствовала. Даже если у вас нет опыта программирования, 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/