[website] added supporters infrastructure.

10 files changed, 347 insertions, 61 deletions

diff --git a/website/extra/htaccess b/website/extra/htaccess
index ea53d49c..db3393af 100644
--- a/website/extra/htaccess
+++ b/website/extra/htaccess
@@ -24,6 +24,12 @@ RewriteRule ^disable-checked-exceptions$ /disable-checked-exceptions.html [L,END
 RewriteRule ^disable-checked-exceptions(\.html)?$ /disable-checked-exceptions [NC,R=301]
 RewriteRule ^contributing$ /contributing.html [L,END]
 RewriteRule ^contributing(\.html)?$ /contributing [NC,R=301]
+RewriteRule ^supporters$ /supporters.html [L,END]
+RewriteRule ^supporters(.html)?$ /supporters [NC,R=301]
+RewriteRule ^order-license-info$ /order-license-info.html [L,END]
+RewriteRule ^order-?license-?info(.html)?$ /order-license-info [NC,R=301]
+RewriteRule ^order-license$ /order-license.html [L,END]
+RewriteRule ^order-?license(.html)?$ /order-license [NC,R=301]
 
 <#list setupPages as pg>
 RewriteRule ^setup/${pg?no_esc}$ /setup/${pg?no_esc}.html [L,END]
diff --git a/website/resources/W8BEN_lombok.pdf b/website/resources/W8BEN_lombok.pdf
new file mode 100644
index 00000000..b87bded8
--- /dev/null
+++ b/website/resources/W8BEN_lombok.pdf
diff --git a/website/resources/css/custom.css b/website/resources/css/custom.css
index e5bb720e..674d341c 100644
--- a/website/resources/css/custom.css
+++ b/website/resources/css/custom.css
@@ -7,6 +7,68 @@
 	margin-bottom: 40px;
 }
 
+.buttonLike {
+	cursor: pointer;
+	background: -webkit-linear-gradient(top, #FFFEF7, #CFCEC7);
+	background: -moz-linear-gradient(top, #FFFEF7, #CFCEC7);
+	background: -o-linear-gradient(#FFFEF7, #CFCEC7);
+	background: -ms-linear-gradient(#FFFEF7, #CFCEC7);
+	background: linear-gradient(top, #FFFEF7, #CFCEC7);
+	line-height: 1;
+	padding: 3px 10px;
+	border: 1px solid black;
+	position: relative;
+	overflow: visible;
+	color: black;
+	margin: 2px;
+	border-radius: 5px;
+	display: inline-block;
+	text-align: center;
+}
+
+.orderButton {
+	width: 280px;
+}
+
+.formErr {
+	color: #FF7777;
+}
+
+.order-license #deleteCompanyLogo {
+	margin-top: 12px;
+}
+
+.formSubmitFail {
+	color: #FF6666;
+	font-size: 1.2em;
+	font-style: italic;
+}
+
+.order-license .btn-primary {
+	float: left;
+	margin-right: 20px;
+	background: -webkit-linear-gradient(#1725e0, #0923df 6%, #0b21ce);
+	background: -o-linear-gradient(#1725e0, #0923df 6%, #0b21ce);
+	background: -webkit-gradient(linear, left top, left bottom, from(#1725e0), color-stop(6%, #0923df), to(#0b21ce));
+	background: linear-gradient(#1725e0, #0923df 6%, #0b21ce);
+	background-repeat: no-repeat;
+	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1725e0', endColorstr='#ff0b21ce', GradientType=0);
+	-webkit-filter: none;
+	filter: none;
+	border: 1px solid #091bac;
+}
+
+#onlyYearlyWarning {
+	font-size: 0.8em;
+	padding-left: 16px;
+}
+
+.deemphasize {
+	color: #AAAAAA;
+	font-size: 0.8em;
+	font-style: italic;
+}
+
 .supporterBar .introText {
 	margin-top: 16px;
 }
@@ -24,6 +86,10 @@
 	display: inline-block;
 }
 
+.supporters .supportItem {
+	margin: 6px 10px;
+}
+
 .supporterBar {
 	width: 100%;
 	margin-left: auto;
@@ -53,11 +119,6 @@
 	height: 16px;
 }
 
-.legalese {
-	font-style: italic;
-	font-size: 0.8em;
-}
-
 #companyLogo {
 	margin-right: 8px;
 }
diff --git a/website/resources/js/order-license.js b/website/resources/js/order-license.js
index 82627f2b..4a3edca0 100644
--- a/website/resources/js/order-license.js
+++ b/website/resources/js/order-license.js
@@ -1,21 +1,140 @@
 "use strict";
 
 (function() {
+	if (!String.prototype.trim) {
+		String.prototype.trim = function () {
+			return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
+		};
+	}
+	
 	var imgDataUrl = null;
+	
+	function updateLocationInfo() {
+		var locationType = $("input:radio[name='locationType']:checked").val();
+		$("#locationType_usa").toggle(locationType === "usa");
+		$("#locationType_eu").toggle(locationType === "eu");
+		$("#locationType_other").toggle(locationType === "other");
+		$("#paymentMethod_iban").toggle(locationType === "eu");
+		if ($("#paymentMethod_iban input").is(":checked") && locationType !== "eu") $("#paymentMethod_payoneer input").prop("checked", true);
+		if ($("#paymentMethod_intl input").is(":checked") && locationType === "eu") $("#paymentMethod_iban input").prop("checked", true);
+		$("#paymentMethod_intl").toggle(locationType !== "eu");
+	}
+	
+	function updatePriceIndication() {
+		$("#onlyYearlyWarning").hide();
+		var x = getPriceIndication();
+		if (x === "") {
+			$("#costIndicator").text("").hide();
+		} else {
+			$("#costIndicator").text(x).show();
+		}
+	}
+	
+	function getPriceIndication() {
+		try {
+			var seats = parseInt($("#seats").val());
+			if (isNaN(seats)) return "";
+			var licenseType = $("input:radio[name='licenseType']:checked").val();
+			var costPer;
+			if (licenseType === "enterprise") costPer = 5;
+			else if (licenseType === "professional") costPer = 2;
+			else return "";
+			var periodRaw = $("input:radio[name='paymentType']:checked").val();
+			if (periodRaw === "monthly") {
+				if (costPer*seats < 50) {
+					$("#onlyYearlyWarning").show();
+					return "Your license will cost €" + (costPer*seats*12) + ",- per year.";
+				}
+				return "Your license will cost €" + (costPer*seats) + ",- per month.";
+			}
+			return "Your license will cost €" + (costPer*seats*12) + ",- per year.";
+		} catch (e) {
+			return "";
+		}
+	}
+	
+	function showError(elemName) {
+		var elem = $("#" + elemName + "Err");
+		elem.fadeIn();
+		$("#" + elemName).on("change keyup", function() {
+			elem.hide();
+		});
+	}
+	
 	function applyLicense() {
-		$("#submit").on("click", function(evt) {
+		var submitButton = $("#submit");
+		var spinner = $("<img>").attr("src", "/img/spinner.gif").attr("alt", "submitting").css("float", "left").css("margin-right", "20px");
+		
+		submitButton.on("click", function(evt) {
 			evt.preventDefault();
 			
 			var onSuccess = function() {
-				alert("Form submitted!");
+				$("#orderHelp").hide();
+				var okMsg = $("<div>").addClass("formSubmitOk").html("Thank you for ordering a Project Lombok license! We'll send your bill via email. If you have any further questions please contact us at <a href=\"mailto:orders@projectlombok.org\"><code>orders@projectlombok.org</code></a>.");
+				spinner.replaceWith(okMsg);
 			};
 			
 			var onFailure = function() {
-				alert("Whoops");
+				$("#orderHelp").hide();
+				var errMsg = $("<div>").addClass("formSubmitFail").html("Our order form appears to be broken. Could you do us a favour and contact us at <a href=\"mailto:orders@projectlombok.org\"><code>orders@projectlombok.org</code></a>? Thank you!");
+				spinner.replaceWith(errMsg);
 			};
 			
 			var data = {};
-			data.name = $("#name").val();
+			data.name = $("#companyName").val();
+			data.email = $("#email").val();
+			data.licenseType = $("input:radio[name='licenseType']:checked").val();
+			data.seats = parseInt($("#seats").val());
+			data.paymentType = $("input:radio[name='paymentType']:checked").val();
+			data.mentionMe = $("#mentionMe").prop("checked");
+			data.companyUrl = $("#companyUrl").val();
+			data.locationType = $("input:radio[name='locationType']:checked").val();
+			data.euVat = $("#euVat").val();
+			data.paymentMethod = $("input:radio[name='paymentMethod']:checked").val();
+			
+			var formFail = false;
+			
+			if (!data.paymentMethod) {
+				showError("paymentMethod");
+				formFail = true;
+			}
+			
+			if (!data.euVat && data.locationType === 'eu') {
+				$("#euVat").focus();
+				showError("euVat");
+				formFail = true;
+			}
+			
+			if (!data.locationType) {
+				showError("locationType");
+				formFail = true;
+			}
+			
+			if (!data.seats || isNaN(data.seats)) {
+				$("#seats").focus();
+				showError("seats");
+				formFail = true;
+			}
+			
+			if (!data.paymentType) {
+				showError("paymentType");
+				formFail = true;
+			}
+			
+			if (data.email.indexOf('@') === -1) {
+				$("#email").focus();
+				showError("email");
+				formFail = true;
+			}
+			
+			if (data.name.trim().length < 1) {
+				$("#companyName").focus();
+				showError("companyName");
+				formFail = true;
+			}
+			
+			if (formFail) return;
+			
 			var rnd = generateRandom();
 			var err = processImageUpload();
 			if (err) {
@@ -24,6 +143,9 @@
 				return;
 			}
 			if (imgDataUrl) data.logo = imgDataUrl;
+			
+			submitButton.replaceWith(spinner);
+			
 			$.ajax({
 				url: "/license-submit/" + rnd,
 				method: "PUT",
@@ -31,7 +153,7 @@
 				data: JSON.stringify(data),
 				processData: false,
 				success: onSuccess,
-				failure: onFailure
+				error: onFailure
 			});
 		});
 		
@@ -58,6 +180,13 @@
 				$("#deleteCompanyLogo").show();
 			}
 		});
+		
+		$("#seats,.paymentType,.licenseType").on("change keyup", function() {
+			updatePriceIndication();
+		});
+		$(".locationType").on("change", function() {
+			updateLocationInfo();
+		});
 	}
 	
 	function generateRandom() {
diff --git a/website/resources/js/supporters.js b/website/resources/js/supporters.js
index 5ec1b057..5f21c79c 100644
--- a/website/resources/js/supporters.js
+++ b/website/resources/js/supporters.js
@@ -3,7 +3,7 @@
 (function($) {
 	var supporters = {};
 	var weights = {};
-	var types = ["patron", "professional", "enterprise"];
+	var types = ["enterprise", "professional", "patron"];
 	
 	function shuffle(array) {
 		var i = 0, j = 0, temp = null;
@@ -49,7 +49,7 @@
 		var d = $("<div />").addClass("supportItem").addClass(this.type);
 		var a = d;
 		if (this.url) {
-			a = $("<a />").attr("href", this.url).attr("rel", "noopener");
+			a = $("<a />").attr("href", this.url).attr("rel", "noopener").attr("target", "_blank");
 			d.append(a);
 		}
 		var n = $("<span />").text(this.name);
@@ -69,8 +69,13 @@
 				var ht = Math.round(h / f);
 				i.width = wt;
 				i.height = ht;
+				var ji = $(i);
 				if (!showName) a.empty();
-				a.prepend(i);
+				ji.css("width", wt + "px");
+				ji.css("height", ht + "px");
+				ji.attr("alt", n);
+				ji.attr("title", n);
+				a.prepend(ji);
 			};
 			i.src = 'files/' + this.logo;
 		}
@@ -129,6 +134,8 @@
 		var s = $(".supporterBar");
 		s.find(".introText").show();
 		s.append($("<div />").addClass("sbCnt"));
+		var sf = s.find(".supporterFooter").show();
+		s.append(sf);
 		s = s.find(".sbCnt");
 		var now = new Date();
 		var list = [];
diff --git a/website/templates/_scaffold.html b/website/templates/_scaffold.html
index c461423f..767f28e5 100644
--- a/website/templates/_scaffold.html
+++ b/website/templates/_scaffold.html
@@ -92,14 +92,17 @@ ga('send', 'pageview');
 								<li><a href="/features/experimental/all">Experimental</a></li>
 							</ul>
 						</li>
-						<li>
-							<a href="https://groups.google.com/group/project-lombok" target="_blank">
-								<span>Discuss/Help</span>
-							</a>
+						<li class="dropdown">
+							<a class="dropdown-toggle pointer" data-toggle="dropdown">Community<span class="caret"></span></a>
+							<ul class="dropdown-menu" aria-labelledby="themes">
+								<li><a href="https://groups.google.com/group/project-lombok" rel="noopener">Discuss / Help</a></li>
+								<li><a href="https://github.com/rzwitserloot/lombok/issues" rel="noopener">Issues</a></li>
+								<li><a href="/contributing">Contribute</a></li>
+							</ul>
 						</li>
 						<li>
-							<a href="/contributing">
-								<span>Contribute</span>
+							<a href="/order-license-info">
+								<span>Order / Donate</span>
 							</a>
 						</li>
 						<li class="dropdown">
diff --git a/website/templates/contributing.html b/website/templates/contributing.html
index dde6e3ff..3a99c77a 100644
--- a/website/templates/contributing.html
+++ b/website/templates/contributing.html
@@ -3,6 +3,11 @@
 <@main.scaffold>
 	<div class="page-header top5">
 		<div class="row text-center">
+			<@main.h1 title="Contributing to Project Lombok's development" />
+		</div><div class="row">
+			You can choose to <a href="/order-license-info">become a project lombok licensee or support us on patreon</a>.
+		</div>
+		<div class="row text-center">
 			<@main.h1 title="How to work on Project Lombok yourself" />
 		</div><div class="row">
 			Project Lombok is being developed via the <a href="https://github.com/rzwitserloot/lombok">lombok git repository on github</a>.
diff --git a/website/templates/main.html b/website/templates/main.html
index df096955..e89557d6 100644
--- a/website/templates/main.html
+++ b/website/templates/main.html
@@ -28,22 +28,18 @@
 					<a href="http://jnb.ociweb.com/jnb/jnbJan2010.html">Show me a text and images based explanation and tutorial instead!</a>
 				</div>
 			</div>
-			<div class="row supporterBar">
-				<div class="introText" hidden="hidden">Project Lombok is powered by:</div>
-			</div>
 		</div>
 		<div class="row text-center">
 			<@main.h2 title="Upcoming presentations" />
 			<p>
-				Roel and Reinier will be talking about <em>(near) future java features; a preview of what Java10 and Java11 will probably look like</em>, across germany:<ul>
-					<li><a href="https://www.meetup.com/Java-User-Group-Saarland-jugsaar/events/247413968/">JUG Saarland, Monday March 5th, 2018, 18:00, eurodata AG, Saarbrücken</a></li>
-					<li><a href="http://www.majug.de/2018/03/06/Refactoring-to-Java-10/">JUG Mannheim, Tuesday March 6th, 2018, 19:00, Uni Mannheim</a></li>
-					<li><a href="http://www.jug-kl.de/double-feature/">JUG Kaiserslautern, Wednesday March 7th, 2018, 19:00, Chaos Computer Club</a></li>
-					<li><a href="https://www.jug-da.de/2018/03/Double-Feature-Refactoring2Java10-And-HybridArchitecture/">JUG Darmstadt, Thursday March 8th, 2018, 18:30, TU Darmstadt</a></li>
-					<li><a href="https://programm.javaland.eu/2018/#/scheduledEvent/549331">JavaLand March 14th 2018, 12:00</a>, room: Schauspielhaus.</li>
-				</ul>
+				Roel and Reinier will be talking about (near) future java features:<br /> <a href="https://programm.javaland.eu/2018/#/scheduledEvent/549331">JavaLand March 14th 2018, 12:00</a>, room: Schauspielhaus.
+			</p><p>
 				<em>See you there! (We'll have stickers!)</em>
 			</p>
 		</div>
+		<div class="row text-center supporterBar">
+			<h2 class="introText" hidden="hidden">Project Lombok is <a href="/supporters">powered by</a>:</h2>
+			<div class="supporterFooter" hidden="hidden"><a class="buttonLike" href="/support">I want to support Project Lombok too!</a></div>
+		</div>
 	</div>
 </@main.scaffold>
diff --git a/website/templates/order-license-info.html b/website/templates/order-license-info.html
index b465eaf0..a58ef913 100644
--- a/website/templates/order-license-info.html
+++ b/website/templates/order-license-info.html
@@ -9,15 +9,22 @@
 			<p>
 				Lombok is open source. We offer three licenses for using lombok. The standard license is free. Here you can order a professional or enterprise license.
 			</p><p>
-				As part of being a professional or enterprise licensee, we normally offer to put your name, a logo, and possibly a link on our ‘supporters and licensees’ page. From time to time we’ll put a supporter or licensee on our front page. You may of course opt out of this offer. We may, at our discretion, opt not to list you. If we elect not to do so, you will be notified at the email address you fill in on our form, and you are as always free to cancel your license at any time.
-			</p><p>
-				The license fee is based on the number of developers that work for you or your company using Project Lombok, per month. The fee is charged in advance. You may choose to pay either monthly or yearly (for sufficiently small licensees, only a yearly option is available).
-			</p><p>
-				<span class="legalese">Project Lombok is provided by the copyright holders and contributors “as is” and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed, even for professional and enterprise license holders. In no event shall the copyright holder or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage.</span>
-			</p><p>
-				Instead of a professional or enterprise license, if you’d like to support the efforts of Project Lombok, you can also support us via <a href="https://www.patreon.com/lombok">Patreon</a>.
-			</p><p>
-				<a href="order-license">Order a professional or enterprise license now</a>.
+				<a class="buttonLike orderButton" href="order-license">Order a professional or enterprise license</a><br />
+				<a class="buttonLike orderButton" href="https://www.patreon.com/lombok">For individuals: Become a patreon</a>
+			</p>
+			<div class="row text-center">
+				<h2>Benefits of becoming a licensee</h2>
+			</div>
+			<p>
+				Lombok is and will remain a free, open source product. However, we ask you to consider becoming a licensee. Licensees will be <a href="/supporters">listed</a> on the <code>projectlombok.org</code> website, we'll send you some stickers, and an official license. You'll be supporting the development of Project Lombok.
+			</p>
+			<div class="row text-center">
+				<h2>Small print</h2>
+			</div>
+			<p class="deemphasize">
+				As part of being a professional or enterprise licensee, we will put your name, a logo, and possibly a link on our ‘supporters and licensees’ page. We'll also put (at random) some supporters and licensees on our front page. You may of course opt out of this offer. We may, at our discretion, opt not to list you. If we elect not to do so, you will be notified at the email address you fill in on our form, and you are as always free to cancel your license at any time.
+			</p><p class="deemphasize">
+				Project Lombok is provided by the copyright holders and contributors “as is” and any express or implied warranties, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose are disclaimed, even for professional and enterprise license holders. In no event shall the copyright holder or contributors be liable for any direct, indirect, incidental, special, exemplary, or consequential damages (including, but not limited to, procurement of substitute goods or services; loss of use, data, or profits; or business interruption) however caused and on any theory of liability, whether in contract, strict liability, or tort (including negligence or otherwise) arising in any way out of the use of this software, even if advised of the possibility of such damage.
 			</p>
 		</div>
 	</div>
diff --git a/website/templates/order-license.html b/website/templates/order-license.html
index 4d52d93a..91693c0a 100644
--- a/website/templates/order-license.html
+++ b/website/templates/order-license.html
@@ -1,7 +1,7 @@
 <#import "/_scaffold.html" as main>
 
 <@main.scaffold load=["/js/order-license.js"]>
-	<div class="page-header top5">
+	<div class="page-header top5 order-license">
 		<div class="row text-center">
 			<h2>Order a professional or enterprise license</h2>
 		</div>
@@ -12,34 +12,62 @@
 					<div class="form-group">
 						<label for="companyName">Company name</label>
 						<input type="text" class="form-control" aria-describedby="companyNameHelp" id="companyName" placeholder="license holder name" />
+						<div id="companyNameErr" class="formErr" hidden="hidden">Company name is a required field.</div>
 						<small id="companyNameHelp" class="form-text text-muted">If applying for an individual license, fill in your own name.</small>
 					</div>
 					<div class="form-group">
 						<label for="email">Email</label>
 						<input type="email" class="form-control" aria-describedby="emailHelp" id="email" placeholder="email of contact / holder" />
+						<div id="emailErr" class="formErr" hidden="hidden">Your email address is required; we will send the bill to this email address.</div>
 						<small id="emailHelp" class="form-text text-muted">We will never share this email with any third parties; we'll email you the invoice at this email address.</small>
 					</div>
 				</fieldset>
 				<fieldset class="form-group">
 					<legend>Type of license</legend>
+					<div class="form-group">
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input licenseType" name="licenseType" value="professional" checked="checked" />
+								Professional (€2,- per developer per month; ~ $2.50).
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input licenseType" name="licenseType" value="enterprise" />
+								Enterprise (€5,- per developer per month; ~ $6.10).
+							</label>
+						</div>
+					</div>
+					<div id="licenseTypeErr" class="formErr" hidden="hidden">License type is a required field.</div>
+					<div class="form-group">
+						<label for="seats"># of developers using lombok</label>
+						<input type="number" placeholder="# of developers" class="form-control" id="seats" />
+						<div id="seatsErr" class="formErr" hidden="hidden">We need to know the # of developers to determine the license price.</div>
+					</div>
+				</fieldset>
+				<fieldset class="form-group">
+					<legend>Payment</legend>
 					<div class="form-check">
 						<label class="form-check-label">
-							<input type="radio" class="form-check-input" name="licenseType" value="professional" checked="checked" />
-							Professional
+							<input type="radio" class="form-check-input paymentType" name="paymentType" value="yearly" checked="checked" />
+							Yearly
 						</label>
 					</div>
 					<div class="form-check">
 						<label class="form-check-label">
-							<input type="radio" class="form-check-input" name="licenseType" value="enterprise" />
-							Enterprise
+							<input type="radio" class="form-check-input paymentType" name="paymentType" value="monthly" />
+							Monthly<span id="onlyYearlyWarning" hidden="hidden" class="warning">The total license cost is sufficiently low that we'll bill you yearly.</span>
 						</label>
 					</div>
+					<div id="paymentTypeErr" class="formErr" hidden="hidden">Payment type is a required field.</div>
+					<div class="form-group" hidden="hidden" id="costIndicator">
+					</div>
 				</fieldset>
 				<fieldset class="form-group">
 					<legend>Mention</legend>
 					<div class="form-check">
 						<label class="form-check-label">
-							<input type="checkbox" class="form-check-input" name="mentionMe" checked="checked" />
+							<input type="checkbox" class="form-check-input" id="mentionMe" name="mentionMe" checked="checked" />
 							Mention me on the <em>supporters / licensees</em> page.
 						</label>
 					</div>
@@ -55,24 +83,68 @@
 						<button class="form-control" id="deleteCompanyLogo" style="display: none;">Remove logo</button>
 					</div>
 				</fieldset>
-				<button type="submit" class="btn btn-primary">Submit order</button>
+				<fieldset class="form-group">
+					<legend>Location and VAT</legend>
+					<div class="form-group">
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input locationType" name="locationType" value="eu" checked="checked" />
+								We are based in the Europe
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input locationType" name="locationType" value="usa" />
+								We are based in the USA
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input locationType" name="locationType" value="other" />
+								We are based elsewhere
+							</label>
+						</div>
+						<div id="locationTypeErr" class="formErr" hidden="hidden">Location (continent) is a required field.</div>
+					</div>
+					<div class="form-group" id="locationType_eu">
+						<label for="euVat">EU VAT number</label>
+						<input type="text" class="form-control" id="euVat" placeholder="EU VAT number" />
+						<div id="euVatErr" class="formErr" hidden="hidden">EU VAT is a required field. If you are an individual and you have no EU VAT number, consider giving us a <a href="https://www.patreon.com/lombok">patreon</a> donation.</div>
+					</div>
+					<div class="form-group" hidden="hidden" id="locationType_usa">
+						Please <a href="/W8BEN_lombok.pdf">download our W-8BEN form</a> for your tax records.
+					</div>
+					<div class="form-group" hidden="hidden" id="locationType_other">
+						Please make sure you fulfill any local tax obligations for buying software from other countries.
+					</div>
+				</fieldset>
+				<fieldset class="form-group">
+					<legend>Payment method</legend>
+					<div class="form-group">
+						<div class="form-check" id="paymentMethod_iban">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input" name="paymentMethod" value="iban" checked="checked" />
+								Pay via IBAN (european bank transfer)
+							</label>
+						</div>
+						<div class="form-check" hidden="hidden" id="paymentMethod_intl">
+							<label class="form-check-label">
+								<input type="radio" class="form-check-input" name="paymentMethod" value="intl" />
+								Pay via international bank transfer
+							</label>
+						</div>
+						<div class="form-check">
+							<label class="form-check-label" id="paymentMethod_payoneer">
+								<input type="radio" class="form-check-input" name="paymentMethod" value="payoneer" />
+								Pay with Payoneer
+							</label>
+						</div>
+						<div id="paymentMethodErr" class="formErr" hidden="hidden">Payment method is a required field.</div>
+					</div>
+				</fieldset>
+				<button type="submit" id="submit" class="btn btn-primary">Submit order</button>
+				<div id="orderHelp">If you run into issues with the order form, or you have any other questions, please send us an email at <a href="mailto:orders@projectlombok.org"><code>orders@projectlombok.org</code></a></div>
 			</p>
 		</div>
 	</div>
-	<div>
-Form fields:
-
-* EU / US / Elders
-* Naam bedrijf
-* Do you want to be mentioned?
-* Link to logo
-* Link to website
-* Professional of enterprise
-* # of developers
-* Email of contact.sta
-* In EU: VAT Number
-* In EU: How would you like to pay? IBAN or Payoneer
-* In US: How would you like to pay? International wire transfer, or Payoneer (default = payoneer).
-* Elders: We’ll get back to you..
-	</div>		
 </@main.scaffold>