markdown 蜡标记电子邮件捕获表单
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown 蜡标记电子邮件捕获表单相关的知识,希望对你有一定的参考价值。
(function(window) {
var document = window.document,
initFormCookies = function(form) {
addQueryParamsToCookies();
addCookieInputsToForm(form);
},
addQueryParamsToCookies = function() {
var params = parseQueryString(document.location.search.substring(1)),
keys = ['utm_source', 'utm_medium', 'utm_campaign', 'ref'],
cookies = ['domain=.'+window.location.hostname.split('.').slice(-2).join('.')],
cookieString = '';
for (var i = 0; i < keys.length; i++) {
if (params[keys[i]]) {
cookies.push([keys[i], params[keys[i]]].join('='));
}
}
cookieString = cookies.join('; ')
document.cookie = cookieString
},
addCookieInputsToForm = function(form) {
var cookies = parseQueryString(document.cookie, '; '),
keys = ['utm_source', 'utm_medium', 'utm_campaign', 'ref'];
for (var i = 0; i < keys.length; i++) {
if (!cookies[keys[i]]) continue;
var input = document.createElement('input');
input.type = 'hidden';
input.name = keys[i];
input.value = cookies[keys[i]];
form.appendChild(input);
}
},
parseQueryString = function(queryString, delimiter = '&', separator = '=') {
var pairs = queryString.split(delimiter),
pair = [],
params = {};
pairs.map(function(item) {
pair = item.split(separator);
if (pair.length < 2) { return false; }
params[pair[0]] = pair[1];
});
return params;
};
window.addEventListener('DOMContentLoaded', function() {
var forms = document.querySelectorAll('.email-capture-form');
for (i = 0; i < forms.length; i++) {
initFormCookies(forms[i]);
}
});
}(window));
/* -- do not modify these lines -- */
.email-capture-form.step-1 .step-2 {
display: none;
}
.email-capture-form.step-2 .step-1 {
display: none;
}
/* -- make modifications after this line -- */
.email-capture-form .error-display {
font-size: smaller;
color: #f50;
padding: 0 0 8px;
}
.email-capture-form {
height: 200px;
width: 360px;
margin: 0 auto;
}
.email-capture-form input, .email-capture-form select {
box-sizing: border-box;
width: 100%;
border-radius: 6px;
border: 1px solid #000;
padding: 9px 6px;
margin: 5px 0;
}
.email-capture-form select {
height: 33px;
}
.email-capture-form.step-1 input {
float: left;
width: 75%;
margin: 0 0 0 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.email-capture-form button, .email-capture-form input[type=submit] {
display: block;
background: #000;
color: #fff;
padding: 9px 0;
border: 0;
border-radius: 6px;
background: #000;
color: #fff;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
.email-capture-form.step-1 button {
float: left;
width: 25%;
margin: 0 2px 0 -4px;
}
<link rel="stylesheet" type="text/css" href="email-capture-form.css" />
<form class="email-capture-form step-1" method="post" action="http://lvh.me:3000/api/mailing_lists/b9d99d6b-34e5-45a3-87a2-129ae89c37f5/subscriptions" data-validation-url="http://lvh.me:3000/api/email_address_info">
<div class="error-display"></div>
<div class="step-1">
<input type="text" name="email-address" placeholder="Enter your email address to receive updates" />
<button>Sign Up</button>
</div>
<div class="step-2">
<input type="text" name="first-name" placeholder="First Name" />
<input type="text" name="last-name" placeholder="Last Name" />
<select name="amount">
<option value="0">Amount</option>
<option value="1">$100 - $1,000</option>
<option value="2">$1,001 - $10,000</option>
<option value="3">$10,001 - $50,000</option>
<option value="4">$50,001 - $100,000</option>
<option value="5">$100,001 and more</option>
</select>
<input type="submit" value="submit" />
</div>
</form>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="email-capture-form.js"></script>
<script type="text/javascript" src="cookies.js"></script>
(function(window) {
var document = window.document,
thankYouPage = '/email-capture-thank-you',
initEmailCaptureForm = function(form) {
var step1Button = form.querySelector('.step-1 button'),
step2Button = form.querySelector('.step-2 input[type=submit]'),
emailAddressInput = form.querySelector('input[name=email-address]')
errorDisplay = form.querySelector('.error-display'),
verifyEmailAddress = function(event) {
event.preventDefault();
var validationUrl = form.dataset.validationUrl,
xhr = get_XHR(cb_verifyEmailAddress),
query = {
email_address: emailAddressInput.value
};
xhr.open('get', validationUrl+'?'+makeQueryString(query), true);
xhr.send();
},
cb_verifyEmailAddress = function(response) {
response = JSON.parse(response);
if (response.is_valid) {
errorDisplay.innerText = '';
form.classList.remove('validation-error');
form.classList.remove('step-1');
form.classList.add('step-2');
} else {
form.classList.add('validation-error');
errorDisplay.innerText = response.reason;
}
};
step1Button.addEventListener('click', this.verifyEmailAddress);
step2Button.addEventListener('click', function(event) {
event.preventDefault();
var emailAddress = form.querySelector('input[name=email-address]').value,
firstName = form.querySelector('input[name=first-name]').value,
lastName = form.querySelector('input[name=last-name]').value,
amount = form.querySelector('select').value,
amountString = form.querySelector('select option[value="'+amount+'"]').text,
queryParams = {
email_address: emailAddress,
first_name: firstName,
last_name: lastName,
amount: amount,
amount_string: amountString
},
optionalParams = [
'utm_source',
'utm_medium',
'utm_campaign',
'ref'
];
for (var i = 0; i < optionalParams.length; i++) {
var input = form.querySelector('input[name='+optionalParams[i]+']');
if (input) {
queryParams[optionalParams[i]] = input.value;
}
}
var xhr = get_XHR(function(response) {
window.location.href = thankYouPage;
}, function(response, status) {
if (status == 403) {
window.alert('We have detected abuse from your IP address. Please try again later.')
}
});
xhr.open(form.method, form.action, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(makeQueryString(queryParams));
});
},
get_XHR = function(onSuccess, onFailure = false) {
var xhr = new XMLHttpRequest();
!onFailure && (onFailure = function(){})
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var response = xhr.responseText;
if (xhr.status == 200) {
onSuccess(response);
} else {
onFailure(response, xhr.status)
}
}
};
return xhr;
},
makeQueryString = function(data) {
var doubles = [];
for (key in data) {
doubles.push([key, encodeURIComponent(data[key])].join('='));
}
return doubles.join('&');
};
window.addEventListener('DOMContentLoaded', function() {
var forms = document.querySelectorAll('.email-capture-form');
for (i = 0; i < forms.length; i++) {
initEmailCaptureForm(forms[i]);
}
});
}(window));
__Configuration__
- Ensure the 'action' attribute of the Email Capture Form HTML points to the correct location (line 1)
- Change the 'thankYouPageLink' in the Email Capture Form JS to point to your site's Thank You page (line 4)
- Customize the Email Capture Form CSS match you page styling (after line 8)
以上是关于markdown 蜡标记电子邮件捕获表单的主要内容,如果未能解决你的问题,请参考以下文章
PHP 表单通过电子邮件发送的结果。我需要捕获表单中的上传文件