Skip to content
Snippets Groups Projects
Commit a8244243 authored by Antoine Kaufmann's avatar Antoine Kaufmann
Browse files

move newsletter signup into footer

parent 3e725189
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
_includes/footer.html
+ 20
− 14
View file @ a8244243
......@@ -2,10 +2,21 @@
<footer>
<div class="container" id="bottombar">
<div class="footer-inner">
<div class="footer-left">
<h1 id="newsletter">Stay in Touch</h1>
{%- include newsletter.html %}
</div>
<div class="footer-right">
<div class="mpisws-logo">
<a href="https://www.mpi-sws.org">
<img src="/assets/images/mpi-sws-lamp.svg" alt="MPI-SWS Logo"
title="MPI-SWS">
<img src="/assets/images/mpi-sws-lamp-white.svg"
alt="MPI-SWS Logo"
title="Max Planck Institute for Software Systems">
</a>
<a href="https://www.mpg.de/en">
<img src="/assets/images/logo-mpg-white.svg"
alt="Max Planck Society Logo"
title="Max Planck Society">
</a>
</div>
<nav class="social" title="Social Navigation">
......@@ -17,19 +28,14 @@
<li><a href="https://join.slack.com/t/simbricks/shared_invite/zt-16y96155y-xspnVcm18EUkbUHDcSVonA" class="slack" title="Slack"></a></li>
</ul>
</nav>
<div class="tumvl-logo">
<a href="https://www.tum-venture-labs.de/">
<img src="/assets/images/tum_vl_logo.png" alt="TUM Venture Labs Logo"
title="TUM Venture Labs">
</a>
<div class="copyright">&copy; SimBricks, 2022&ndash;2024 &mdash;
<a href="https://imprint.mpi-klsb.mpg.de/sws/simbricks.io"
class="imprint">Imprint</a>
&mdash;
<a href="https://data-protection.mpi-klsb.mpg.de/sws/simbricks.io"
class="data-protection">Data Protection</a>
</div>
</div>
</div>
<div class="copyright">&copy; SimBricks, 2022&ndash;2024 &mdash;
<a href="https://imprint.mpi-klsb.mpg.de/sws/simbricks.io"
class="imprint">Imprint</a>
&mdash;
<a href="https://data-protection.mpi-klsb.mpg.de/sws/simbricks.io"
class="data-protection">Data Protection</a>
</div>
</div>
</footer>
_includes/newsletter.html 0 → 100644
+ 143
− 0
View file @ a8244243
<div class="newsletter-form">
<form id="form-wrapper">
<div class="form-container-50">
<input type="text" class="form-control" id="firstName" name="firstName" required="" maxlength="80"
placeholder="">
<label for="firstName" class="form-label">First Name *</label>
</div>
<div class="form-container-50">
<input type="text" class="form-control" id="lastName" name="lastName" maxlength="80"
placeholder="">
<label for="lastName" class="form-label">Last Name</label>
</div>
<div class="form-container">
<input type="email" class="form-control" id="email" name="email" required="" maxlength="80"
placeholder="">
<label for="email" class="form-label">Email Address *</label>
</div>
<div class="form-container-50">
<input type="text" class="form-control" id="company" name="company" maxlength="120" placeholder="">
<label for="company" class="form-label">Company (optional)</label>
</div>
<div class="form-container-50">
<input type="text" class="form-control" id="role" name="role" maxlength="120" placeholder="">
<label for="role" class="form-label">Role (optional)</label>
</div>
<div class="form-container full-row">
<input type="checkbox" required class="privacy-policy-checkbox" id="privacyPolicy" name="privacyPolicy"
required="">
<label class="form-check-label" for="privacyPolicy">I accept the <a
href="{{ site.mpi.privacy-policy }}">privacy policy</a> *.</label>
</div>
<div class="form-container full-row submit-row">
<div id="frc-captcha" class="frc-captcha" data-sitekey="dummy"
data-solution-field-name="frc-captcha-solution"
data-puzzle-endpoint="{{ site.friendly-captcha.puzzle-endpoint }}" data-start="auto"
data-callback=captchaCallback></div>
<div>
<button type="submit" id="form-submit-button">Submit</button>
</div>
</div>
</form>
<div id="banner"></div>
<script type="text/javascript">
function captchaCallback(solution) {
$("#form-submit-button").prop("disabled", false);
}
$(document).ready(function () {
function convertFormToJSON(data) {
const formData = new FormData(data);
const json = {
"email": formData.get("email"),
"firstName": formData.get("firstName"),
"lastName": formData.get("lastName"),
"status": "enabled",
"lists": [3],
"company": formData.get("company"),
"role": formData.get("role"),
"preconfirm_subscriptions": false,
"frc_solution": formData.get("frc-captcha-solution")
};
return JSON.stringify(json);
}
function handelSubmit(form) {
let formData = convertFormToJSON(form);
$.ajax({
type: "POST",
url: "{{ site.gateway.base-url }}{{ site.gateway.newsletter }}",
contentType: "application/json;charset=UTF-8",
data: formData,
timeout: 30000,
success: function () {
showBanner("Successfully subscribed to SimBricks newsletter.", true);
},
error: function () {
showBanner("Error when trying to subscribe newsletter. Please try again later.", false);
},
});
friendlyChallenge.autoWidget.reset();
}
$('#form-wrapper').submit(function (event) {
event.preventDefault();
}).validate({
submitHandler: handelSubmit,
errorClass: "formError",
rules: {
firstName: {
required: true,
maxlength: 80
},
lastName: {
maxlength: 80
},
email: {
required: true,
maxlength: 80
},
privacyPolicy: "required",
company: {
maxlength: 120
},
role: {
maxlength: 120
},
},
messages: {
firstName: {
required: " Please enter a first name",
maxlength: " First name can have at max 80 characters"
},
lastName: {
maxlength: " Last name can have at max 80 characters"
},
email: {
required: " Please enter a email",
maxlength: " Email can have at max 80 characters"
},
privacyPolicy: "Please accept our privacy policy",
company: {
maxlength: " Company can have at max 120 characters"
},
role: {
maxlength: " Role can have at max 120 characters"
}
}
});
});
</script>
</div>
\ No newline at end of file
_pages/newsletter.html
+ 1
− 161
View file @ a8244243
......@@ -6,164 +6,4 @@ subtitle: Join our newsletter for keeping up-to-date with the latest news.
permalink: /newsletter/
---
<div class="container">
<div class="form-card">
<h1>Keep me updated!</h1>
<form id="form-wrapper">
<div class="form-container">
<input type="text" class="form-control" id="firstName" name="firstName" required="" maxlength="80"
placeholder="">
<label for="firstName" class="form-label">First Name *</label>
</div>
<div class="form-container">
<input type="text" class="form-control" id="lastName" name="lastName" maxlength="80"
placeholder="">
<label for="lastName" class="form-label">Last Name</label>
</div>
<div class="form-container">
<input type="email" class="form-control" id="email" name="email" required="" maxlength="80"
placeholder="">
<label for="email" class="form-label">Email Address *</label>
</div>
<div class="form-container">
<input type="text" class="form-control" id="company" name="company" maxlength="120" placeholder="">
<label for="company" class="form-label">Company (optional)</label>
</div>
<div class="form-container">
<input type="text" class="form-control" id="role" name="role" maxlength="120" placeholder="">
<label for="role" class="form-label">Role (optional)</label>
</div>
<div class="form-container full-row">
<input type="checkbox" required class="privacy-policy-checkbox" id="privacyPolicy" name="privacyPolicy"
required="">
<label class="form-check-label" for="privacyPolicy">I accept the <a
href="{{ site.mpi.privacy-policy }}">privacy policy</a> *.</label>
</div>
<div class="form-container full-row">
<div id="frc-captcha" class="frc-captcha" data-sitekey="dummy"
data-solution-field-name="frc-captcha-solution"
data-puzzle-endpoint="{{ site.friendly-captcha.puzzle-endpoint }}" data-start="auto"
data-callback=captchaCallback></div>
</div>
<div class="form-container full-row">
<button type="submit" id="form-submit-button">Submit</button>
</div>
</form>
<div id="banner"></div>
<div class="newsletter-form-footer">
<div class="newsletter-mail-info">
<p>
You can always contact us through the following email address: <a addbody="true"
href="mailto:info@simbricks.io">info@simbricks.io</a>
</p>
</div>
<div class="newsletter-required-info">
<p>* required fields</p>
</div>
</div>
<script type="text/javascript">
function captchaCallback(solution) {
$("#form-submit-button").prop("disabled", false);
}
$(document).ready(function () {
function convertFormToJSON(data) {
const formData = new FormData(data);
const json = {
"email": formData.get("email"),
"firstName": formData.get("firstName"),
"lastName": formData.get("lastName"),
"status": "enabled",
"lists": [3],
"company": formData.get("company"),
"role": formData.get("role"),
"preconfirm_subscriptions": false,
"frc_solution": formData.get("frc-captcha-solution")
};
return JSON.stringify(json);
}
function handelSubmit(form) {
let formData = convertFormToJSON(form);
$.ajax({
type: "POST",
url: "{{ site.gateway.base-url }}{{ site.gateway.newsletter }}",
contentType: "application/json;charset=UTF-8",
data: formData,
timeout: 30000,
success: function () {
showBanner("Successfully subscribed to SimBricks newsletter.", true);
},
error: function () {
showBanner("Error when trying to subscribe newsletter. Please try again later.", false);
},
});
friendlyChallenge.autoWidget.reset();
}
$('#form-wrapper').submit(function (event) {
event.preventDefault();
}).validate({
submitHandler: handelSubmit,
errorClass: "formError",
rules: {
firstName: {
required: true,
maxlength: 80
},
lastName: {
maxlength: 80
},
email: {
required: true,
maxlength: 80
},
privacyPolicy: "required",
company: {
maxlength: 120
},
role: {
maxlength: 120
},
},
messages: {
firstName: {
required: " Please enter a first name",
maxlength: " First name can have at max 80 characters"
},
lastName: {
maxlength: " Last name can have at max 80 characters"
},
email: {
required: " Please enter a email",
maxlength: " Email can have at max 80 characters"
},
privacyPolicy: "Please accept our privacy policy",
company: {
maxlength: " Company can have at max 120 characters"
},
role: {
maxlength: " Role can have at max 120 characters"
}
}
});
});
</script>
</div>
</div>
\ No newline at end of file
<meta http-equiv="refresh" content="0; url=/#newsletter" />
\ No newline at end of file
_sass/base-form.scss
+ 5
− 1
View file @ a8244243
......@@ -21,7 +21,7 @@ $info-input-text-size: 18px;
color: red;
}
.form-container {
.form-container, .form-container-50 {
width: 100%;
// min-width: 100%;
// @media (min-width: $width) {
......@@ -78,6 +78,10 @@ $info-input-text-size: 18px;
}
}
.form-container-50 {
width: 50%;
}
#frc-captcha {
border: 1px solid lightgray;
border-radius: $border-radius;
......
_sass/base-layout.scss
+ 51
− 16
View file @ a8244243
......@@ -173,26 +173,61 @@ footer {
padding: 0rem;
div.footer-inner {
display: flex;
align-items: center;
justify-content: center;
/*align-items: center;
justify-content: center;*/
flex-direction: row;
flex-wrap: wrap;
div.mpisws-logo, nav, div.tumvl-logo {
width: 13rem;
img {
margin: 1rem;
div.footer-left {
flex: 1;
h1 {
text-align: left;
}
}
nav {
width: 22rem;
}
div.mpisws-logo {
img {
width: 5rem;
.form-label {
color: white !important;
}
.form-container, .form-container-50 {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.form-control {
margin-bottom: 10px !important;
color: white !important;
}
div.submit-row {
display: flex !important;
justify-content: space-between;
align-content: center;
button {
flex: 0 0;
}
}
}
div.tumvl-logo {
img {
width: 10rem;
div.footer-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
div.mpisws-logo, nav, div.tumvl-logo {
width: 13rem;
img {
margin: 1rem;
}
}
nav {
width: 22rem;
}
div.mpisws-logo {
img {
width: 5rem;
}
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment