Форма заказа php: Делаем форму обратной связи на сайте

php — Отправка формы заказа на e-mail

Здравствуйте.

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

0

На Денвере стоит заглушка на функцию mail. На хостинге все должно работать. Или перепишите скрипт под SMTP.

Вот простейший пример с функцией mail:

<form method="post" action=""> 
Имя отправителя:<br />
<input type="text" name="user" size="50"><br />
E-mail отправителя:<br />
<input type="text" name="user_email" size="50"><br />
Тема сообщения:<br />
<input type="text" name="subject" size="50"> <br />
Текст сообщения:<br />
<textarea name="text" cols="80" rows="10" ></textarea><br />
<input type="submit" name="send_mail" value="Отправить">
</form>
<?php
if (isset($_POST['send_mail']) && isset($_POST['subject']) && isset($_POST['text']) &&
    isset($_POST['user']) && isset($_POST['user_email'])) {
    /* получатели */
    $to = "ВАШ E-MAIL";
    /* тема/subject */
    $subject = $_POST['subject'];
    $text = $_POST['text'];
    $user = $_POST['user'];
    $user_email = $_POST['user_email'];
    /* сообщение */
    $message = '
<html>
<head>
 <title>' .
$subject . '</title> </head> <body>' . $text . ' </body> </html>'; /* Для отправки HTML-почты вы можете установить шапку Content-type. */ $headers = "MIME-Version: 1.0\r\n"; $headers .= "Content-type: text/html; charset=Windows-1251\r\n"; /* дополнительные шапки */ $headers .= "From: " . $user . "<" . $user_email . ">\r\n"; if (mail($to, $subject, $message, $headers)) { echo "<b>Сообщение отправлено!</b>"; } else { echo "Ошибка отправки!"; } } else { echo "<font color=red><b>Не заполненны текстовые поля!!!</b></font>"; } ?>

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

HTML5CSS. ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯


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


Адаптивная форма оформления заказа

Billing Address

Full Name Email Address City

State

Zip

Payment

Accepted Cards

Name on CardCredit card numberExp Month

Exp Year

CVV

Shipping address same as billing

Cart
4

Item 1 $15

Item 2 $5

Item 3 $8

Item 4 $2


Total $30


Создание формы оформления заказа

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

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

Пример

<div>
  <div>
    <div class=»container»>
      <form action=»/action_page. php»>

        <div>
          <div>
            <h4>Billing Address</h4>
            <label for=»fname»><i></i> Full Name</label>
            <input type=»text» name=»firstname» placeholder=»John M. Doe»>
            <label for=»email»><i></i> Email</label>
            <input type=»text» name=»email» placeholder=»[email protected]»>
            <label for=»adr»><i></i> Address</label>
            <input type=»text» name=»address» placeholder=»542 W. 15th Street»>
            <label for=»city»><i></i> City</label>
            <input type=»text» name=»city» placeholder=»New York»>

            <div>
              <div>
                <label for=»state»>State</label>
                <input type=»text» name=»state» placeholder=»NY»>
              </div>
              <div>
                <label for=»zip»>Zip</label>
                <input type=»text» name=»zip» placeholder=»10001″>
              </div>
            </div>
          </div>

          <div class=»col-50″>
            <h4>Payment</h4>
            <label for=»fname»>Accepted Cards</label>
            <div>
              <i></i>
              <i></i>
              <i></i>
              <i></i>
            </div>
            <label for=»cname»>Name on Card</label>
            <input type=»text» name=»cardname» placeholder=»John More Doe»>

            <label for=»ccnum»>Credit card number</label>
            <input type=»text» name=»cardnumber» placeholder=»1111-2222-3333-4444″>
            <label for=»expmonth»>Exp Month</label>
            <input type=»text» name=»expmonth» placeholder=»September»>

            <div class=»row»>
              <div>
                <label for=»expyear»>Exp Year</label>
                <input type=»text» name=»expyear» placeholder=»2018″>
              </div>
              <div>
                <label for=»cvv»>CVV</label>
                <input type=»text» name=»cvv» placeholder=»352″>
              </div>
            </div>
          </div>

        </div>
        <label>
          <input type=»checkbox» checked=»checked» name=»sameadr»> Shipping address same as billing

        </label>
        <input type=»submit» value=»Continue to checkout»>
      </form>
    </div>
  </div>

  <div class=»col-25″>
    <div>
      <h5>Cart
        <span>
          <i></i>
          <b>4</b>
        </span>
      </h5>
      <p><a href=»#»>Product 1</a> <span>$15</span></p>
      <p><a href=»#»>Product 2</a> <span>$5</span></p>
      <p><a href=»#»>Product 3</a> <span>$8</span></p>
      <p><a href=»#»>Product 4</a> <span>$2</span></p>
      <hr>
      <p>Total <span><b>$30</b></span></p>
    </div>
  </div>
</div>



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

Используйте CSS Flexbox для создания адаптивного макета:

Пример

. row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;

  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #4CAF50;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

. btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout — when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction — make the «cart» column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;

  }
}

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

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

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

❮ Назад Дальше ❯

Как сделать

Вкладки
Выпадающие
Аккордеоны
Конвертер
Анимированные кнопки
Боковая Навигация
Верхняя навигация
Модальные коробки
Строки хода выполнения
Параллакс
Форма входа
HTML вставка
Google Карты
Ползунки диапазона
Подсказки
Слайдшоу
Список фильтров
Сортировать список
html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы



Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

PHP Учебник: Форма заказа | HTML-плюшки

Поиск

Продолжаем создавать простую форму заказа. Обработка форм
, подобная этой, является одной из наиболее распространенных вещей, выполняемых с серверными языками
, включая PHP. Для нашего примера мы выбрали форму заказа компонентов
от компании Acme Widget (конечно!) Вот код всей формы
:





Компания Acme Widget




Компания Acme Widget

Форма заказа компонентов


<граница таблицы=0>

Элемент

 
Количество

 


Базы
maxlength=»3″>


Stems



Верхние части
maxlength=»3″ >









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


Теперь давайте разберемся. Как и в нашем последнем примере, большая часть кода, который вы видите, представляет собой обычный HTML. Однако обратите внимание, что ACTION= в выражении FORM
указывает на PHP-файл с именем processorder.php (заглавные буквы, которые мы использовали здесь,
, предназначены только для выделения кода, о котором мы говорим, — это не делает никаких
). разница в том, используете ли вы заглавные или строчные буквы, за исключением того, что имя файла
может быть чувствительным к регистру, если ваш сайт размещен в системе Unix/Linux.).


Когда пользователь нажимает кнопку «ввести заказ», файл, имя которого (URL) отображается
в операторе ACTION, будет загружен, и данные, введенные пользователем в форму
элементов, будут переданы ему. Данные будут идентифицированы в этом файле по
именам полей, используемых в форме, здесь «qtybases», «qtystems» и «qtytops».
По этой причине рекомендуется использовать легко узнаваемые и осмысленные имена, например
, такие как наши.


На самом деле в этой форме нет PHP-кода (поэтому он находится в файле с именем
.html), поэтому мы сразу перейдем к файлу, который будет обрабатывать наш заказ
.

Перейти к следующей части этого руководства


Вернуться к указателю серии руководств

Популярные статьи

Рекомендуемые

Order Forms исходный код готов к загрузке

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

  • Стиль 1
  • Стиль 2

Загрузка полного исходного кода для формы заказа pro.

Валюта: Доллар СШАБританский фунтЕвро

Сколько? Использование одного веб-сайтаИспользование 5 веб-сайтовНеограниченное использование веб-сайтов

Особенности

  • Простой установщик, кодирование не требуется
  • Отправка формы по электронной почте
  • Полностью адаптивен для мобильных браузеров
  • Защищено с помощью SSL/TLS (если включено)
  • Поддержка электронной почты SMTP
  • Защита от спама reCAPTCHA v3
  • Соответствует GDPR
  • Несколько стилей на выбор из
  • Опция автоответчика по электронной почте
  • Легко добавлять или удалять поля
  • Без брендинга, белая этикетка
  • Хостинг на собственном веб-сайте
  • Полный исходный код (HTML, JS, CSS и PHP)

Выберите свои поля

Владельцы лицензий также получат доступ к приложению Form Creator. Это позволяет легко создавать пользовательские формы.

Гарантия возврата в течение 90 дней

Применяются положения и условия возврата

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

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

Требования

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

Мощный установщик

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

защита reCAPTCHA

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

Полностью отзывчивый

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

Настройка электронной почты

У вас есть полный контроль над стилем электронных писем. Форма поставляется со стандартными шаблонами электронной почты на основе HTML и TEXT, вы можете редактировать их в соответствии со своими потребностями.

Проверка формы

Когда посетитель воспользуется вашей формой, валидатор формы проверит правильность заполнения полей.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *