Вы можете использовать форму Google для сбора неограниченного количества ответов формы на своем веб-сайте. В этой статье мы рассмотрим шаги использования форм Google для обработки отправки форм на вашем статическом сайте.
Сначала перейдите в Форму Google и создайте форму, аналогичную прототипу, который вы будете использовать в своем веб-приложении. Для моего веб-сайта мне понадобятся имя пользователя, адрес электронной почты и сообщение.
Убедитесь, что кнопка «Требовать» отключена в вашей форме Google. При желании вы можете реализовать атрибут «required» в своем теге ввода. Кроме того, не забудьте отключить вход через Google в настройках перед отправкой.
Когда вы закончите настройку формы Google, возьмите ссылку и откройте ее в режиме инкогнито или в другом браузере. Таким образом, мы можем четко проверить исходный код формы, не мешая причудливому жаргону.
Скопируйте ссылку действия формы Google и вставьте ее в атрибут действия в HTML-форме вашего веб-сайта, убедитесь, что вы установили метод формы «POST», чтобы обеспечить безопасную отправку данных.
В вашей форме Google каждое поле ввода имеет связанный с ним атрибут имени. Эти имена обычно имеют формат «entry.number». Скопируйте эти атрибуты имени и вставьте их в код HTML-формы вашего веб-сайта, сопоставив их с соответствующими полями ввода.
После внесения всех этих изменений ваша форма теперь может принимать ответ, однако по умолчанию, когда пользователь отправляет форму, он перенаправляется на страницу отправки формы Google. Чтобы предотвратить это перенаправление и обработать отправку на вашей собственной странице, мы будем использовать iframe.
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='./thankyou.html';}"></iframe>
<form method="POST" action="https://docs.google.com/forms/formResponse" target="hidden_iframe" onsubmit="submitted=true;">
..form content
</form>
В приведенном выше коде мы создали элемент an<iframe>, представляющий невидимый фрейм веб-страницы. Он имеет имя и идентификатор «hidden_iframe». Свойство стиля display: none; гарантирует, что фрейм не будет виден пользователю. Атрибут onload проверяет значение переменной submitted и, если оно равно true, перенаправляет пользователя на страницу 'thankyou.html'.
Мы устанавливаем цель в нашей форме на созданный нами iframe, ответ на отправку формы будет загружен в фрейм «hidden_iframe», оставляя его невидимым для пользователя. Мы также устанавливаем для переменной submitted значение true при отправке формы. Это гарантирует, что перенаправление произойдет, когда фрейм завершит загрузку.
Выполнив следующие действия, вы сможете интегрировать Google Forms в свой статический сайт для сбора ответов на формы. Не забудьте настроить дизайн формы в соответствии с потребностями вашего веб-сайта и использовать соответствующую ссылку на действие формы и имена полей ввода.
Вот и все, получайте удовольствие, используя форму Google на своем веб-сайте. До новых встреч, ура!
Если вы хотите, вы можете связаться со мной в Twitter
