Создаем модальную форму обратной связи

Для начала создадим молдальную форму, расположим ее в футоре.

Модальная форма

	<div class="modal fade" id="modalFormCallBack" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
		  <div class="modal-dialog" role="document">
				<div class="modal-content">
					  <div class="modal-header">
							<h5 class="modal-title" id="modalLabel">НАПИСАТЬ НАМ</h5>
						  	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
					  </div>
					  <div class="modal-body">
						 ТЕЛО ФОРМЫ
					  </div>
				</div>
		  </div>
	</div>

Делаем открытие этой формы от какой либо кнопки.

Код

<div class="container-footer1__center">
	<a class="container-footer1__center-button" data-bs-toggle="modal" data-bs-target="#modalFormCallBack" href="">Написать нам</a>
</div>

Устнанавливаем плагин 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;}