форма для carrot

In this example below you will see how to do a форма для carrot with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mary_rapso, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mary_rapso ©
  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>форма для carrot</title>
  
  
  
  
  
</head>

<body>

  
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mary_rapso/andx444andx43eandx440andx43candx430-andx434andx43bandx44f-carrot-aBbLyE */
var str = '\
		<style>\
			#cq-popup {\
				width: 900px;\
				height: 350px;\
				z-index: 23;\
				left: calc(50%);\
				top: calc(50%);\
				position: fixed!important;\
				padding: 60px 40px 60px 40px;\
				background-repeat: no-repeat;  \
				background-position: left;\
				background-image: url(http://storage1.static.itmages.ru/i/16/1107/h_1478502346_6757816_88e8c83966.jpg);\
				font-family: Open Sans, sans-serif;\
				transform: translate(-50%, -50%) scale(1);\
			}\
			#cq-popup h3 {\
				font-size: 40px;\
				padding: 0;\
				width: 500px;\
				float: left;\
				text-align: left;\
				margin-bottom: 10px;\
			}\
			#cq-popup > div {\
				width: 500px;\
				font-size: 27px;\
				line-height: 36px;\
			}\
			#cq-popup-btclose {\
				text-decoration: none;\
				font-size: 29px;\
				position: absolute;\
				right: 10px;\
				top: 0px;\
        color: #454545;\
			}\
			#cq-popup-bg {\
				cursor: pointer;\
				position: fixed;\
				top:0; \
				width: 100%; \
				height: 100%;\
				background: rgba(51,51,51,0.8);\
				z-index: 22;\
			}\
      #form-button{\
        display: inline-block;\
        color: white;\
        font-weight: 400;\
        text-decoration: none;\
        user-select: none;\
        padding: .8em 1.9em;\
        outline: none;\
        border: 2px solid;\
        border-radius: 1px;\
        transition: 0.2s;\
        background: #454545;\
        height:42px;\
      }\
      .input{\
        width:350px;\
        height:30px;\
        margin-top: 3px;\
        display:inline-block;\
        float:left;\
        padding:3px;\
      }\
</style>\
<div id="cq-popup-bg"></div>\
			<div id="cq-popup">\
<a id="cq-popup-btclose" href="#">×</a>\
<div></div>\
<input id="email-form" maxlength="100" placeholder="Ваш E-mail" style="position:absolute; right:237px; bottom:50px;" class="input" type="text">\
<input id="form-button" name="mail_submit" type="submit" style="position:absolute; right:100px; bottom:49px;" onclick="isEmail()" value="Подписаться">\
			</div>\
        </div>\
      ';

var div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div)
function isEmail() {
document.getElementById('form-button').onclick = function () {
  var val = getElementById('email-form').value()
  carrotquest.identify([
  {op: 'update_or_create', key: '$email', value: val},
  ]);
  document.getElementById('cq-popup-bg').remove();
 document.getElementById('cq-popup').remove();
  }

}

document.getElementById('cq-popup-btclose').onclick = function () {
 document.getElementById('cq-popup-bg').remove();
 document.getElementById('cq-popup').remove();
}

Comments