integre-newsleter

This commit is contained in:
Kevin Tessier 2019-06-13 16:19:04 +02:00
parent 6513708b15
commit bcb528adbc
6 changed files with 507 additions and 17 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -491,9 +491,303 @@
} }
#newsletter{ #newsletter{
padding: 20px; padding: 20px 0;
background: $light-blue; background: $light-blue;
/* LOADER */
.ml-form-embedSubmitLoad {
display: inline-block;
width: 20px;
height: 20px;
}
.ml-form-embedSubmitLoad:after {
content: " ";
display: block;
width: 11px;
height: 11px;
margin: 1px;
border-radius: 50%;
border: 4px solid #fff;
border-color: #ffffff #ffffff #ffffff transparent;
animation: ml-form-embedSubmitLoad 1.2s linear infinite;
}
@keyframes ml-form-embedSubmitLoad {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mlb2-985974.ml-form-embedContainer {
box-sizing: border-box;
display: table;
height: 100%;
margin: 0 auto;
width: 100% !important;
}
#mlb2-985974.ml-form-embedContainer h4,
#mlb2-985974.ml-form-embedContainer p,
#mlb2-985974.ml-form-embedContainer span,
#mlb2-985974.ml-form-embedContainer button {
text-transform: none !important;
letter-spacing: normal !important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper {
display: inline-block !important;
margin: 0;
padding: 0;
position: relative;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedPopup,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedDefault { width: 400px; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm { width: 40%; }
#mlb2-985974.ml-form-embedContainer .ml-form-align-left { text-align: left; }
#mlb2-985974.ml-form-embedContainer .ml-form-align-center { text-align: center; }
#mlb2-985974.ml-form-embedContainer .ml-form-align-default { display: table-cell !important; vertical-align: middle !important; text-align: center !important; }
#mlb2-985974.ml-form-embedContainer .ml-form-align-right { text-align: right; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedHeader img {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: auto;
width: 100%;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody {
// padding: 20px 20px 0 20px;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
padding-bottom: 0;
justify-content: center;
display: flex;
border: 1px solid white;
border-radius: 30px;
overflow: hidden;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent {
width: 100%;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent{
color: white;
p{
color: white;
text-align: center;
font-family: $Regular;
}
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent label {
color: white;
white-space:nowrap;
padding: 0 20px;
line-height: 40px;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p {
color: #000000;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 400;
margin: 0 0 10px 0;
text-align: left;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ul,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent ol,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ul,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent ol {
color: #000000;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p a,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p a {
color: #000000;
text-decoration: underline;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p:last-child,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p:last-child {
margin: 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form {
margin: 0;
width: 100%;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow {
margin: 0 0 20px 0;
width: 100%;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent.horozintalForm {
margin: 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow {
margin: 0 0 10px 0;
width: 100%;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
margin: 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow.ml-formfieldHorizintal {
margin: 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
background-color: #ffffff !important;
color: #333333 !important;
border-color: #cccccc !important;
border-radius: 4px !important;
border-style: solid !important;
border-width: 1px !important;
font-size: 14px !important;
line-height: 20px !important;
padding: 10px 10px !important;
width: 100% !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-webkit-input-placeholder { color: #333333; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::-moz-placeholder { color: #333333; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-ms-input-placeholder { color: #333333; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input:-moz-placeholder { color: #333333; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
height: 40px;
display: flex;
}
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%; }
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal { width: auto; margin-left: -45px;}
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields { box-sizing: border-box; float: left; }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
background-color: #ffffff;
color: #333333;
border-radius: 30px;
border-style: solid;
border-width: 0px;
font-size: 14px;
line-height: 20px;
padding: 10px 10px;
width: 100%;
box-sizing: border-box;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
background-color: transparent;
border-color: transparent;
border-style: solid;
box-shadow: none;
color: black !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px !important;
font-weight: 700;
line-height: 20px;
padding: 10px !important;
width: 100%;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow input[type="checkbox"] {
display: inline-block;
float: left;
margin: 1px 0 0 0;
opacity: 1;
visibility: visible;
appearance: checkbox !important;
-moz-appearance: checkbox !important;
-webkit-appearance: checkbox !important;
position: relative;
height: 14px;
width: 14px;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow .label-description {
color: #000000;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
padding-left: 25px;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label {
font-weight: normal;
margin: 0;
padding: 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label a {
color: #000000;
text-decoration: underline;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p {
color: #000000 !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: normal !important;
line-height: 18px !important;
padding: 0 !important;
margin: 0 5px 0 0 !important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow label p:last-child {
margin: 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit {
margin: 0 0 20px 0;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
background-color: #000000 !important;
border: none !important;
border-radius: 4px !important;
box-shadow: none !important;
color: #ffffff !important;
font-family: 'Open Sans', Arial, Helvetica, sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 20px !important;
padding: 10px !important;
width: 100% !important;
box-sizing: border-box !important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
background-color: #333333 !important;
}
.ml-subscribe-close {
width: 30px;
height: 30px;
background: url(https://bucket.mlcdn.com/images/default/modal_close.png) no-repeat;
background-size: 30px;
cursor: pointer;
margin-top: -10px;
margin-right: -10px;
position: absolute;
top: 0;
right: 0;
}
.ml-error input {
background: url(https://bucket.mlcdn.com/images/default/error-icon.png) 98% center no-repeat #ffffff !important;
background-size: 24px 24px !important;
}
.ml-error .label-description {
color: #ff0000 !important;
}
.ml-error .label-description p {
color: #ff0000 !important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p,
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow.ml-error .label-description p:first-letter {
color: #ff0000 !important;
}
@media only screen and (max-width: 400px){
.ml-form-embedWrapper.embedDefault, .ml-form-embedWrapper.embedPopup { width: 100%!important; }
.ml-form-formContent.horozintalForm { float: left!important; }
.ml-form-formContent.horozintalForm .ml-form-horizontalRow { height: auto!important; width: 100%!important; float: left!important; }
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal { width: 100%!important; }
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal > div { padding-right: 0px!important; padding-bottom: 10px; }
.ml-form-formContent.horozintalForm .ml-button-horizontal { width: 100%!important; }
}
@media only screen and (max-width: 400px) {
.ml-form-formContent.horozintalForm .ml-form-horizontalRow .horizontal-fields {
margin-bottom: 10px !important;
width: 100% !important;
}
}
#mc_embed_signup{ #mc_embed_signup{
width: 600px; width: 600px;
margin: auto; margin: auto;

View File

@ -377,6 +377,9 @@
.start:not(#form)#event .title{ .start:not(#form)#event .title{
width: 90%!important; width: 90%!important;
} }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
width: 70%!important;
}
} }
@media screen and (max-width: 750px) { @media screen and (max-width: 750px) {
@ -574,4 +577,26 @@
} }
} }
} }
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper.embedForm{
width: 90%!important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal{
display: block!important;
}
#newsletter #mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent label{
white-space: normal!important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent{
border: 1px solid white!important;
border-radius: 30px;
margin-bottom: 20px;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody.ml-form-embedBodyHorizontal {
border:none!important;
border-radius: 0px!important;
}
#mlb2-985974.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input{
text-align: center;
}
} }

View File

@ -143,7 +143,7 @@ p{
text-align: center; text-align: center;
} }
h3{ h3{
font-size: 1.3rem; font-size: 1.1rem;
font-family:$now_alt_bold; font-family:$now_alt_bold;
font-weight: 400; font-weight: 400;
} }

View File

@ -1,12 +1,60 @@
<section id="newsletter"> <section id="newsletter">
<div id="mc_embed_signup">
<form action="https://kevintessier.us19.list-manage.com/subscribe/post?u=a98b763288f940083bf28857c&amp;id=96d6b6e702" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mlb2-985974" class="ml-form-embedContainer ml-subscribe-form ml-subscribe-form-985974">
<div id="mc_embed_signup_scroll"> <div class="ml-form-align-center ">
<label for="mce-EMAIL">Recevoir l'actualité du Campus</label></br> <div class="ml-form-embedWrapper embedForm">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="adresse e-mail" required> <div class="ml-form-embedBody ml-form-embedBodyHorizontal row-form">
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a98b763288f940083bf28857c_96d6b6e702" tabindex="-1" value=""></div> <div class="ml-form-embedContent" style=" ">
<div class="clear"><input type="submit" value="ok" name="subscribe" id="mc-embedded-subscribe" class="button"></div> <label>Recevoir l'actualité du Campus</label>
</div> </div>
<form class="ml-block-form" action="https://app.mailerlite.com/webforms/submit/i3m7u8" data-code="i3m7u8" method="post" target="_blank">
<div class="ml-form-formContent horozintalForm">
<div class="ml-form-horizontalRow">
<div class="ml-input-horizontal">
<div style="width: 100%;" class="horizontal-fields">
<div class="ml-field-group ml-field-email ml-validate-email ml-validate-required">
<input style="width: 100%;" type="email" class="form-control" data-inputmask="" name="fields[email]" value="" placeholder="Adresse e-mail">
</div>
</div>
</div>
<div class="ml-button-horizontal">
<button type="submit" class="primary ">ok</button>
<button disabled="disabled" style="display: none;" type="button" class="loading">
<div class="ml-form-embedSubmitLoad"><div></div><div></div><div></div><div></div></div>
</button>
</div>
</div>
</div>
<style type="text/css">
.ml-form-recaptcha {
margin-bottom: 20px;
}
.ml-form-recaptcha.ml-error iframe {
border: solid 1px #ff0000;
}
</style>
<input type="hidden" name="ml-submit" value="1">
</form> </form>
</div> </div>
</section> <div class="ml-form-successBody row-success" style="display: none">
<div class="ml-form-successContent">
<h4>Merci !</h4>
<p>Vous avez rejoint avec succès notre liste d'abonnés.</p>
</div>
</div>
</div>
</div>
</div>
<script>
function ml_webform_success_985974() {
var $ = ml_jQuery || jQuery;
$('.ml-subscribe-form-985974 .row-success').show();
$('.ml-subscribe-form-985974 .row-form').hide();
}
</script>
<img src="https://track.mailerlite.com/webforms/o/985974/i3m7u8?vd890ed88b3a28c805acc70e1a88fa27c" width="1" height="1" style="max-width: 1px; max-height: 1px; visibility: hidden; padding: 0; margin: 0; display: block;" border="0">
<script src="https://static.mailerlite.com/js/w/webforms.min.js?vd890ed88b3a28c805acc70e1a88fa27c" type="text/javascript"></script>
</section>