Настройка Contact Form 7 часть первая и вторая

Друзья самый лучший плагин для отправки писем с сайта не всегда мы используем на все 100%

В этом видео я рассказываю:

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

1. Как настроить и изменить стандартные уведомления
2. Создадим форму со своими полями
3. Научимся загружать файлы через Contact Form7
4. Создадим письмо со своим текстом
5. Поменяем стили формы
6. Оформим контакт форм при помощи плагинов
7. Создадим страницу спасибо

Я разбил этот урок на 2 части.

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

А вторая часть полностью посвещана внешнему оформлению форм.

1) Кастомный css https://youtu.be/4CXiYcCuh9Y?t=44
2) Расположить поля горизонтально https://youtu.be/4CXiYcCuh9Y?t=541
3) Плагин для создания красивых форм https://youtu.be/4CXiYcCuh9Y?t=720
4) Создаем форму по своим стилям https://youtu.be/4CXiYcCuh9Y?t=806

Текст который я использовал

Код для страницы спасибо

(Друзья, код может выводиться с неправильными кавычками по этому если копировать будете то лучше отсюда https://e-integrate.ru/nastrojka-contact-form/)

<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘https://example.com/’;
}, false );
</script>

Код для формы с кастомными стилями
<p class=»name-cf»> Ваше имя (обязательно)
[text* your-name] </p>

<p class=»name-cf»> Ваш e-mail (обязательно)
[email* your-email] </p>
<div class=»clear-cf»></div>
<p class=»thems-cf»> Тема
[text your-subject] </p>

<p class=»text-cf»> Сообщение
[textarea your-message] </p>

<div class=submit-cf><p>[submit «Отправить»]</p></div>

===========================

Код которым я оформлял всю форму
#wpcf7-f172-p34-o1 {
margin: 5px;
padding: 10px;
background: #B3AFAF;
font-family: Georgia, «Times New Roman», Times, serif;
color: #000;
}
========================
А этот код я вставлял в кастомайзер
.name-cf {
float:left;
padding: 2px;
}
.name-cf input {
width: 270px;
}
.thems-cf input {
width: 100%;
}
.clear-cf {
clear: both;
}
.text-cf textarea {
width: 100%;
}

Спасибо что посмотрели это видео, следить за обновлением можно подписавшись на канал по ссылке https://www.youtube.com/channel/UCOvS3wi2Tr9Q15xVnWpgBtQ?sub_confirmation=1

Мой второй канал с различными лайфхаками для жизни тут https://www.youtube.com/user/mosgy?sub_confirmation=1

И канал Светланы с простыми рецептами тут https://www.youtube.com/channel/UCotlgDYPTlc661rqYbJbIlQ?sub_confirmation=1

И о том как мы путешествуем можете посмотреть https://www.youtube.com/channel/UC6sQNeM6pOH7q17QKed4SUg?sub_confirmation=1

Ну и подписчикам моего канала анонсом могу рассказать про сайт, который подходит к завершению и там вас ждет приятный сюрприз https://e-integrate.ru

Если нужна личная консультация всегда пожалуйста, пишите на [email protected] договоримся.