Разное

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

29.05.1986

Содержание

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

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

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

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

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

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

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

Дело в том, что такая интерактивная форма – это лицо сайта, а значит, она должна быть привлекательной. Что делать если в ней что-то не будет устраивать, особенно спустя какое-то время? Где искать того разработчика, который писал код формы, чтобы он внес нужные изменения? А если отправка формы php найдена на просторах глобальной сети, а навыков в программировании нет, то изменение формы кажется вообще делом невозможным.

Кроме того, контактная форма должна работать как часы

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

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

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

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

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

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

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

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

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

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

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

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

Как структурировать HTML-формы — Изучение веб-разработки

  • Назад
  • Обзор: Forms
  • Далее

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

Уровень подготовки:Основы компьютерной грамотности, и базовые знания HTML.
Цель:Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.

Гибкость HTML форм делает их одной из самых сложных структур в HTML; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и доступность.

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

<form>, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы <form> и реализовывать специальные хуки, чтобы их было проще использовать.

Мы уже встречались с этим в предыдущей статье.

Внимание: Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера.

Стоит учесть, что всегда можно использовать элементы формы вне <form>. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута form. В HTML5 был представлен атрибут form для элементов HTML форм, который позволяет явно связать элемент с формой, даже если он не заключён внутри <form>.

Элемент <fieldset> — это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.

Различные вспомогательные технологии будут использовать <legend> как часть метки label всех элементов внутри <fieldset>. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы <legend> перед произношением названия меток элементов.

Небольшой пример:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

Примечание: вы можете найти этот пример в fieldset-legend. html (также посмотрите на результат).

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

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

Из-за своего влияния на вспомогательные технологии элемент <fieldset> является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как экранный диктор интерпретирует вашу форму.

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

<label for="name">Name:</label> <input type="text" name="user_name">

При правильно связанном элементе <label> с элементом <input> через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».

Если <label> не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.

Обратите внимание на то, что виджет формы может быть вложен в элемент <label>, как на примере:

<label for="name">
  Name: <input type="text" name="user_name">
</label>

Однако даже в таких случаях лучше всё равно указывать атрибут for, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.

Лейблы тоже кликабельны!

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

Например:

<form>
  <p>
    <label for="taste_1">I like cherry</label>
    <input type="checkbox" name="taste_cherry" value="1">
  </p>
  <p>
    <label for="taste_2">I like banana</label>
    <input type="checkbox" name="taste_banana" value="2">
  </p>
</form>

Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).

Несколько лейблов

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

Рассмотрим этот пример:

<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
<!-- Тогда это: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>
<!-- лучше сделать таким образом: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>
<!-- Но этот вариант лучше всего: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input type="text" name="username">
</div>

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

  • В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы <label> могут быть неправильно интерпретированы программой чтения с экрана.
  • Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
  • Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».

Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.

Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!

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

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

В добавок к элементу <fieldset> часто используют HTML-заголовки (например, <h2> (en-US), <h3> (en-US)) и секционирование (например, <section>) для структурирования сложных форм.

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

Каждый отдельный раздел функциональности содержится в элементах <section> и <fieldset>, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе <section> с элементами <fieldset>, содержащими переключатели.

Активное обучение: построение структуры формы

Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.

  1. Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
  2. Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента <head>:
    <link href="payment-form.css" rel="stylesheet">
  3. Далее начните создавать свою форму с добавления внешнего элемента <form>:
    <form>
</form>
  4. Внутри тега <form>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:
    <h2>Payment form</h2>
<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>. </p>
  5. Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент <section>. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка (<li>). Наконец, у нас есть два текстовых поля <input> и связанные с ними элементы <label>, которые находятся внутри элементов <p>, а также поле для ввода пароля. Добавьте этот код в вашу форму:
    <section>
    <h3>Contact information</h3>
    <fieldset>
      <legend>Title</legend>
      <ul>
          <li>
            <label for="title_1">
              <input type="radio" name="title" value="M." >
              Mister
            </label>
          </li>
          <li>
            <label for="title_2">
              <input type="radio" name="title" value="Ms. ">
              Miss
            </label>
          </li>
      </ul>
    </fieldset>
    <p>
      <label for="name">
        <span>Name: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="text" name="username">
    </p>
    <p>
      <label for="mail">
        <span>E-mail: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="email" name="usermail">
    </p>
    <p>
      <label for="pwd">
        <span>Password: </span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="password" name="password">
    </p>
</section>
  6. Сейчас мы перейдём к второму разделу <section> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню (<select>) для выбора типа кредитной карты. Второй — это элемент <input> с типом number для ввода номера карты. Последний виджет — это элемент <input> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types.

    Вставьте следующий код под предыдущим разделом:

    <section>
    <h3>Payment information</h3>
    <p>
      <label for="card">
        <span>Card type:</span>
      </label>
      <select name="usercard">
        <option value="visa">Visa</option>
        <option value="mc">Mastercard</option>
        <option value="amex">American Express</option>
      </select>
    </p>
    <p>
      <label for="number">
        <span>Card number:</span>
        <strong><abbr title="required">*</abbr></strong>
      </label>
      <input type="number" name="cardnumber">
    </p>
    <p>
      <label for="date">
        <span>Expiration date:</span>
        <strong><abbr title="required">*</abbr></strong>
        <em>formatted as mm/yy</em>
      </label>
      <input type="date" name="expiration">
    </p>
</section>
  7. Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент <button> с типом submit, для отправки данных. Добавьте этот код в конец вашей формы:
    <p> <button type="submit">Validate the payment</button> </p>

Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):

Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure.

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

  • A List Apart: Sensible Forms: A Form Usability Checklist
  • Назад
  • Обзор: Forms
  • Далее
  • Ваша первая HTML форма
  • Как структурировать HTML-формы
  • Стандартные виджеты форм
  • The HTML5 input types
  • Other form controls
  • Стили HTML-форм
  • Advanced form styling
  • UI pseudo-classes
  • Проверка данных формы
  • Отправка данных формы

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

  • Как создавать пользовательские виджеты форм
  • Sending forms through JavaScript
  • Property compatibility table for form widgets

Last modified: , by MDN contributors

Контактная форма HTML PHP — кнопка отправки не работает? Или проблема с PHP? [php, html]


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

<form action="webform.php" method="post">
    <h2>Contact Form:</h2>
    <label>
    <span>Your Name:</span><input type="text" name="name" />
    </label>
    <label>
    <span>Email Address:</span><input type="text" name="email" />
    </label>
    <label>
    <span>Subject:</span><input type="text" name="subject" />
    </label>
    <label>
    <span>Message</span><textarea name="feedback"></textarea>
    <input type="button" value="Submit Form" />
    </label>
</form>

Кто поможет мне, может предоставить ссылку на мой сайт, если это необходимо.

Ценю любую помощь 🙂


php html

person user1590368    schedule 29.11.2013    source источник


Ответы (5)

arrow_upward
3
arrow_downward

Вы должны использовать submit как тип кнопки

<input type="submit" value="Submit Form" />

ДЕМО-версия скрипки

person Sridhar R    schedule 29.11.2013


arrow_upward
1
arrow_downward

Посмотреть обновленный FIDDLE

Вы пробовали изменить:

<input type="button" value="Submit Form" />

to:

<input type="submit" value="Submit Form" />

В качестве альтернативы вы можете использовать:

<button >Submit Form</button>

Как у вас сейчас, input type='button' не является допустимым элементом для отправки формы. Для действительных элементов формы У MDN отличная статья — см. разделы ввод и кнопки

person SW4    schedule 29.11.2013


arrow_upward
0
arrow_downward

Замените type=»button» на type=»submit».

<form action="webform.php" method="post">
    <h2>Contact Form:</h2>
    <label>
    <span>Your Name:</span><input type="text" name="name" />
    </label>
    <label>
    <span>Email Address:</span><input type="text" name="email" />
    </label>
    <label>
    <span>Subject:</span><input type="text" name="subject" />
    </label>
    <label>
    <span>Message</span><textarea name="feedback"></textarea>
    <input type="submit" value="Submit Form" />
    </label>
</form>

person Community    schedule 29. 11.2013


arrow_upward
0
arrow_downward

В данном конкретном случае я согласен с предложенными решениями относительно: type="submit.

Но я прибыл сюда из-за того, что мои кнопки внезапно перестали работать, хотя отправка «Выбрать» все еще работала. И это было из-за крошечной ошибки в каком-то Javascript, которая убивала отправку.

Просто что-то еще, чтобы проверить.

person SteveCinq    schedule 07.03.2017


arrow_upward
-1
arrow_downward

попробуйте эту html-форму

<form action="webform.php" method="post">
    <h2>Contact Form:</h2>
    <label>
    <span>Your Name:</span><input type="text" name="name" />
    </label>
    <label>
    <span>Email Address:</span><input type="text" name="email" />
    </label>
    <label>
    <span>Subject:</span><input type="text" name="subject" />
    </label>
    <label>
    <span>Message</span><textarea name="feedback"></textarea>
    <input type="submit" value="Submit Form" />
    </label> </form>

person A. Zalonis    schedule 29.11.2013

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

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

Скопируйте код контактной формы
Скопировать HTML-код чужой контактной формы не так просто, как кажется. Если у вас нет опыта работы с HTML или CSS, вы не сможете добавлять новые полей и изменить дизайн формы. Затем вам нужно запустить сервер с базой данных для отправки ответов, а также скрипты PHP для управлять сбором ответов.

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

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

Используйте AidaForm бесплатно

1

Войдите в AidaForm

Нажмите ссылку Войти в меню веб-сайта на aidaform.com и войдите в ваш аккаунт в AidaForm. Зарегистрируйтесь, если у вас еще нет учетной записи — это свободно!

2

Создать форму

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

Страница контакта с биографией со ссылками на социальные сети

Использование шаблона

Страница контакта био со ссылками на шаблон социальных сетей

Контактная форма с Captcha

Контактная форма.

Дизайн

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

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

Наконец, создайте собственное сообщение, которое ваши посетители увидят после подачи своих запросов.

4

Добавьте HTML-форму на свой веб-сайт

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

Теперь вы знаете, как сделать контактную форму без программирования в AidaForm. Знак прямо сейчас и создайте свою первую форму бесплатно.

Создавайте отличные контактные формы без программирования

  • Используйте настраиваемые блоки для любого случая: дата, загрузка файлов, вопросы с несколькими вариантами ответов, Google Maps и т. д.
  • Добавление полей подписи, проверка полей и защита от спама CAPTCHA и безопасно хранить ответы в личном кабинете — не нужно ничего настраивать вручную

Используйте AidaForm бесплатно

Как использовать готовую контактную форму Код

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

 <дел>
    <дел>
         
Свяжитесь с нами
 
        <р>
            Пожалуйста, отправьте сообщение ниже.  Мы свяжемся с вами в ближайшее время!
        

        

            <дел>
                <дел>
                    <метка для="сообщения">
                        Сообщение: