Устнанавливаем плагин Contact Form 7. Переходим в контактные формы, добавляем новую. Шаблон формы делаем следующего вида:
Шаблон формы
[text* nameperson placeholder "Ваше Имя*"]
[tel* phone placeholder "Телефон*"]
[email mail placeholder "Почта"]
[textarea message placeholder "Ваше сообщение"]
<p class="policy-text">Нажимая кнопку отправить, вы принимаете <a href="/politika-konfidencialnosti" target="_blank">политику конфиденциальности</a> и <a href="/uslovija-soglashenija" target="_blank">условия соглашения</a></p>
[submit "ОТПРАВИТЬ"]
Далее переходи на вкладку, заполняем ее. Поле "Кому" пишем адрес получателя (администратор сайта, оператор), поле "От кого" пишем "[_site_title] <wordpress@dostavkaelki58.ru>", пишем тему письма.
Тело письма делаем вида
Была заполнена форма обратной связи на сайте:
ФИО: [nameperson]
Телефон: [phone]
Почта: [mail]
Сообщение:
[message]
--
Это сообщение отправлено с сайта "DostavkaElki58" (https://dostavkaelki58.ru/)
Далее размещаем нашу форму на сайте, поставив в нужное место шорткод нашей формы.
<? echo do_shortcode( '[contact-form-7 id="280" title="Написать нам"]' ); ?>
Переходим на reCAPTCHA, регистрируем наш сайт и получаем Ключ сайта и Секретный ключ сайта. Переходи на вкладку "Интеграция" плагина "Contact Form 7" и в карточке "reCAPTCHA" заносим эти данные.
Добавляем стилей для нашей формы привязываясь к id формы, что бы стили применялись только на ней.
CSS
/*СТИЛИ ФОРМЫ СВЯЗАТЬСЯ С НАМИ*/
#wpcf7-f210-p211-o1 {
display: flex;
justify-content: center;}
#wpcf7-f210-p211-o1 p {
display: flex;
flex-direction: column;
align-items: center;}
#wpcf7-f210-p211-o1 input {
box-sizing: border-box;
margin: 0 0 5px 0;
padding: 10px;
border: 2px solid #008036;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: 'Ubuntu-Regular';}
#wpcf7-f210-p211-o1 input:focus-visible {
outline: none;}
#wpcf7-f210-p211-o1 textarea {
box-sizing: border-box;
margin: 0 0 5px 0;
padding: 10px;
border: 2px solid #008036;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: 'Ubuntu-Regular';}
#wpcf7-f210-p211-o1 textarea:focus-visible {
outline: none;}
#wpcf7-f210-p211-o1 span.wpcf7-not-valid-tip {
position: absolute;
top: 5px;
right: 5px;
font-size: 15px;
font-weight: 700;}
#wpcf7-f210-p211-o1 p.policy-text {
font-size: 12px;
text-align: center;
line-height: 1;}
#wpcf7-f210-p211-o1 input.wpcf7-submit {
width: 200px;
padding: 5px;
border-radius: 10px;
text-decoration: none;
font-family: 'Ubuntu-Bold';
font-size: 15px;
line-height: 1;
background-color: #008036;
color: #000000;
cursor: pointer;
transition: 1s;}
#wpcf7-f210-p211-o1 input.wpcf7-submit:hover {
box-shadow: 0px 0px 10px 0px #00000073;
transition: 0.5s;}
#wpcf7-f210-p211-o1 div.wpcf7-response-output {
line-height: 1;
margin: 0;
text-align: center;
border-radius: 5px;}
#wpcf7-f210-p211-o1 br {
display: none;}
Или такие.
CSS
/*СТИЛИ ФОРМЫ ЗАПИСАТЬСЯ*/
#wpcf7-f123-o2 {
display: flex;
justify-content: center;}
#wpcf7-f123-o2 form {
width: 100%;}
#wpcf7-f123-o2 span.wpcf7-form-control-wrap {
width: 100%;}
#wpcf7-f123-o2 p {
display: flex;
flex-direction: column;
align-items: center;}
#wpcf7-f123-o2 input {
box-sizing: border-box;
margin: 0 0 5px 0;
padding: 10px;
border: 2px solid #ff9116;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: 'Ubuntu-Regular';}
#wpcf7-f123-o2 input:focus-visible {
outline: none;}
#wpcf7-f123-o2 textarea {
box-sizing: border-box;
margin: 0 0 5px 0;
padding: 10px;
border: 2px solid #ff9116;
border-radius: 5px;
width: 100%;
font-size: 15px;
font-family: 'Ubuntu-Regular';}
#wpcf7-f123-o2 textarea:focus-visible {
outline: none;}
#wpcf7-f123-o2 span.wpcf7-not-valid-tip {
position: absolute;
top: 5px;
right: 5px;
font-size: 15px;
font-weight: 700;}
#wpcf7-f123-o2 p.policy-text {
font-size: 12px;
text-align: center;
line-height: 1;}
#wpcf7-f123-o2 input.wpcf7-submit {
border-radius: 0;
width: 170px;
display: flex;
justify-content: center;
text-decoration: none;
padding: 10px;
background-color: #ffffff;
border: 2px solid #ff9116;
font-family: 'Alaskan';
font-size: 20px;
line-height: 1;
color: #000000;
transition: 0.5s;}
#wpcf7-f123-o2 input.wpcf7-submit:hover {
background-color: #ff9116;
color: #ffffff;
transition: 0.5s;}
#wpcf7-f123-o2 div.wpcf7-response-output {
line-height: 1;
margin: 0;
text-align: center;
border-radius: 5px;}
#wpcf7-f123-o2 br {
display: none;}