Construye un Newsletter para el blog

Te ahorraré casi 10 minutos de CSS.

<style>
	input {
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #d9d9d9;
		color: rgba(0, 0, 0, 0.75);
		display: inline-block;
		font-feature-settings: "tnum";
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		list-style: none;
		margin: 0;
		outline: 0;
		padding: 4px 12px;
		width: 100%;
		box-sizing: border-box;
	}

	h4 {
		font-size: 16px;
	}

	p {
		font-weight: 300;
		color: #333;
		font-size: 15px;
		margin-bottom: 10px;
	}

	form {
		position: relative;
		width: 100%;
	}

	.btn {
		box-shadow: inset 0px 1px 0px 0px #bee2f9;
		background: linear-gradient(to bottom, #63b9ee 5%, #468ccf 100%);
		background-color: #63b9ee;
		border-radius: 1px solid #3866a3;
		display: inline-block;
		cursor: pointer;
		color: #14396a;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		font-weight: bold;
		padding: 6px 24px;
		text-decoration: none;
		text-shadow: 0px 1px 0px #7cacde;
		width: 100%;
	}

	.btn:hover {
		background: linear-gradient(to bottom, #468ccf 5%, #63b8ee 100%);
		background-color: #468ccf;
	}
	.btn:active {
		position: relative;
		top: 1px;
	}
	label {
		font-size: 12px;
	}
</style>

Les comparto una publicación que encontre en internet sobre Tinyletter aquí, ya que tinyletter esta en inglés puede que esta publicación les ayude a personalizar mejor sus newsletters.

Wuaoooow que loco esta clase! Que emoción que se puedan subscribir!

cuál es ese plugin que te ordena el código automáticamente??

👌