Форма обратной связи на лэндинг

delui · August 15, 2014

Всем привет)

Я купил в интернете макет лэндинга, реализованного на html.

Т.к я не знаток html, то какие-то основные моменты я подстроил под себя, но остался вопрос, каким образом настроить форму обратной связи на свой e-mail.

Привожу код данной формы:

<form class="form-inline"><input type="tel" id="tel" name="tel" placeholder="Ваш телефон (мы перезвоним)" class="input-lg"><button type="submit" class="btn btn-primary">Оставить заявку</button></form>

Пробовал искать ответ, экспериментировал с mailto, но не получилось добиться работоспособности формы.

Помогите пожалуйста: как должен выглядеть код формы, чтобы при нажатии на кнопку, мне на почту отправлялось содержимое поля "Телефон"

Заранее большое спасибо!

rus · August 15, 2014

<form class="form-inline" action="send.php"><input type="tel" id="tel" name="tel" placeholder="Ваш телефон (мы перезвоним)" class="input-lg"><button type="submit" class="btn btn-primary">Оставить заявку</button></form>

а содержимое send.php может быть вот таким:

<?$tel = $_POST['tel'];if(!preg_match("/^((8|\+7)[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$/", $tel) ) {	$error1 = 'Телефон?';} else $error1 = NULL;if(empty($error1)) {	$message .= '	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">	<html>		<head>			<title>'.$subject.'</title>			<style media="screen" type="text/css">			table {			padding:5px;			margin:5px;			border:#E2E2E2 solid 2px;			width:600px;			text-align: center;			}			td {			border:#E2E2E2 solid 1px;			width:100px;			padding:5px;			margin:5px;			text-align: center;			color:#3E73C8;			}			body {			margin: 0;			padding: 6px;			border: 0;			background: #fff;			text-align: center;			}			</style>		</head>		<body>			<table>			<tr>				<td colspan="2">Телефон отправителя:</td>				<td colspan="2">'.$tel.'</td>			</tr>			</table>		</body>	</html>';	//$to = '<test@test.ru>'.', <test@test.ru>'; можно указать несколько email	$to .= '<test@test.ru>'; // сюда отправляется 	$subject = 'Заказ звонка с сайта '.$_SERVER['HTTP_HOST'].''; //тема сообщения	$headers  = 'MIME-Version: 1.0' . "\r\n";	$headers .= 'Content-type: text/html; charset=utf-8' . "\r\n";	//$headers .= 'To: <'.$email.'>' . "\r\n"; отправляется на email юзера	$headers .= 'From: <order@'.$_SERVER['HTTP_HOST'].'>' . "\r\n"; // от кого	//$headers .= 'Cc: test@test.ru' . "\r\n"; копия	//$headers .= 'Bcc: test@test.ru' . "\r\n"; скрытая копия	if (mail($to, $subject, $message, $headers)) {		echo '<span class="true" data-callback="yes">Заказ успешно оформлен!</span><br>		<a href="javascript:history.back(1)">Вернуться назад</a>';	} else echo '<span class="error">Ошибка! Форма не отправлена</span><br>	<a href="javascript:history.back(1)">Вернуться назад</a>';} else {	echo '		<span class="error" data-callback="no">'.$error1.'</span><br>		<a href="javascript:history.back(1)">Вернуться назад</a>';}?>

delui · August 15, 2014

Большое спасибо

Правда есть вопросы:

1. Пришлось в файл send.php вставить строку

$error1 = NULL;

Иначе номер не проходил проверку корректности. Что там кстати не так? Пишу номер 89174312345

2. Можно ли сделать так, чтобы вместо сообщения об ошибке или сообщения об успешном заказе открывалась отдельная страница с красивым дизайном, который я для этого сделаю?

3. Самое главное, в письме почему-то не указывается телефон

2014-08-15_144626.png

Вот кстати ссылка на сам лэндинг (вдруг поможет) http://arendaufa.lakv.ru

Edited August 15, 2014 by delui

afdw · August 15, 2014

On 8/15/2014 at 8:49 AM, delui said:
Большое спасибо Правда есть вопросы: 1. Пришлось в файл send.php вставить строку $error1 = NULL; Иначе номер не проходил проверку корректности. Что там кстати не так? Пишу номер 89174312345 2. Можно ли сделать так, чтобы вместо сообщения об ошибке или сообщения об успешном заказе открывалась отдельная страница с красивым дизайном, который я для этого сделаю? 3. Самое главное, в письме почему-то не указывается телефон 2014-08-15_144626.png Вот кстати ссылка на сам лэндинг (вдруг поможет) http://arendaufa.lakv.ru

<form class="form-inline" action="send.php" method="post">
<input type="tel" id="tel" name="tel" placeholder="Ваш телефон (мы перезвоним)" class="input-lg">
<button type="submit" class="btn btn-primary">Оставить заявку</button>
</form>

delui · August 15, 2014

Супер! Спасибо, работает!

delui · August 15, 2014

Подскажите кто-нибудь, почему не работает стандартная html-овская проверка введенного текста. Например:

1. если делаю так

input type="email"

то не могу ввести ничего, кроме email. В случае некорректного ввода, мне пишет, что нет символа @, или что нет текста после @, ну и т.п. В общем проверка работает

2. если делаю так

input type="tel"

то вводить могу все, что угодно. Хоть буквы, хоть цифры. Без разницы.

Почему так?

afdw · August 15, 2014

Edited August 15, 2014 by afdw

delui · August 16, 2014

Еще раз большое спасибо!

arseniyivanov · February 22, 2016

Доброй ночи! Возможно не совсем по той же теме, но мой вопрос упирается в те же корни. Пытаюсь из формы подписки "subscribe" сделать форму отправки номера телефона на мой почтовый адрес, но от этих танцев с бубном голова напрочь отваливается, мучительно-долго бьюсь..... может кто сможет предложить способ решения задачи? был бы очень признателен за помощь, начинающему.

<!--  Email Subscription Section  -->	<section class="sub_box" id="order">		<p class="cta_text animated wow fadeInDown">ФОРМА ЗАЯВОК</p>		<form action="mailto:a-r-s@mail.ru" method="post" class="animated wow fadeIn" data-wow-duration="2s" id="submit_form">			<input type="email" id="mc-email" placeholder="Оставьте свой номер, мы перезвоним"/>			<button type="submit" id="mc_submit">				<i class="icon"></i>			</button>		</form>		<div class="message" id="error_msg">Введите правильный номер.</div>		<div class="message" id="success_msg">Ваша заявка принята.</div>	</section>	<!--  End Email Subscription Section  -->

и обнаружил, что к данной форме привязаны два ява скрипта

1. ajaxchimp.js

(function($){"use strict";$.ajaxChimp={responses:{"We have sent you a confirmation email":0,"Please enter a value":1,"An email address must contain a single @":2,"The domain portion of the email address is invalid (the portion after the @: )":3,"The username portion of the email address is invalid (the portion before the @: )":4,"This email address looks fake or invalid. Please enter a real email address":5},translations:{en:null},init:function(selector,options){$(selector).ajaxChimp(options)}};$.fn.ajaxChimp=function(options){$(this).each(function(i,elem){var form=$(elem);var email=form.find("input[type=email]");var label=form.find("label[for="+email.attr("id")+"]");var settings=$.extend({url:form.attr("action"),language:"en"},options);var url=settings.url.replace("/post?","/post-json?").concat("&c=?");form.attr("novalidate","true");email.attr("name","EMAIL");form.submit(function(){var msg;function successCallback(resp){if(resp.result==="success"){msg="We have sent you a confirmation email";label.removeClass("error").addClass("valid");email.removeClass("error").addClass("valid")}else{email.removeClass("valid").addClass("error");label.removeClass("valid").addClass("error");var index=-1;try{var parts=resp.msg.split(" - ",2);if(parts[1]===undefined){msg=resp.msg}else{var i=parseInt(parts[0],10);if(i.toString()===parts[0]){index=parts[0];msg=parts[1]}else{index=-1;msg=resp.msg}}}catch(e){index=-1;msg=resp.msg}}if(settings.language!=="en"&&$.ajaxChimp.responses[msg]!==undefined&&$.ajaxChimp.translations&&$.ajaxChimp.translations[settings.language]&&$.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]){msg=$.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]}label.html(msg);label.show(2e3);if(settings.callback){settings.callback(resp)}}var data={};var dataArray=form.serializeArray();$.each(dataArray,function(index,item){data[item.name]=item.value});$.ajax({url:url,data:data,success:successCallback,dataType:"jsonp",error:function(resp,text){console.log("mailchimp ajax submit error: "+text)}});var submitMsg="Submitting...";if(settings.language!=="en"&&$.ajaxChimp.translations&&$.ajaxChimp.translations[settings.language]&&$.ajaxChimp.translations[settings.language]["submit"]){submitMsg=$.ajaxChimp.translations[settings.language]["submit"]}label.html(submitMsg).show(2e3);return false})});return this}})(jQuery);

2. main.js

	//Mailchimp subscription form initialization	$('#submit_form').submit(function(){		$('#mc_submit').attr('disabled', 'disabled');		   		processing('icon', 'loading');	});	if($('#submit_form').length){		//Mailchim Subscription form		$('#submit_form').ajaxChimp({		    callback: chimpResponce		});	}		//Mail chimp callback function	function chimpResponce(resp) {   		if (resp.result === 'success') {   			   			processing('loading', 'icon');			$('#mc_submit').removeAttr('disabled', 'disabled');	        $('#submit_form #mc-email').val('');   			$('#error_msg').hide();   			$('#success_msg').show();	    }else{		   			processing('loading', 'icon');   			$('#success_msg').hide();   			$('#error_msg').show();	    	$('#mc_submit').removeAttr('disabled', 'disabled');	    }	}	function processing(hide, show){			$('#mc_submit i').removeClass(hide).addClass(show);	}

Заранее спасибо за поддержку!

Sign In

Форма обратной связи на лэндинг

Question

delui

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

delui

Link to comment

Share on other sites

afdw

Link to comment

Share on other sites

delui

Link to comment

Share on other sites

delui

Link to comment

Share on other sites

afdw

Link to comment

Share on other sites

delui

Link to comment

Share on other sites

arseniyivanov

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information