Newsletter

<section class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div class="newsletter fw-nl fw-nl--design-stacked design-stacked fw-nl--round-rounded text-center">
		<h3 class="fw-nl__title">Subscribe to our newsletter</h3>
		<div class="fw-nl__desc">
			<p>Get new elements, tips and release notes straight to your inbox. No spam, unsubscribe any time.</p>
		</div>
		<form class="fw-nl__form" novalidate data-ajax="https://demos.unysonplus.com/wp-admin/admin-ajax.php" data-nonce="f7ebe8f6ca" data-success="Thanks for subscribing!" data-error="Something went wrong. Please try again.">
			<div class="fw-nl__fields">
				<input class="fw-nl__input fw-nl__input--name" type="text" name="name" placeholder="Your name" autocomplete="name" />
				<input class="fw-nl__input fw-nl__input--email" type="email" name="email" required placeholder="[email protected]" autocomplete="email" />
				<button class="fw-nl__btn fw-nl__btn--preset btn btn-primary" type="submit">Subscribe</button>
			</div>
			<input type="hidden" name="list" value="" />
			<input type="hidden" name="source" value="" />
			<input type="text" name="fw_hp" class="fw-nl__hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
			<div class="fw-nl__consent">
				By subscribing you agree to receive occasional emails from UnysonPlus.
			</div>
			<div class="fw-nl__msg" role="status" aria-live="polite">
			</div>
		</form>
	</div>
	<p class="sc-spec-label">Field icon — a glyph inside the email field</p>
	<div class="newsletter fw-nl fw-nl--design-stacked design-stacked fw-nl--round-pill text-start">
		<form class="fw-nl__form" novalidate data-ajax="https://demos.unysonplus.com/wp-admin/admin-ajax.php" data-nonce="f7ebe8f6ca" data-success="Thanks — we will be in touch." data-error="Something went wrong. Please try again.">
			<div class="fw-nl__fields">
				<span class="fw-nl__field fw-nl__field--icon" style="--nl-icon:#84725d"><span class="fw-nl__field-icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" /> <rect x="2" y="4" width="20" height="16" rx="2" /></svg></span><input class="fw-nl__input fw-nl__input--email" type="email" name="email" required placeholder="Email address" autocomplete="email" /></span>
				<button class="fw-nl__btn fw-nl__btn--preset btn btn-primary" type="submit">Request a walkthrough</button>
			</div>
			<input type="hidden" name="list" value="" />
			<input type="hidden" name="source" value="" />
			<input type="text" name="fw_hp" class="fw-nl__hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
			<div class="fw-nl__msg" role="status" aria-live="polite">
			</div>
		</form>
	</div>
	<p class="sc-spec-label">Capsule — the button inside the field</p>
	<div class="newsletter fw-nl fw-nl--design-inline design-inline fw-nl--round-pill text-center">
		<form class="fw-nl__form" novalidate data-ajax="https://demos.unysonplus.com/wp-admin/admin-ajax.php" data-nonce="f7ebe8f6ca" data-success="Thanks — check your inbox." data-error="Something went wrong. Please try again.">
			<div class="fw-nl__fields">
				<input class="fw-nl__input fw-nl__input--email" type="email" name="email" required placeholder="Enter your email" autocomplete="email" />
				<button class="fw-nl__btn fw-nl__btn--preset btn btn-primary" type="submit">Open account</button>
			</div>
			<input type="hidden" name="list" value="" />
			<input type="hidden" name="source" value="" />
			<input type="text" name="fw_hp" class="fw-nl__hp" tabindex="-1" autocomplete="off" aria-hidden="true" />
			<div class="fw-nl__msg" role="status" aria-live="polite">
			</div>
		</form>
	</div>
</section>