В этой статье мы проведем вас через простую настройку веб-сайта посредника, добавив рабочую контактную форму на базе мощной серверной платформы форм Getform.
Посредник - это генератор статических сайтов, использующий все горячие клавиши и инструменты современной веб-разработки. Middleman использует Ruby аналогично другому популярному генератору статических сайтов Jekyll, предлагая довольно обширный набор функций для создания интересных вещей.
В то время как Jekyll родился из желания создать простой статический движок для ведения блогов, Middleman был создан как структура для более продвинутых веб-сайтов, посвященных маркетингу и документации. Это мощный инструмент, который быстро освоится, если вы пришли из мира Rails.
Но контактные формы - это проблема для посредников.
Генераторы статических сайтов, такие как Middleman, очень быстрые и производительные. Однако есть одно место, в котором они все терпят неудачу: бэкенды. Поскольку на самом деле серверной части нет, нет места для маршрутизации данных отправки формы. Именно здесь на помощь приходят конструктор форм и бэкэнд-платформы форм, такие как Getform.
В этой статье мы проведем вас через простую настройку веб-сайта посредника, добавив рабочую контактную форму на базе мощной серверной платформы форм Getform.
Как создать контактную форму посредника с помощью Getform и развернуть ее с помощью Vercel
1- Войдите в свою учетную запись Getform
Первый шаг - войти в свою учетную запись Getform. Если у вас нет учетной записи, зарегистрируйтесь в Getform, это очень просто и бесплатно. Для создания учетной записи не требуется указывать данные кредитной карты.
2- Создайте новую форму в Getform
После входа в свою учетную запись Getform нажмите кнопку «+» на панели управления, чтобы создать новую форму, затем назовите ее, например «Контактная форма для сайта посредника» и сохраните ее. После создания этой формы ваша уникальная конечная точка формы теперь готова для вставки в контактную форму посредника.
Ваша конечная точка будет показана вам после создания формы следующим образом:
Мы собираемся следить за установкой macOS, но если вы используете Windows, вы можете следовать руководству здесь.
Чтобы подготовить и создать свой веб-сайт посредника, первым делом необходимо установить инструменты командной строки XCode. Xcode можно установить с терминала:
$ xcode-select --install
После того, как Ruby и RubyGems настроены и работают, выполните в командной строке следующее:
$ gem install middleman
Это установит Middleman, его зависимости и инструменты командной строки для использования Middleman.
Чтобы запустить новый сайт на Middleman, вы можете выполнить следующую команду:
$ middleman init
строит скелетный проект посредника в текущей папке.
$ middleman init my-middleman-site
создает подпапку my_middleman_site со скелетным проектом посредника. Это вариант, который мы будем использовать. После того, как мы это запустим,
cd my-middleman-site, чтобы открыть папку, и выполните следующую команду, чтобы запустить локальный сервер разработки:
$ bundle exec middleman server
Посредник запустит среду разработки, доступную по умолчанию в localhost:4567, которая будет выглядеть следующим образом:
«], [0, [], 0,» в файле contact.html.erb обновите его, указав URL-адрес конечной точки формы, который вы скопировали на шаге 2. »]]]]]}’ ›
4- Добавьте страницу контактов на свой сайт посредника при настройке бэкэнда формы с помощью Getform
Теперь у нас работает наш сайт посредника, и он приветствует нас сообщением «Посредник запущен» на главной странице.
Эта домашняя страница представлена значком source/index.html.erb. Посредник использует файловую систему маршрутизации. Например, source/contact.html.erb будет mywebsite.com/contact.html/.
Давайте создадим нашу страницу контактов.
- Создайте новый файл с именем contact.html.erb в каталоге source.
- Измените его содержимое с помощью следующего блока кода, сама контактная форма будет html, которая будет работать нормально.
- Не забудьте изменить
actionчасть тега<form>в файле contact.html.erb, добавив в него URL-адрес конечной точки формы, который вы скопировали на шаге 2.
<template> <Layout> <h1>Contact Us</h1> <div> <a target="_blank" href="https://getform.io"> <img src='https://getform.io/_nuxt/img/095d0b3.svg'> </a> <br> <a target="_blank" href="https://getform.io?ref=gridsome-blog" class="mt-3 d-flex">Getform.io | Get your free endpoint now</a> <h2>Getform.io - Gridsome Contact Form Example</h2> <form accept-charset="UTF-8" action="https://getform.io/f/{YOUR_UNIQUE_FORM_ENDPOINT}" enctype="multipart/form-data" method="POST" target="_blank"> <div> <label>Full Name</label> <div> <input style="margin-top: 5px; background-color: #fff; height:35px; width:235px; text-indent: 5px; border-radius:5px;" type="text" name="first_name" placeholder="Enter your name and surname" required="required"> </div> </div> <br> <div> <label>Email address</label> <div> <input style="margin-top: 5px;background-color: #fff; height:35px; width:235px; text-indent: 5px; border-radius:5px;" type="email" name="email" placeholder="Enter your email address" required="required"> </div> </div> <br> <div> <label for="favourite-platform">Favourite Static Site Generator</label> <div> <select style="margin-top: 5px; background-color: #fff; height:40px; width:245px; text-indent: 5px; border-radius:5px;" class="form-control" id="favourite-platform" name="platform" required="required"> <option>Middleman</option> <option>Jekyll</option> <option>Gatsby</option> </select> </div> </div> <div style="margin-top: 15px;"> <label >Upload a file:</label> <input style="margin-left: 5px" type="file" name="file" required="required"> </div> <br> <input type="hidden" name="utf8" value="✓"> <button style="font-size:14px; background-color:#6b7ddf; color:#fff; font-weight:bold; padding:10px 35px; margin: 5px 0 0 0; border: 1px solid; border-radius: 5px;" type="submit">SUBMIT</button> </form> </div> </div> </Layout> </template><script> export default { metaInfo: { title: 'About us' } } </script>
Конечная точка образца формы: https://getform.io/{YOUR_UNIQUE_FORM_ENDPOINT}
- запустите сервер-посредник выполнения пакета и перейдите по адресу localhost: 4567 / contact.html /. Вот как выглядит ваша страница контактов:
5- Протестируйте свою форму на сайте посредника, отправив образец формы!
Наша контактная страница готова к приему материалов. Давайте заполним поля и нажмем "Отправить".
Вот и все! Ваш сайт-посредник теперь использует Getform для обработки бэкэнда форм. Предварительный просмотр загрузки файлов - еще одна приятная вещь в Getform, которая поддерживается для большинства распространенных типов файлов, таких как png, pdf, jpeg и т. Д.
После завершения настройки вы также можете настроить уведомление по электронной почте в настройках формы, использовать интеграцию с Zapier, чтобы отправить данные для отправки формы на 1000s других приложений и защитите вашу форму от спама с помощью интеграции reCaptcha. Если вы хотите перейти на более продвинутую интеграцию, вы можете использовать Getform Submission API для интеграции вашей формы в любые пользовательские приложения.
Вы можете найти исходный код этого руководства ниже. При желании вы можете использовать шаблонный код для начала и даже развернуть этот образец на работающем веб-сайте в течение нескольких минут с помощью Vercel или Netlify.
Спасибо за чтение! Мы продолжаем улучшать Getform, прислушиваясь к вам, оставляя нам свои запросы на функции или голосуя за существующие.
Посетите наши Страница Codepen, Страница Codesandbox, Страница Zapier и Документация для получения дополнительной информации и руководств.
Если вам нужна помощь в настройке Getform на вашем веб-сайте или в блоге посредника, не стесняйтесь обращаться к нам по адресу [email protected]
