Статические сайты и форма обратной связи

Я люблю статические блогие и веб-сайты. Они простые и быстрые, но это все таки простые статические страницы. Если с комментариями все довольно просто, и можно использовать disqus, то с формой обратной связи все несколько сложнее. К счастью и в этом случае можно обойтись без полноценного сервера.

Pelican и Amazon S3

Я ранее уже писал, что отказался от wordpress, перешел на статический генератор сайтов pelican и разместил блог на Amazon S3. Это дало мне множество преимуществ:

  • Отсутствие необходимости обслуживать полноценный сервер;
  • Полный контроль над содержимым (его бы у меня не было, если, например, я использовал какую либо бесплатную платформу вроде blogger.com);
  • низкую стоимость (у меня выходит примерно 10 центов в месяц. Копейки же. :) ;
  • большую скорость работы сайта;
  • безопасность, так как взламывать то по сути нечего :)

Форма обратной связи

У меня была форма обратной связи когда я использовал wordpress. Надо сказать, что довольно часто посетители её использовали и писали на самые различные темы, поэтому при переезде на pelican не возникало сомнения в её необходимости. Что же делать, как же быть?

Wufoo

Если вы ожидаете, что через форму обратной связи вам в день будет писать много людей, то wufoo подойдет вам просто отлично. Это сервис, с отличным и простым интерфейсом создания форм и множеством дополнительных возможностей. На страницу добавляется javascript код, который подгружает iframe с формой с сайта wufoo. Бесплатный аккаунт позволяет создавать 3 формы, 10 полей и 3 отчета в месяц. Все дополнительные плюшки (например, загрузка файлов, свой логотип и т.д.) доступны только на платных аккаунтах, и цены там надо сказать не очень демократничные для такой услуги:

Конструктор форм у wufoo надо сказать неплохой:

Для крупного сайта с большим количеством посетителей я бы определенно выбрал wufoo.

Formspree

В отличии от wufoo, у Formspree нет конструктора форм, да в целом возможностей меньше. С другой стороны, использовать Formspree довольно просто и он более гибок в плане изменения внешнего вида и поведения в целом. Все что нужно для того, чтобы начать использовать Formspree - это вставить форму на нужной странице, и в action атрибуте формы указать на домен Formspree и добавить в конце нужный E-Mail адрес:

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

Первый раз формой необходимо воспользоваться самому. На почту придет письмо, в котором будет ссылка на подтверждение использования этого адреса для формы на указанной странице. После подтверждения, письма будут приходить такие:

При ответе на письмо подставится адрес отправителя. Так же есть возможность указать дополнительные поля - их содержимое так же придет на почту. Так же есть возможность указать страницу, на которую будет выполнено перенаправление после успешной отправки сообщения. Любители ajax тоже будут рады - есть возможность его использовать для отправки формы. Например, у меня такая форма:

  <form id="contact-form" role='form' action="" method="POST">
      <div class="form-group">
          <label class="control-label" for="_subject">О чем Вы мне хотите написать?</label>
          <input class="form-control" type="text" name="_subject" placeholder="Тема">
      </div>
      <div class="form-group">
          <label class="control-label" for="_replyto">На какой E-Mail вам ответить?</label>
          <input class="form-control" type="email" name="_replyto" placeholder="E-Mail для ответа">
      </div>
      <div class="form-group">
          <label class="control-label" for="">Ваше сообщение:</label>
          <textarea rows="10" class="form-control" name="body" placeholder="Ваше сообщение"></textarea>
      </div>
      <input class="btn btn-primary" type="submit" value="Отправить"> или <a class="trg-ml" href="#">написать мне напрямую</a>
  </form>

И такой javascript код для отправки формы без перезагрузки (ajax):

$(document).on('submit', '#contact-form', function(e) {
    e.preventDefault();
    var replyto = $('input[name=_replyto]'),
        replyto_text = replyto.val(),
        subject = $('input[name=_subject]'),
        subject_text = subject.val(),
        body = $('textarea[name=body]'),
        body_text = body.val();

    $.ajax({
        url: "https://formspree.io/addr@example.com",
        method: "POST",
        data: {
            _replyto: replyto_text,
            _subject: subject_text,
            message: body_text
        },
        dataType: "json",
        beforeSend: function( xhr ) {
            spinner.show();
      }
    }).done(function(){
        $('#contacts-success-wrapper').show();
    }).fail(function() {
        $('#contacts-error-wrapper').show();
    }).always(function() {
        spinner.hide();
        $('#contacts-wrapper').remove();
    });
});

В месяц formspree позволяет получать 1000 сообщений. Большинству блогов этого должно быть более чем достаточно.

Вывод

Лично для себя я выбрал formspree. Да, нет таких возможностей какие предоставляет wufoo, но лично мне они не нужны. Остальные решения которые были найдены на просторах интернета как правило требуют собственного сервера, либо платные и поэтому их я даже не рассматривал и не описывал.


Понравилась статья? Поделись с друзьями!




Комментарии на этом сайте требуют включенного Javascript в вашем браузере. Вероятно, ваш браузер не поддерживает Javascript, или он был отключен по каким-то причинам. Если вы хотите прокомментировать пост, или просто почитать комментарии, то пожалуйста, включите Javascript или попробуйте открыть эту страницу другим браузером.