Контактная форма для сайта html: Как сделать контактную форму

Как сделать контактную форму

Узнайте, как создать контактную форму с помощью CSS.

Как создать контактную форму

Шаг 1) добавить HTML

Используйте элемент <form> для обработки входных данных. Вы можете узнать больше об этом в нашем учебнике PHP. Затем добавьте входные данные (с соответствующей меткой) для каждого поля:

Пример

    <label for=»fname»>First Name</label>
    <input type=»text» id=»fname» name=»firstname» placeholder=»Your name..»>

    <label for=»lname»>Last Name</label>
    <input type=»text» id=»lname» name=»lastname» placeholder=»Your last name..»>

    <label for=»country»>Country</label>
    <select id=»country» name=»country»>
      <option value=»australia»>Australia</option>
      <option value=»canada»>Canada</option>
      <option value=»usa»>USA</option>
    </select>

    <label for=»subject»>Subject</label>

    <input type=»submit» value=»Submit»>

  </form>
</div>

Шаг 2) добавить CSS:

Пример

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.

Совет: Посмотрите в нашем учебнике формы HTML для того чтобы выучить больше о формах HTML.

Совет: Перейдите в наш CSS Form учебник, чтобы узнать больше о том, как стиль элементов формы.

Как быстро и просто создать контактную форму на сайте

Современный сайт невозможно представить без формы обратной связи. Это неотъемлемая часть должна присутствовать на любом сайте, независимо от его тематики. Контактная форма

Это позволяет не просто отвечать на вопросы посетителей, но даже обрабатывать заявки или заказы. А вот открытие своего электронного адреса чревато тем, что вскоре он будет завален спамом. Для этого спам-боты круглосуточно рыскают по просторам всемирной паутины в поисках новых адресов, куда можно отсылать свою ненужную информацию. В результате захламления почтового адреса можно попросту не заметить важного письма. А вот плагин контактной формы для сайта успешно решает эту задачу. Пользователю остается лишь заполнить специальное поле для отсеивания ботов, например, ввести капчу, и на почтовый ящик владельца сайта будет поступать только нужная корреспонденция.

Какие задачи решает контактная форма на сайте?

Тем не менее, спокойствие веб-владельца – это не единственная задача, с которой успешно справляется контактная форма. Ей удается достаточно успешно осуществлять еще несколько функций. Самыми важными из них можно назвать:

1. Поддержание контакта с аудиторией сайта. Вряд ли кто-то будет спорить с тем, что просто так заполнять форму обратной связи никто не будет. Скорее всего, у человека, который идет на это, возник какой-то вопрос, который он бы хотел задать лично автору сайта. В итоге владелец сайта уже получает заинтересованного пользователя, а может быть даже и потенциального клиента, который поделился своими контактными данными. То есть дальше уже все будет зависеть от владельца сайта.
2. Призыв к действию. Что такое призыв к действию и как он подталкивает пользователей к выполнению различных действий, пояснять не нужно. Но именно его можно связать с контактной формой на сайте. Например, в обмен на контактные данные пользователя, ему можно предложить закрытую рассылку с полезными материалами, скидку на покупку в интернет-магазине, участие в розыгрыше призов и т.д. Такие призывы могут не только помочь в сборе базы контактов для дальнейшего взаимодействия, но и привлечь новых потенциальных клиентов.
3. Оживление страниц при помощи интерактивных форм. Контактные формы могут быть не только статичными. Всплывающие формы, хоть и кажутся многим пользователям сайтов навязчивыми, могут вполне «оживить» страницы сайта. Главное, при создании таких форм – не перестараться.

Как обзавестись контактной формой?

Снабдить свой сайт подобной формой несложно.

Кроме того, контактная форма должна работать как часы, ведь все отправленные сообщения должны дойти адресату, а не потеряться по пути. Представьте, если крупный заказчик отправил через форму обратной связи предложение о сотрудничестве, а автор сайта и ли менеджер интернет-магазина его не получил? Наверное, не нужно объяснять, что повторно отправлять свое предложение он не будет, а уйдет к конкурентам, у которых контактная форма работает как нужно.

FormDesigner – идеальное решение для создания контактной формы

Благодаря использованию онлайн-конструктора форм FormDesigner создать свою интерактивную форму обратной связи стало просто, как никогда. Во-первых, это быстро, всего несколько кликов и форма готова для размещения на сайт. Во-вторых, работать с конструктором неимоверно просто, для этого не нужно быть программистом или иметь специальные навыки или знания. Форма отправки email благодаря конструктору будет создана даже начинающим вебмастером благодаря понятному и простому интерфейсу. В- третьих, в уже созданную форму всегда можно внести изменения в соответствии с новыми пожеланиями или необходимостью. Редактировать форму также просто, как и создавать новую, а благодаря отображению изменений в онлайн-режиме можно сразу видеть все изменения, которые вносятся в форму. Помимо этого, сайт FormDesigner.

• Создания контактных форм с возможность отправлять файл владельцу сайта;
• Сообщения об ошибках при создании форм;
• Возможность создания мультиязычных форм;
• Визуальный дизайнер создаваемых форм;
• Подробная статистика по всем заявкам и многое другое.

Работа с сервисом FormDesigner

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

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

Второй раздел «Элементы» необходим для того, чтобы можно было добавлять, удалять или просто редактировать поля для заполнения. Их можно сделать не просто текстовыми, но и цифровыми и даже с изображениями. Также в этом разделе есть возможность установить кнопки социальных сетей.

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

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

Отдельно стоит отметить, что если при работе с сервисом возникнут вопросы, то можно смело обращаться к технической поддержке, которая поможет решить возникшие проблемы. Начать использовать онлайн-конструктор можно абсолютно бесплатно, при этом получив доступ ко всем наиболее важным функциям онлайн конструктора. С использованием сервиса FormDesigner создание собственных веб-форм для сайта становится неимоверно простым и быстрым.

Видео урок по созданию контактной формы на сайте

Ваша первая HTML форма — Изучение веб-разработки

Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.

Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радио-баттоны, большинство из которых создаются через html-элемент <input>, однако есть и другие элементы, о которых тоже стоит узнать.

В элементах управления форм можно задать правила, указывающие на определенный формат данных или значений, которые могут быть введены (валидация форм), а также к ним могут быть добавлены текстовые строки, описывающие эти элементы для зрячих и незрячих пользователей.

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

Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: <form>, <label>, <input>, <textarea> и <button>.

Прежде, чем продолжить, скопируйте простой HTML-шаблон — вы будете создавать свою форму внутри него.

Элемент

Создание форм начинается с элемента <form>:

<form action="/my-handling-form-page" method="post">

</form>

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы <div> или <p>, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

• Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы.
• Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть «get» или «post»).

Теперь добавьте указанный выше код с элементом <form> внутрь тега <body> в вашем HTML.

Элементы

Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом <label>:

• Поле ввода для имени — single-line text field
• Поле ввода для e-mail — input of type email: однострочное текстовое поле, которое принимает только e-mail адреса.
• Поле ввода для сообщения — <textarea>, многострочное текстовое поле.

В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" name="user_mail">
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea name="user_message"></textarea>
    </li>
  </ul>
</form>

Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.

Здесь элементы <li> используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута for на каждом элементе <label>, который принимает в качестве значение id элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.

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

В HTML-элементе <input> самым важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента <input>. Вы найдёте больше информации об этом далее в статье Стандартные виджеты форм.

• В нашем простом примере мы используем <input/text> для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.
• Для второго поля ввода мы используем тип <input/email>, который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле «умным», позволяя проверять введёные пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.

Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге.  <textarea> — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента <input> вам необходимо использовать атрибут value следующим образом:

<input type="text" value="по умолчанию в этом элементе находится этот текст" />

Если вы хотите определить значение по умолчанию для HTML-элемента <textarea>, вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:

<textarea>
по умолчанию в этом элементе находится этот текст
</textarea>

Элемент

Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или «представлять» информацию после заполнения формы. Это делается с помощью HTML-элемента <button>. Необходимо добавить следующий код перед закрывающим тегом </form>:

<li>
  <button type="submit">Send your message</button>
</li>

HTML-элемент <button> также принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button.

• Клик по кнопке submit (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте action элемента <form>.
• Клик по кнопке reset сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.
• Клик по кнопке button не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.

Примечание: Вы также можете использовать HTML-элемент <input> с соответствующим атрибутом type , чтобы создать кнопку:  <input type="submit">. Главным преимуществом HTML-элемента <button> в сравнении с элементом <input> заключается в том, что <input> может принимать в себя только простой текст, в то время как <button> позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.

Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.

Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.

Сначала необходимо добавить HTML-элемент <style> на вашу страницу внутрь тега head в HTML. Это должно выглядить следущим образом:

<style>

</style>

Внутри тега стилей добавьте следующий код:

form {
  
  margin: 0 auto;
  width: 400px;
  
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  
  font: 1em sans-serif;

  
  width: 300px;
  box-sizing: border-box;

  
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  
  border-color: #000;
}

textarea {
  
  vertical-align: top;

  
  height: 5em;
}

. button {
  
  padding-left: 90px; 
}

button {
  
  margin-left: .5em;
}

Теперь наша форма выглядит намного лучше.

Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент <form> определяет куда и каким способом отправить данные благодаря атрибутам action и method.

Мы определяем имя name для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.

Чтобы проименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea name="user_message"></textarea>
  </div>

  . ..

В нашем примере форма отправит три куска данных с именами «user_name«, «user_email» и «user_message«. Эти данные будут отправлены на URL «/my-handling-form-page» через метод HTTP POST.

На стороне сервера скрипт, расположенный на URL «/my-handling-form-page» получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье Отправка данных формы.

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так: 

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

Дополнительные темы

21 контактная форма для сайта (обратная связь) на jquery

1. Плагин для создания онлайн форм «jFormer»

Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

Реализована возможность перед отправкой сообщения добавлять новые поля.

10. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

11. Система авторизации/регистрации на сайте

Выезжающий блок авторизации/регистрации на сайте. Используемые технологии: PHP, MySQL, jQuery, CSS.

12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

Для реализации выезжающей формы обратной связи для быстрой отправки сообщения. 

14. jQuery плагин «Formwizard»

Плагин для реализации пошаговых форм на сайте.

15. Контактная форма в стиле старой печатной машинки

16. Эффект свечения на jQuery

Контактная форма с эффектом неонового свечения полей.

17. Проверка правильности ввода данных в форму на jQuery

jQuery форма с анимированными подсказками о допущенных ошибках при заполнении.

18. Стильная форма

Проверка правильности заполнения полей перед отправкой.

19. Форма обратной связи выдвигается сверху экрана

Анимационный эффект выезжающей формы обратной связи сверху экрана при нажатии на кнопку «Contact Us».

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

Аккуратная чистая форма.

21. Пошаговые формы

контактная форма – Dobrovoimaster

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

Много раз рассказывал о различных решениях создания контактных форм, подробно расписывал варианты вёрстки и оформления с помощью CSS3. Сегодня хочу представить вам ещё один css-макет оригинальной формы обратной связи. Ничего не обычного и сколь-нибудь вычурного, всё просто, стандартный html-каркас формы помещённый в div-контейнер, поля ввода размещены в отдельные секции, а плавающие размеры позволяют корректно отображаться…

Всем доброго времени суток! Форма обратной связи, или если по простому, контактная форма, это очень важный элемент любого сайта, созданного для людей, и тем более, она важна для блогов, где изначально подразумевается прямое общение с пользователями, посредством электроyной почты. Большинство веб-мастеров не особо заморачиваются по поводу подачи контактных форм пользователю. Чаще всего создаётся отдельная страница,…

Форма обратной связи, или если по другому, контактная форма, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные формы, должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению. Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами…

Всем доброго времени суток! Контактна форма очень важный элемент любого сайта или блога. Удивительно, что оформлению форм обратной связи не уделяется должного внимания, за редким исключением, это стандартный набор полей ввода, обрамленные куцей рамкой и банальная кнопка «Отправить». В свое время, я опубликовал ряд статей посвященных контактным формам. В статье о стиле контактной формы, мы…

Все мы привыкли видеть контактные формы на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя…

Здравствуйте друзья! При создании сайта, зачастую для многих, настоящим камнем преткновения встает вопрос подбора, внедрения и настройки веб-форм для обратной связи, или попросту контактных форм. Для сайтов и блогов работающих на платформе WordPress, все обстоит на много проще, эта утомительная работа, по созданию форм контактов, легко может быть реализована с помощью большого количества специальных плагинов.…

Всем доброго времени суток! В продолжение темы о создании контактной формы, сегодня хочу рассказать, о простом способе интеграции этой самой формы в модальное окно, тем самым предоставить отличную возможность вашим читателям отправлять сообщения с любой страницы, или отдельной записи сайта (блога). Обновлено: 31.10.2014 У нас есть вполне приличная контактная форма, сверстанная на чистом css, как…

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

Создаем всплывающую контактную форму для сайта – Dobrovoimaster

/* устанавливаем слой затемнения фона,
  ** опрделяем позиции, цвет и интенсивность затемнения  */
.black-overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.7;
        opacity:.70;
        filter: alpha(opacity=70);
}
/* устанавливаем рисунок основы,
  ** опрделяем размеры и положение на экране  */
.envelope {
        display: none;
        position: absolute;
        width: 600px;
        height: 340px;
        background: url(images/envelope.png) center no-repeat;
        z-index:1002;
        position: relative;
        margin: 10% auto;
}
/* формируем кнопку закрытия,
  ** размеры, положение на форме  */
. close-btn {
        width: 31px;
        height: 31px;
        display: block;
        cursor: pointer;/* для случая применения отличных от <a> тегов */
        background: url(images/close.png);
        text-indent: -4999px;
}
/* кнопка закрытия при наведении */
.close-btn:hover{
        background: url(images/close-hover.png);
 
}
/* оформляем заголовок формы */
.title {
        font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
        font-size:22px;
        font-weight: normal;
        font-weight: 200;
        text-align:left;
        position: absolute;
        top: 30px;
        left: 40px;
/* можно заменить на другую картинку
   ** или border-bottom: бла бла бла */  
        background: url(images/divider.png) no-repeat bottom;
        color: #545151;
        height: 40px;
        width: 400px;
        margin: 15px 0;
        text-shadow: 1px 1px #FFF;/* тень текста */
}
/* стили для полей ввода */
input[type=text] {
        font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
        font-size: 13px;
        background-color:rgb(255,255,255);
        color: #787474;
        padding-left: 10px;
        width:208px;
        height:33px;
        border-color:rgb(182,182,182);
        border-width:1px;
        border-style:solid;
        -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0. 5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
        box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
        border-radius: 3px;
        -moz-border-radius: 3px;
}
/* меняем оформление полей ввода при фокусе */
input[type=text]:focus, .your-message:focus {
        outline: none;
        background-color:rgb(255,255,255);
        border-color:rgb(126,139,153);
        border: 1px solid;
        -moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
        -webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0. 75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
        box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
        -ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
                progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
        filter:progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
                progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
        font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
        font-size: 13px;
        background-color:rgb(255,255,255);
        color: #787474;
        padding: 10px 0 0 10px;
        width:448px;
        height:93px;
        border-color:rgb(182,182,182);
        border-width:1px;
        border-style:solid;
        -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0. 5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
        box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
        -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
        filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
        position: absolute;
        top: 150px;
        left: 40px;
        border-radius: 3px;
        -moz-border-radius: 3px;
}
 
.your-name {
        position: absolute;
        top: 100px;
        left: 40px;
}
 
.email-address {
        position: absolute;
        top: 100px;
        left: 280px;
}
/* оформляем кнопку отправки */
.send-message {
    background-color: #929FAB;
        background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); 
        background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
        background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
        background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
        background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
        background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
        width:130px;
        height:35px;
        -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0. 5) ,inset 0px 1px 3px rgb(97,108,122);
        -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
        box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); 
        color: #fff;
        font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
        font-size: 13px;
        text-shadow: 0 1px 0 #21405D;
        font-weight: bold;
        border: none;
        cursor: pointer;
        border-radius: 3px;
        -moz-border-radius: 3px;
        position: absolute;
        top: 269px;
        right: 100px;
}
/* оформляем кнопку отправки при наведении */
. send-message:hover{
    background-color: #A0ACB9;
        background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); 
        background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
        background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
        background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
        background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
        background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
        width:130px;
        height:35px;
        -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
        -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
        box-shadow:0px 1px 0px 0px rgba(255,255,255,0. 5) ,inset 0px 1px 3px rgb(97,108,122);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
/* оформляем кнопку отправки в режиме активной */
.send-message:active{
        background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); 
        background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152)));
        background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
        background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
        background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
        background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
        width:130px;
        height:35px;
        -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0. 5) ,inset 0px 1px 5px rgb(65,73,85);
        -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
        box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
        progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}

Как проверить отправляет ли контактная форма что либо на html сайте? — Хабр Q&A

<div>
	<form action="send.php" method="post">
	<div>Подать заявку на&nbsp;подбор программы <span>мы свяжемся с&nbsp;вами в течение 30&nbsp;минут</span></div>
	<div>
		<div><input type="text" name="name" placeholder="ИМЯ" required></div>
		<div><input type="text" name="email" placeholder="E-MAIL" required></div>
		<div><input type="tel" name="phone" placeholder="ТЕЛЕФОН" required></div>
		
	</div>
	<div><button type="submit">Подать</button></div>
</form>

Я подключил php файл send. php cо следующим кодом внутри —

<?php 
 
$sendto   = "[email protected]"; // почта, на которую будет приходить письмо
$username = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
$usertel = $_POST['phone']; // сохраняем в переменную данные полученные из поля c телефонным номером
$usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты
 
// Формирование заголовка письма
$subject  = "Новое сообщение";
$headers  = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
 
// Формирование тела письма
$msg  = "<html><body>";
$msg .= "<h3>Cообщение с сайта</h3>\r\n";
$msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n";
$msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
$msg . = "<p><strong>Сайт:</strong> ".$usertel."</p>\r\n";
$msg .= "</body></html>";
 
// отправка сообщения
if(@mail($sendto, $subject, $msg, $headers)) {
    echo "<center><img src='images/spasibo.png'></center>";
} else {
    echo "<center><img src='images/ne-tpravleno.png'></center>";
}
 
?>

В итоге,адрес в строке браузера после клика на submit меняется на site.ru//#send=ok но ничего так и не приходит на почту.Подскажите где я допустил ошибку?Или может можно как то проверить работоспособность формы и прочего?

10 Бесплатные и простые в использовании Полностью работающие контактные формы в формате HTML

Отзывы клиентов — важнейшая составляющая развития бизнеса в корпоративном мире. Если вы хотите быть лучше, вы должны слушать своего клиента. У большинства компаний, а также у других платформ есть веб-сайты. Веб-сайт — лучший способ общения с покупателем или пользователем. Это полезно, когда дело касается общих отзывов, вопросов поддержки и т. Д. Общение может быть возможным, просто упоминая свой адрес электронной почты и свое имя, и тогда все готово.Иногда требуется капча для предотвращения рассылки спам-ботов. Контактная форма — это правильный и подходящий способ общения. Контактная форма — это удобная и надежная концепция, дающая другим возможность связаться с вами, а также с вашим бизнесом. Использование и реализация контактной формы пользователя так же удобно, как и использование Интернета. Помогаю вам с шаблонами контактной формы сайта.

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

Эта статья поможет тем, кто хочет добавить полностью рабочую контактную форму на HTML-сайты. Мы внимательно перечислили лучшие бесплатные и простые в использовании скрипты контактной формы.

Demo + Скачать

Эта контактная форма основана на Bootstrap. Он использует PHP и AJAX на бэкэнде. Вам не нужно беспокоиться об учебнике по использованию этой формы. Они прикрепили очень чистый и удобный учебник на свой веб-сайт. Вы можете использовать самый популярный интерфейс Bootstrap, который сочетает в себе AJAX и PHP. У этой контактной формы есть некоторые дополнительные функции, такие как классическая CSS-анимация с анимацией.css. JavaScript помогает сделать пользовательский интерфейс более приятным и приятным наряду с асинхронным контентом. Эта контактная форма построена на последней версии Bootstrap 3.3.5. Таким образом, вы получите большинство современных функций Bootstrap. В этой контактной форме используется капча для предотвращения спама. Капча полезна против спамерского бота.

Скачать + демо

В этой контактной форме используются jQuery, PHP и AJAX в качестве серверной части и HTML5 и CSS3 для интерфейса. Существуют премиальные шаблоны, созданные создателем этой контактной формы.Эти контактные формы — самая важная вещь для любого веб-сайта, потому что эти контактные формы дают пользователям возможность предоставить пользовательский опыт и обратную связь, не покидая веб-страницу, поскольку этот контакт с перемещается по основному сайту. Все исходные коды этой контактной страницы совершенно бесплатны, и вы можете ее скачать. Эта контактная форма имеет три поля ввода. Это адрес электронной почты, тема и сообщение. Эта контактная форма также включает функцию вопросов по защите от спама, чтобы избежать нежелательных сообщений. Он также состоит из другой области для ввода ответа пользователя.Вы можете добавить полноэкранный фон, чтобы сделать его более элегантным и красивым.

Скачать + демо

Контактная форма Bit Repository создается с помощью AJAX вместе с captcha. Эта контактная форма проверяет правильность введенной информации в контактной форме в режиме реального времени. В его бэкэнде есть PHP, так что вам не нужно беспокоиться о его производительности. jQuery также используется для создания этой контактной формы. HTML содержит структуру, а CSS придает стиль и красивый вид. Идея создания и реализации этой формы почти такая же, как и у других форм.Функция проверки находится в коде php. Существует три варианта этой формы. Базовый, расширенный и премиальный. Вы можете использовать любой из них по своему усмотрению.

Скачать + демо

Этот веб-сайт содержит полезное и понятное руководство по использованию контактной формы. Этот веб-сайт посвящен реализации и созданию элегантной контактной формы с помощью Bootstrap, AJAX и PHP. Bootstrap используется для разработки контактной формы, а AJAX используется для отправки формы. AJAX отправляет запрос на сервер.Для бэкэнда у нас работает PHP. PHP проверит переданные данные и отправит электронное письмо на наш адрес электронной почты. Мы получим ответ как Не удалось или Отправлено по результату. Чтобы заполнить эту простую контактную форму, нам понадобится код PHP, разметка HTML и код запроса AJAX. Более подробную информацию об этой контактной форме вы найдете на веб-сайте.

Download + Demo

Модальная всплывающая контактная форма элементарна для настройки, если ваш веб-сайт использует Twitter Bootstrap Framework. Загрузочная форма этой контактной формы поможет вам добавить всплывающее окно для ссылки или кнопки.Вам не потребуется дополнительный код JavaScript для реализации этой контактной формы. Вы можете применить эту контактную форму HTML с помощью начальной загрузки за меньшее время, чем ожидалось. Для интеграции этой формы вам потребуются jQuery, AJAX и PHP для серверной части. Не беспокойтесь, вы получите краткое и доступное руководство на сайте. Если вы не понимаете, вы можете спросить их в любое время.

Скачать + демо

Большинство плагинов WordPress поставляются с функциональными, привлекательными формами контактов, которые легко установить и сразу же использовать.Но если вы хотите украсить свой веб-сайт своим дизайном, то вы попали в нужное место. Этот веб-сайт ориентирован на создание формы вашего веб-сайта с использованием в основном CSS3. Этот веб-сайт содержит руководство по использованию и реализации контактной формы. Из этого руководства вы узнаете основы стилизации CSS3, создания контактной формы HTML5 и создания элегантной контактной формы CSS3.

Скачать + демо

Эта форма является бесплатной контактной формой, доступной на рынке. Этот простой и действительный.Эта контактная форма работает как шарм. Он выполнен в стиле CSS, что сделает внешний вид этой контактной формы более привлекательным. Эта форма является загружаемой контактной формой.

Скачать + демо

Эта контактная форма построена только на PHP, AJAX на внутренней стороне. Для интерфейса используются HTML5 и CSS3. Эта контактная форма полностью адаптивна. Вы найдете руководство на веб-сайте.

Скачать + демонстрация

Контактные формы являются наиболее распространенными и легкими для поиска элементами на веб-сайте.Они также имеют решающее значение для сайта для сбора практически любой информации, необходимой от пользователя. Создать контактную форму с помощью bootstrap очень просто. Со всеми встроенными классами вы можете без проблем создать контактную форму. Но бутстрап — это интерфейсный фреймворк. Таким образом, вам понадобится поддержка серверной части для вашей контактной формы. Этот сайт обо всем этом. Вы найдете пошаговое руководство по созданию контактной формы начальной загрузки с помощью PHP. PHP — это быстрый и самый популярный серверный язык. Вы увидите встроенный код предотвращения спама на веб-сайте, а также проверку формы.

Скачать + демо

Контактная форма является важной частью любого веб-сайта. Это создает связь между покупателем и бизнесменом. Легко управлять. Контактная форма отрабатывает ваш сайт. Благодаря всем встроенным функциям и обучающим материалам вы сможете создать любую контактную форму за считанные минуты.

Как легко разместить форму на вашем веб-сайте

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

Снова и снова я сталкиваюсь с людьми, которые выдергивают волосы, пытаясь получить простую контактную форму (или любую форму любого типа) на своем сайте, или выполняют это очень долгим и неэффективным способом.

Это руководство научит вас использовать лучшие инструменты для быстрого создания форм и встраивания их на свой веб-сайт , будь то простой веб-сайт HTML / PHP или веб-сайт WordPress.

Мы начнем с использования сторонних компаний, таких как Survey Monkey и Google Forms, чтобы как можно быстрее создать форму. Мы не будем тратить время на настройку цветов или что-то в этом роде. Это БЫСТРОЕ руководство, как это сделать. Затем мы покажем, как создать свою собственную форму в WordPress или в обычном PHP-коде. Последний раздел посвящен размещению этой формы на вашем сайте.

Создание формы в Survey Monkey

Сначала перейдите на Surveymonkey.com и войдите в свою учетную запись или создайте новую учетную запись.Если будет предложено, заполните начальные вопросы, чтобы перейти к первому экрану в их системе (см. Рисунок ниже). Затем вы можете начать с нуля или выбрать шаблон. Выберите первый шаблон, как показано на рисунке, чтобы мы могли показать вам, как как можно быстрее встроить его на свой веб-сайт 🙂

Далее вам будет предложено несколько вариантов того, как распространить вашу форму по всему миру. Разумеется, выберем «встроить на сайт» (см. Рисунок ниже).Позже вы можете опробовать другие методы распространения.

Затем вам нужно выбрать «Встроенный опрос» (см. Рисунок ниже).

Наконец, вы увидите код javascript, который активирует вашу новую форму опроса! Щелкните один раз на блоке кода, и его текст будет выделен, как показано на рисунке ниже. Когда он будет выделен, просто нажмите Ctrl + C (или Cmd + C на ПК Apple), чтобы скопировать его.

Мы вставим этот код на ваш веб-сайт в разделе «Встраивание» ниже, и мы расскажем, как сделать это как на обычном веб-сайте HTML5, так и на веб-сайте WordPress!

Создание формы в Google Forms

Для доступа к Google Формам вам сначала понадобится бесплатная учетная запись Gmail.Если у вас нет учетной записи Gmail, это… прискорбно. Но даже если вы не хотите иметь адрес Gmail для электронной почты, вы можете создать бесплатную учетную запись только для входа во все бесчисленные службы Google. Это предварительное условие для этого раздела. Я предполагаю, что вы можете войти в Google Диск, используя имя пользователя учетной записи Google, которое, скорее всего, является вашим адресом Gmail.

Сначала перейдите по этому URL-адресу: http://drive.google.com. После того как вы войдете в Google Диск, вы увидите следующий экран, показанный ниже.Вам нужно нажать «NEW», затем «More», затем «Google Forms» (как показано красным на рисунке ниже).

И вуаля! Вы мгновенно перейдете к форме, готовой к настройке, как показано на следующем рисунке ниже. Нет процесса настройки. Никакого «волшебника». Мне очень нравится эта часть Google Forms. Вы сразу же переходите к делу. И вы просто нажимаете на области, которые хотите отредактировать, и вводите текст прямо на экране. Там, где написано «Форма без названия», просто нажмите на нее и дайте имя.

Затем нажмите кнопку «Отправить», показанную красным на следующем рисунке. Обратите внимание на примеры имен, которые я дал всем разделам формы, просто щелкнув по ним и набрав.

Наконец, вы попадете в диалоговое окно «Отправить форму», где, как показано красным цветом, вы сначала захотите нажать кнопку «<>», чтобы получить доступ к встроенному коду HTML, а затем просто нажмите « КОПИРОВАТЬ »в правом нижнем углу этого диалогового окна. Это скопирует код вставки в буфер обмена.

Вот и все! Вы вставите его на свой веб-сайт в разделе «Встраивание» ниже, и мы расскажем, как сделать это как на обычном веб-сайте HTML5, так и на веб-сайте WordPress!

Создание формы в MailChimp

Сначала зайдите в MailChimp и войдите в систему или создайте бесплатную учетную запись. MailChimp полностью ориентирован только на формы сбора электронной почты. Это означает, что мы создадим простую форму, которую посетители вашего веб-сайта будут использовать для регистрации в вашем списке, после чего вы сможете отправлять им все еженедельные или ежемесячные информационные бюллетени, обновления и т. Д.MailChimp — один из лучших, чистых и простых в использовании поставщиков списков рассылки.

После входа в систему нажмите «Списки» в верхнем левом меню (см. Экран ниже). Затем нажмите кнопку «Создать список» справа. Вы попадете в простую форму, которую необходимо заполнить, чтобы создать список рассылки. Заполните его и нажмите «Далее», чтобы завершить этот шаг.

Теперь вы можете увидеть свой новый список на экране. Прокрутите вниз и нажмите «Создать форму регистрации», чтобы продолжить (см. Экран ниже).

На следующем экране вам нужно будет нажать кнопку «Выбрать» справа от «Встроенные формы» (см. Снимок экрана ниже).

Наконец, вы попадете на экран настройки формы (см. Ниже)! Для целей этого руководства оставим все как есть. Прокрутите вниз, щелкните код (выделен синим на снимке экрана) и скопируйте его в буфер обмена.

Вот и все! Вы вставите этот код на свой веб-сайт в разделе «Встраивание» ниже, и мы расскажем, как это сделать как на обычном веб-сайте HTML5, так и на веб-сайте WordPress!

Создание формы в WordPress

Вот краткое руководство по самому быстрому и простому способу создания формы в WordPress.В этом руководстве предполагается, что у вас уже есть настроенный сайт WordPress. Мы начнем с панели инструментов, экрана, который вы видите при входе в админку WordPress. Сначала в меню левой боковой панели нажмите «плагины» (как выделено красным ниже).

На следующем экране не забудьте нажать синюю кнопку «Добавить новый» (как выделено красным ниже), чтобы перейти к нужному экрану установки плагина.

Затем введите «WPForms» в выделенное ниже поле.

Первое поле, которое появится, будет для «WPForms», одного из лучших плагинов форм WordPress, доступных сегодня.Нажмите кнопку «Установить сейчас», как выделено, и она превратится в синюю кнопку «Активировать». Нажмите и на это :).

Вы сразу попадете на начальный экран WPForms, как показано ниже. Нажмите большую кнопку «Создать свою первую форму», как показано.

Затем дайте форме название. Я выбрал для себя «Сказать привет». Затем нажмите «Создать простую контактную форму», как выделено.

Вы сразу же попадете на экран с вашей формой, включая имя, фамилию и адрес электронной почты.А пока оставим все как есть. Вы можете пойти и отредактировать вещи позже. На данный момент нажмите кнопку «Вставить», как выделено ниже, и появится всплывающее окно. Я выделил код встраивания синим цветом, но вам даже не нужно его копировать (вы поймете, почему, сделав еще несколько шагов). Просто щелкните «x», чтобы закрыть окно, а затем большой «x» в правом верхнем углу, чтобы выйти из интерфейса WPForms и вернуться в обычную административную область WordPress.

Теперь, когда вы вернулись в обычный режим WordPress, нажмите «Страницы», как показано ниже, в меню левой боковой панели.Здесь мы временно активируем форму.

Затем нажмите «Добавить» вверху слева (как показано ниже).

Теперь вы перейдете на экран редактирования страницы. Вы, вероятно, не увидите больших фиолетовых кнопок «Редактор Divi», которые у меня есть, но игнорируйте их. Вы увидите выделенную кнопку «Добавить форму». Эта кнопка существует, потому что вы установили плагин WPForms (на самом деле плагины WordPress могут добавлять небольшие меню и кнопки повсюду). Нажмите здесь.

Вы увидите всплывающее окно с нашей формой «Сказать привет», которая отображается как первый вариант в раскрывающемся списке. Просто нажмите синюю кнопку «Добавить форму» в правом нижнем углу этого окна, чтобы продолжить.

Теперь вы увидите текст шорткода, который вам не нужно было копировать ранее, автоматически вставленный в область редактирования :). Теперь просто нажмите синюю кнопку «Опубликовать», как выделено ниже.

Как только это будет сделано, вы увидите поле в верхней части экрана с надписью «Страница опубликована.Просмотр страницы». Нажмите на эту ссылку (как показано), чтобы просмотреть свою новую живую форму!

Ага, базовая форма. Выглядит хорошо! Если вы заполните его и нажмете «Отправить», оно будет отправлено на адрес электронной почты, указанный в качестве адреса электронной почты администратора WordPress. Давайте вернемся и еще раз проверим, все ли у вас так, как вы хотите. Закройте живую форму и вернитесь в админку WordPress.

Опять же, в меню левой боковой панели нажмите «Пользователи» (как показано синим цветом ниже).Первый пользователь — это учетная запись администратора, убедитесь, что адрес электронной почты указан правильно. Если нет или вы не являетесь администратором, вы можете вернуться к экрану настроек WPForms, щелкнув «WPForms» в меню слева (всего три над «Пользователи» ;-).

Вот и все! Обязательно заполните живую форму и убедитесь, что она правильно отправлена ​​на указанный вами адрес электронной почты. Вы можете добавить форму на любую страницу или сообщение в блоге, нажав кнопку «Добавить форму» на любой странице или экране редактирования сообщения.

Что замечательно в WPForms, так это то, что с профессиональной версией вы можете получить подключаемые модули для MailChimp и множества других маркетинговых инструментов.Я также считаю, что его интерфейс плагина действительно гладкий и красиво оформлен. Gravity Forms и Ninja Forms — также два других хорошо известных, замечательных плагина для форм WordPress, которые вы также можете попробовать.

Создание формы в PHP

В этом разделе описаны основные шаги создания формы на PHP для вашего веб-сайта. Это чистый код HTML и PHP — без WordPress, без встраивания сторонней формы, только чистое кодирование! Это, безусловно, самый сложный метод, и шаги в этом разделе могут вызвать у вас намного больше вопросов, чем шагов! Тем не менее, почти любой хороший создатель контента, маркетолог или базовый владелец веб-сайта должен иметь базовые знания этих инструментов и этого метода редактирования веб-сайта.

Мы собираемся начать с простого поиска в Google по запросу «php contact form». Google автоматически предложил мне добавить «с проверкой» в мой поиск, и как веб-разработчик я согласился (см. Изображение ниже) — проверка в основном означает небольшие сообщения, которые появляются, когда вы оставляете поле формы пустым, например, в котором говорится: « это поле не может быть пустым ».

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

Перейдя на GitHub, найдите зеленую кнопку «Клонировать или загрузить» в правой части страницы. Щелкните по нему, чтобы открыть небольшое всплывающее окно. Нажмите «Загрузить ZIP» (выделено ниже). Если вы опытный разработчик, вы можете клонировать проект в свой собственный репозиторий git (в честь которого назван GitHub), но если бы вы знали, как это сделать, вы бы, вероятно, не читали это руководство ;-).

ZIP-файл уже загружен в вашу папку загрузок, но прежде чем мы начнем его искать, я должен подчеркнуть, что вы должны прокручивать вниз каждый раз, когда находитесь на GitHub, и читать (или хотя бы бегло просматривать) документацию по проекту! Это то, что вышеупомянутые опытные инженеры назвали бы RTFM, что является сокращением от «Прочтите…». гм… Fahrvergnügen… Manual »№

В выделенном разделе ниже вы видите, что вы должны отредактировать файл с именем «config.php» и указать адреса электронной почты от и до , чтобы контактная форма могла правильно отправлять электронные письма.Если вы сначала сразу броситесь прямо к ZIP-файлу, вы потеряетесь и расстроитесь на сотни часов, пока не сбросите компьютер с обрыва, рядом с которым сидели, работая над этой формой обратной связи.

На следующем экране ниже я показываю ZIP-файл, который был загружен в мою папку «Загрузки» в OS X, которую я использую на своем MacBook Pro. Если бы у меня был компьютер с Windows, он, конечно, мог бы быть в другом месте.

Обратите внимание, что внутри внешней папки есть куча файлов и папка с именем «contact-form» вверху списка.Как правило, этот внешний список файлов является очень сложным для разработчиков материалом, и вам не о чем беспокоиться. Например, файл с именем «README.md» на самом деле является той же самой информацией в инструкциях по любому проекту Github, которую вы читали на предыдущем шаге. Итак, основной шаблон состоит в том, что вы берете папку проекта (в данном случае с именем «contact-form») и просто перетаскиваете ее в свою программу FTP, чтобы загрузить ее на свой веб-сайт.

Опять же, этот шаг может сильно различаться между Mac, Windows, Linux и любым FTP-клиентом, который вы используете.Я использую Mac OS X с последней версией Transmit (версия 5), возможно, это лучший FTP-клиент из когда-либо созданных! Я уже настроил подключение к своему веб-сайту в настройках Transmit (вам нужно знать, как это сделать с помощью FTP-клиента). Но как только вы войдете, вы увидите что-то вроде экрана ниже, на котором перечислены все файлы моего веб-сайта. Обратите внимание, что в красном кружке ниже я просто перетащил папку «контактная форма» в свое окно FTP, и она была загружена на мой веб-сайт. (Я также переименовал его в «_contact-form» с подчеркиванием в начале имени файла, чтобы он шел первым в списке по алфавиту.)

Заметьте также, что я нахожусь внутри папки «contact-form», которая содержит папку «config», а внутри нее находится наш специальный файл «config.php». Это тот, который вы знаете, что вам нужно отредактировать, если вы прочитали эти инструкции GitHub выше! Одна действительно крутая вещь в Transmit заключается в том, что я могу настроить его для открытия любых текстовых файлов, которые я дважды щелкаю, прямо в моем текстовом редакторе Sublime Text 3 (который является одним из лучших редакторов кода на планете)! Это позволяет мне пропустить весь процесс загрузки файла, открытия загруженного файла и последующей его повторной загрузки после редактирования.Вместо этого он просто открывается прямо в Sublime Text (с цветным текстом для загрузки), а , когда я нажимаю Cmd + S (для сохранения файла), он автоматически повторно загружается на мой сайт!

Ниже вы увидите, как выглядит мой текстовый редактор. Я выделил желтым цветом ту часть, которую нам нужно отредактировать. Обратите внимание, что я заполнил соответствующие разделы моими адресами электронной почты. Я помещаю свой личный адрес электронной почты в раздел с по , а раздел с — с адреса «веб-формы», что нормально; это просто тест с помощью контактной формы.Реальная установка могла использовать «info @» или «no-reply @».

ОК! После редактирования этого файла наша контактная форма готова! Мы можем перейти прямо к действующему URL: http://plu.sx/_contact-form/index.php. Обратите внимание, что форма выглядит довольно красиво, и проверка формы работает, если вы попытаетесь отправить, не заполнив все.

После того, как вы правильно заполните форму, вы попадете на последний экран после нажатия кнопки «Отправить». В сообщении формы отображается «Электронное письмо успешно отправлено.» Большой!

Но будьте осторожны !! Тот факт, что контактная форма считает, что сообщение было отправлено вам, не означает, что вы получите электронное письмо. Опять же, этот шаг может сильно отличаться, поскольку существуют тысячи настроек серверов, компаний веб-хостинга и конфигураций PHP, которые могут вызвать любое количество проблем. Если вы на самом деле не получили электронное письмо, вам придется устранить неполадки на своем сервере (или позвонить в хостинговую компанию) и спросить их, что пошло не так. Взглянув на файл SimpleMail.class.php, скрывающийся в папке «contact-form», я вижу, что он использует функцию PHP sendmail () для обработки электронной почты.К счастью для меня, это сработало нормально, без дальнейших головных болей, и на этом этапе контактная форма работала нормально.

Вот и все! Как видите, версия этого руководства для PHP очень сложна, связана с возможными ошибками, очень сложна для устранения неполадок и полна ужаса! Теперь вы можете интуитивно понять, почему такие компании, как MailChimp, так успешны. Они обрабатывают всю настройку сервера и код со своей стороны и просто предоставляют вам простой код для встраивания. Уровень сложности снижается до 99%, а простота использования, наоборот, увеличивается.

Но если вы настроены на использование PHP-решения, вы должны уметь выполнять все эти шаги, и, в конце концов, у вас есть полный контроль над тем, как настроить форму и как она работает. Практически нет ограничений на то, что вы можете программировать с помощью HTML, PHP и Javascript. Например, вы можете отправить свою контактную форму по электронной почте, сохранить имя посетителя в отдельной базе данных и даже подключиться к MailChimp или любым другим службам, которые мы рассмотрели, — и все это одним нажатием кнопки «Отправить».

Встраивание формы на ваш веб-сайт

В этом разделе мы рассмотрим встраивание формы на ваш веб-сайт как в WordPress, так и в обычном HTML.

Сначала выберите, какой код внедрения (который мы создали в одном из разделов выше) вы хотите использовать:

Вот наш код для вставки MailChimp

Вот наш код для вставки SurveyMonkey

Вот наш код встраивания Google Forms

Интересно, что каждая из этих служб использует свой подход к встраиванию.MailChimp просто предоставляет вам простой блок HTML. SurveyMonkey предоставляет вам блок javascript, который создает для вас HTML-форму. А формы Google предоставляют вам iFrame, который похож на маленькое окно прямо на их веб-сайт. Каждый из этих методов требует, чтобы вы либо вставили код где-то между тегами на одной из ваших веб-страниц для простой HTML-страницы или в соответствующую область WordPress, если вы ее используете. Давайте рассмотрим каждую:

Встраивание вашей формы в обычный HTML-сайт

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

Здесь вы увидите контактные формы, которые мы создали выше, и если вы выберете Cmd + Opt + U в Google Chrome, вы откроете страницу «просмотреть исходный код», на которой будет отображаться HTML-код для этой страницы. Если вы прочитаете этот код, то увидите, как различные приведенные выше коды внедрения были просто вставлены под верхним тегом страницы. Я добавил немного CSS, чтобы центрировать каждую форму в красивом поле и выделять их на сером фоне, чтобы вам было легче их увидеть.

Встраивание формы в WordPress

Во-первых, вам нужно войти в свою панель управления WordPress. Опять же, это предполагает, что у вас уже настроен WordPress. В этом случае войдите в свою админку WordPress, и мы начнем с нажатия меню «Плагины», обведенного красным ниже. Затем нажмите кнопку «Добавить» в верхнем левом углу страницы плагинов, показанной ниже.

Примечание. Мы собираемся найти и установить плагин XYZ Snippets, который помогает идеально сохранять HTML.Если вы попытаетесь вставить HTML или Javascript непосредственно в сообщение или страницу WordPress без какой-либо помощи со стороны подобного плагина, вы можете получить нестандартные эффекты, потому что WordPress любит автоматически добавлять кучу форматирования.

Теперь введите «вставить фрагмент HTML» в поле поиска плагина, и вы увидите экран ниже. Нажмите «Установить сейчас» (обведено красным ниже), а затем сразу после нажатия «Активировать».

Как только вы это сделаете, в левом боковом меню WordPress появится меню «XYZ Snippets».(См. Обведено ниже.) Щелкните по нему, чтобы перейти на страницу плагина, затем нажмите синюю кнопку «Добавить новый фрагмент HTML» в верхней части страницы.

Теперь на следующем экране ниже давайте просто назовем фрагмент «Google Forms» и вставим HTML-код Google Forms, который мы показали выше, в форму. Наконец, просто нажмите «Создать».

Теперь вы увидите экран, показанный ниже, с коротким кодом фрагмента HTML, выделенным синим цветом. Вы можете выбрать его здесь и скопировать, но это не обязательно.Давай просто идем дальше.

Щелкните пункт меню слева «Страницы», как показано ниже, затем щелкните «Добавить» вверху экрана или отредактируйте существующую страницу. А пока я отредактирую страницу «тестовой формы», которую мы создали в разделе выше.

Теперь проверьте область, которую я обвел красным ниже. Опять же, плагины WordPress могут создавать новые кнопки по всей системе. Помните, когда мы добавили плагин WPForms выше, у нас появилась новая кнопка «Добавить форму», а теперь у нас есть новая кнопка «Вставить фрагмент HTML».Вы увидите один созданный нами фрагмент, «Google Form», который отображается в меню. Нажмите на него, и шорткод, который вам не нужно копировать ранее, автоматически добавится в окно редактирования ниже! Я решил переместить шорткод Google Form в верхнюю часть окна для этой демонстрации (над шорткодом WPForms, который мы создали ранее). Наконец, нажмите синюю кнопку «Обновить», также обведенную красным ниже.

Наконец, нажмите «Просмотреть страницу», обведенную красным ниже!

Это перенесет вас на вашу действующую страницу WordPress, вуаля! Ваша форма Google прекрасно встроена в.Вот действующий URL: http://carlosaugusto.net/test-form.

В заключение

Существует тысяча способов создания всевозможных форм с различными поставщиками и множество способов интеграции этих форм в ваш веб-сайт. Очевидно, мы увидели, что для неопытного (или неопытного) разработчика создание собственной формы на чистом HTML и PHP может быть чрезвычайно трудным. Вот почему так привлекательно создавать формы с помощью сторонних инструментов и сервисов.

Более того, у каждого поставщика форм есть свои уникальные особенности.MailChimp в основном ориентирован на создание списков адресов электронной почты, которые являются важным маркетинговым инструментом. Google Forms больше ориентирован на создание красивой формы как можно быстрее и сбор данных опросов или любых других данных, которые вы можете себе представить. Наконец, SurveyMonkey ориентирован на… как вы уже догадались. Обезьяны. (Шучу: опросы!)

Мой любимый метод в этом руководстве — создание формы в Google Forms и интеграция ее в мою любимую CMS, WordPress. Я настоятельно рекомендую этот подход по сравнению с ручным созданием веб-компонентов, таких как формы, самостоятельно.Если вам нужна личная консультация по любой из этих тем или у вас есть предложения по улучшению этого руководства, не стесняйтесь обращаться ко мне (см. Мой профиль автора ниже).

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

Ваша первая форма — Изучите веб-разработку

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

Веб-формы являются одной из основных точек взаимодействия между пользователем и веб-сайтом или приложением.Формы позволяют пользователям вводить данные, которые обычно отправляются на веб-сервер для обработки и хранения (см. Отправка данных формы далее в модуле) или используются на стороне клиента для немедленного обновления интерфейса каким-либо образом (например, добавление другой элемент в список или показать или скрыть функцию пользовательского интерфейса).

HTML веб-формы состоит из одного или нескольких элементов управления формой (иногда называемых виджетами ), а также некоторых дополнительных элементов, помогающих структурировать форму в целом — их часто называют формами HTML .Элементы управления могут быть однострочными или многострочными текстовыми полями, раскрывающимися списками, кнопками, флажками или переключателями и в основном создаются с использованием элемента , хотя есть и другие элементы, о которых стоит узнать.

также могут быть запрограммированы для принудительного ввода определенных форматов или значений ( проверка формы ) и в сочетании с текстовыми метками, описывающими их цель как для зрячих, так и для слепых пользователей.

Перед тем, как приступить к программированию, всегда лучше сделать шаг назад и подумать о своей форме.Создание быстрого макета поможет вам определить правильный набор данных, который вы хотите попросить ввести пользователя. С точки зрения пользовательского опыта (UX) важно помнить, что чем больше ваша форма, тем больше вы рискуете расстроить людей и потерять пользователей. Будьте просты и сосредоточьтесь: запрашивайте только те данные, которые вам абсолютно необходимы.

Разработка форм — важный шаг при создании сайта или приложения. В задачу этой статьи не входит рассмотрение пользовательского опыта форм, но если вы хотите углубиться в эту тему, вам следует прочитать следующие статьи:

В этой статье мы создадим простую контактную форму.Сделаем набросок.

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

Элемент

Этот элемент формально определяет форму.Это элемент контейнера, такой как элемент