Идеальная форма заказов для интернет-магазина. Апгрейдим страницу оформления заказа, чек-лист

Сегодня вы узнаете как можно очень просто сделать форму заказа звонка на своём сайте wordpress. Принцип работы формы заказа звонка: “Пользователь оставляет свои данные в форме заказа звонка (например, имя и номер телефона), жмёт на кнопку Отправить. После отправки появится уведомление – Спасибо! Ваш заказ отправлен, мы с вами свяжемся!” На вашу электронную почту придёт письмо, где будет указано имя и номер телефона человека, который заказал звонок на вашем сайте. Вам только останется перезвонить данному человеку.

Что нам понадобится? Нам понадобится плагин – и всё. Установите и активируйте плагин Contact Form 7. Установить плагин можно прямо из админ-панели, по адресу: Плагины – Добавить новый. Введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу “Contact Form 7”. Здесь у вас уже будет созданная по умолчанию контактная форма. Нажмите под названием формы на вкладку – Изменить .

В открывшемся окне просто нажмите на кнопку – “Вставить тег”. Скопируйте код с названием поля и вставьте его над шорткодом “Телефона”. В коде измените название поля на “Ваш телефон”. Сохраните сделанные изменения.

Далее, перейдите на страницу “Письмо”, чтобы настроить письмо которое будет приходить на вашу электронную почту. В поле “Кому” должен быть указан ваш email. В поле “Тема” укажите к примеру – “Заказ звонка” ! В поле “Тело письма” удалите всё и добавьте два специальных тега, вместо которых в письме будет отображаться имя и телефон. Теги можно скопировать вверху страницы, под заголовком “Письмо”. Перед тегами можно поставить обозначения Имя и Телефон. Сохраните сделанные изменения.

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

На сегодняшний день, , является в структуре лендинг пейдж. Ведь это один из способов принять заказ или отправить каталог вашей продукции, предварительно получив e-mail посетителя.

Создание формы обратной связи – html разметка

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

Получить прайс

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

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


Создание формы обратной связи — css разметка

Давайте зададим стили нашей форме и приведем ее к читабельному виду:

/* Стили формы */ #application { width: 475px; margin: 0 auto; } /*Стили полей для ввода*/ #applicationName, #applicationEmail, #applicationTelephone { width: 100%; height: 73px; background: none; margin-top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; } /*Стили полей при клике по ним*/ #applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus { border: 1px solid #30ad64; } /*Стили текста, выводящегося в placeholder*/ ::-webkit-input-placeholder { color: #efefef; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 19+ */ :-moz-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /* Firefox 18- */ :-ms-input-placeholder { color: #fff; font-family: "PT Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } ::placeholder { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } /*Стили для кнопки*/ .applicationButton { margin-top: 25px; background: #30ad64; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; } .applicationButton:hover { background: #d68c18; }

Если хотите, чтобы цвет кнопки менялся плавно, добавьте в.applicationButton и.applicationButton:hover такую строку:

Transition: .6s;

Где.6s — время анимации в миллисекундах.
Теперь наша форма приобрела красивый вид, сейчас она выглядит так:

Создание формы обратной связи — php разметка

Теперь нам необходимо создать файл application.php. Он будет получать введенные параметры из формы и отправлять их к нам на почту.

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

То есть, когда пользователь нажмет кнопку, его перекинет на страницу application.php. Это полноценная страница, и вы должны оформить ее соответствующим образом.