Корректировка контактных форм на CMS WordPress

Корректировка контактных форм на CMS WordPress (плагин СF7) https://ml.com.ua

Слетели после обновления шаблона

Описание

Подкорректировать три контактные формы (CF7) – некоторые стили слетели при обновлении шаблона (некоторые моменты валидации, крестик закрытия, отображение в мобильной версии сайта)

Как сделать так, чтобы при следующем обновлении шаблона – настройки форм не слетали?

Форма 1 – «Отримати каталог» (SendKatalog)

Поля:

“Ваше ім’я” - обязательное поле

“Ваш телефон” - обязательное поле

“Ваш e-mail” - обязательное поле

Поле “Бочка меда” - скрытое поле - на ботов

Кнопка “Отримати Каталог”

Добавить – еле заметный крестик в правом верхнем углу формы, чтобы пользователь при желании мог закрыть форму – нажатием на данный крестик

Форма 2 – «Отримати детальну інформацію” (MoreInfo) - всплывающая форма в лайтбоксе - сейчас пример установлен в карточке товара

особые требования к этой форме - в Название формы должен подтягиваться название товара (Подтягивается название товара в Заголовок формы)

“Ваше ім’я” - обязательное поле

“Ваш телефон” - обязательное поле

“Ваш e-mail” - обязательное поле

“Ваш коментар” - не обязательное поле

Поле “Бочка меда” - скрытое поле - на ботов

Кнопка “Більше інформації”

http://prntscr.com/g79emb

Добавить – еле заметный крестик в правом верхнем углу формы, чтобы пользователь при желании мог закрыть форму – нажатием на данный крестик

Форма 3 – «Контактная форма” на странице Контакти (Contact) - не всплывающая форма

“Ваше ім’я” - обязательное поле

“Ваш телефон” - обязательное поле

“Ваш e-mail” - обязательное поле

“Ваш коментар” - не обязательное поле

Поле “Бочка меда” - скрытое поле - на ботов

Кнопка “Надіслати”

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

https://ml.com.ua/ml/

2.1. Подкорректировать Форму 4 - MoreInfoML

аналог Формы2, но такие отличия:

в Заголовок формы подтягивается текст на баннере (а не название товара)

http://prntscr.com/gfq96x

При отправке контактной формы –пользователь должен попасть на эту страницу:

https://ml.com.ua/thankyou/

2.2.
Подкорректировать Форму 5 – SendKatalogML

аналог Формы1, но такие отличия:

При отправке контактной формы –пользователь должен попасть на эту страницу:

https://ml.com.ua/thankyou/

3. Проверить Валидацию отправки формы (чтобы она отправлялась ТОЛЬКО после правильного заполнения формы Посетителем)

То есть, если пользователь неправильно (умышленно или неумышленно) заполнил форму - чтобы она не отправлялась, а указывала на ошибки, которые допустил пользователь

Нам необходима валидация формы, которая выполняла бы следующие правила правильного заполнения формы:

3.1. В поле «Ваше ім'я», необходимо чтобы были только буквы (цифры и спец символы не допускаются)

3.2. При клике в поле Телефон: Должно дописывать автоматически +38 (по аналогии как на сайте Медилайн http://mediline.com.ua/);

3.3 Следующим символом, который вводит пользователь (после автоматически добавленного +38) должен быть "0"

3.4 В поле телефон не должно быть более 13 знаков (с учетом "+380")

3.5 В поле email должен присутствовать символ "@" и "."

4. Необходимо настроить получение данных при отправке формы (можно с использованием плагина CF7 - dynamic text extension)

- адрес страницы с которой ушла форма

- Title формы

- Текст кнопки формы

- ip отправителя