/ Адаптивность / Сбор ящиков для подписки в БД

Сбор ящиков для подписки в БД

Создадим форму для сбора email для подписки, которая будет сохранять значения в специальную таблицу в БД.

Форма

<form id="form_site_subscribe" class="form_site_subscribe" method="post">

	<h2>Подпишитесь на нашу рассылку</h2>
	<p>Будьте в курсе последних акций и новостей</p>

	<div>
	<input type="text" name="sub_email" class="sub_email" placeholder="E-mail">
	<button type="submit" class="button">Подписаться</button>
	</div>
	<div class="submit-ajax" style="display: none;"></div>
	
</form>

Скрипт по передаче данных (ajax)

$('#form_site_subscribe').on('submit', function (event) {
	event.preventDefault();

	var email = $('#form_site_subscribe .sub_email').val();
	
	$.ajax({
		url: "/wp-admin/admin-ajax.php",
		method: 'post',
		data: {
			action: 'ajax_subscribe',
			email: email
		},
		success: function (response) {
			$('#form_site_subscribe .submit-ajax').slideDown();
			$('#form_site_subscribe .submit-ajax').html(response);
			setTimeout(function () { $('#form_site_subscribe .submit-ajax').slideUp(); }, 2000);
		}
	});
});

Стили формы

#form_site_subscribe {padding: 15px 0;}

#form_site_subscribe div {display: flex; justify-content: center;}

#form_site_subscribe div input {padding: 10px 20px; border: none; border-radius: 50px 0 0 50px;}

#form_site_subscribe div button {padding: 10px 30px; border: none; border-radius: 0 50px 50px 0; cursor: pointer;}

#form_site_subscribe div button:hover {background: #ccc;}


@media screen and (max-device-width: 480px) { 
	#form_site_subscribe div input {width: 50%;}
	#form_site_subscribe div button {padding: 10px 15px;}
}

Функция по отправке формы

Данная функция отправляет очередной подписанный e-mail на указанный адрес администратора и сохраняет его в БД.

Сначала предварительно создаем необходимую БД

register_activation_hook(__FILE__, function() {
	global $wpdb;

	$wpdb -> query("CREATE TABLE IF NOT EXISTS `{$wpdb -> prefix}subscribers` (
	`id` INT(11) UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT,
	`e-mail` VARCHAR(255) NOT NULL
	) {$wpdb -> get_charset_collate()};");
});
// Отправка формы
function ajax_subscribe_send(){
	
    $email = $_REQUEST['email'];
	
	$response = '';
	
	global $wpdb;
	$tablename = $wpdb->prefix."subscribers";
	$datum = $wpdb->get_results("SELECT * FROM $tablename WHERE `e-mail` = '".$email."'"); 	
	
	if( empty($email) ) { // Проверка на заполненность поля
		$response = 'Впишите свой e-mail';
	} elseif( !is_email($email) ) { // Верификация e-mail
		$response = 'Некорректный e-mail';
    } elseif( count($datum) > 0 ) { // Проверка есть ли такой e-mail в БД
		$response = 'E-mail уже сохранен';
    } else {
		
		// Отправляем почтовое сообщение
		$thm  = 'У вас новый подписчик!';
		$thm  = "=?utf-8?b?". base64_encode($thm) ."?=";
		
		$msg = "E-mail: ".$email;
		
		$mail_to = 'mailtech777@mail.ru';
		
		$headers = "Content-Type: text/html; charset=utf-8\n";
		$headers .= 'From: '.get_bloginfo().' <no-replay@'.$_SERVER['HTTP_HOST'].'>' . "\r\n";		
		
		// Cохраняем значение в БД
		if( 
			$wpdb->insert($tablename,
				array(
					'e-mail' => $email,
				), '%s'
			) == false
		) {
			$response .= 'Ошибка сохранения.';
		} else { 
			$response .= 'E-mail успешно сохранен. Теперь вы будете получать письма с новостями и акциями.';
		}		
		
	}
	
    // Сообщение о результате
    if ( defined( 'DOING_AJAX' ) && DOING_AJAX ){
        echo $response;
        wp_die();
    }
}

add_action('wp_ajax_nopriv_ajax_subscribe', 'ajax_subscribe_send' );
add_action('wp_ajax_ajax_subscribe', 'ajax_subscribe_send' );

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Вложение файла при отправке формы

Вложение файла при отправке формы

Как настроить в WordPress вложение и отправку файла с формы без использования плагинов. Форма с нужным полем для вложения и указанием обработчика: Содержимое файла process_upload.php, на который мы переходим после Читать далее »

Взаимодействие форм и scripts

Взаимодействие форм и scripts

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (input, select, checkbox, radio) есть свои особенности, которые необходимо учитывать. Поле select Сделать нужный option активным из Читать далее »

Версия сайта для слабовидящих

Версия сайта для слабовидящих

Создадим блок с настройками в котором будут изменятся параметры сайта, такие как цветовая схема и размер шрифта. Для полноценной работы данного решения потребуется подключение jquery.cookie.js. Блок настроек Данный блок я Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Сбор ящиков для подписки в БД
Символы HTML
Рекомендации для васСимволы HTMLOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.