Close sidebar
Newsletter
The newsletter block serves as an effective tool for websites to gather valuable information and data from users who wish to subscribe to content delivered via email.
When email addresses are collected through the websites, it can be useful to keep the audience informed and engaged by sending out regular updates, announcements, and relevant content directly to subscribers' email addresses. By utilizing the newsletter block, websites can establish a direct and personalized channel of communication with their audience, fostering a stronger connection and providing users with the latest and most relevant information.
Key elements to note
- This block is only a UI element to showcase how the newsletter collection UI must look. It is not connected to a backend system for collection of email addresses.
- If you are collecting email addresses from a user, and if the user has subscribed through the website, you may want to confirm their intent by sending them an email to confirm their subscription.
- You may also want to organise the emails collected in lists relevant to the user's preference.
- Always validate the email address format before inserting it in your backend system.
Full width variation
Sign up for our
newsletter
To stay in touch with the latest information from the ministry
Sidebar variation
Sign up for our
newsletter
To stay in touch with the latest information from the ministry
<div class="xl:flex justify-between gap-20">
<div class="mb-10 xl:w-6/12">
<h5 class="my-3">Full width variation</h5>
<!-- Newsletter block start -->
<div
class="aegov-newslette bg-aeblack-800 pt-10 md:pt-11 lg:pt-12 xl:pt-14 2xl:pt-16 pb-8 md:pb-9 lg:pb-10 xl:pb-12 2xl:pb-14 px-4 md:px-6 lg:px-7 xl:px-9 2xl:px-11 rounded-md md:rounded-lg xl:rounded-xl relative">
<div class="md:w-7/12 xl:w-11/12 relative z-[1]">
<div class="text-base leading-normal font-bold text-whitely-50/60 mb-2">Sign up for our
newsletter</div>
<div
class="text-whitely-50 text-xl xl:text-2xl 2xl:text-3xl leading-normal font-bold font-inter mb-6 lg:mb-7 xl:mb-8 2xl:mb-9">
To stay in touch with the latest information from the ministry
</div>
<form action="">
<div class="flex">
<div class="aegov-form-control 2xl:control-lg w-full md:w-72 xl:w-80">
<div class="form-control-input 2xl:h-13 !rounded-e-none">
<input type="email" id="newsletter" placeholder="Email address"
class="placeholder:!text-aeblack-500 !w-full">
</div>
</div>
<button type="submit" class="aegov-btn btn-icon 2xl:btn-lg rounded-s-none"
aria-label="Search">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<circle cx="112" cy="112" r="80" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16">
</circle>
<line x1="168.57" y1="168.57" x2="224" y2="224" fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="16"></line>
</svg>
</button>
</div>
</form>
</div>
<!-- papper planes in background - here you can do animation if needed -->
<div class="inline-block absolute -bottom-6 end-6 pointer-events-none">
<div class="flex justify-center gap-x-12 xl:-translate-y-6">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="69" viewBox="0 0 64 69"
fill="none">
<path
d="M61.0163 1.1354C60.263 0.705176 59.402 0.472405 58.5218 0.461067C57.6416 0.449729 56.7741 0.660234 56.0086 1.0709L55.9635 1.08137L2.58518 31.0168C1.71262 31.49 1.01336 32.2031 0.580514 33.061C0.147669 33.919 0.00178 34.8811 0.162272 35.8192C0.322765 36.7574 0.782022 37.627 1.47889 38.3124C2.17576 38.9978 3.07717 39.4664 4.06309 39.6558L32.7905 45.1868L51.304 66.6582C51.8913 67.3471 52.6751 67.8629 53.5628 68.1446C54.4505 68.4264 55.405 68.4624 56.3137 68.2484C56.4519 68.2163 56.5887 68.1785 56.724 68.135C57.675 67.8353 58.5064 67.2681 59.1064 66.5093C59.7064 65.7506 60.0463 64.8367 60.0807 63.8902L63.3867 5.34374C63.383 5.32954 63.3793 5.31535 63.3756 5.30116C63.4093 4.47144 63.2085 3.64824 62.7938 2.91614C62.3792 2.18403 61.7657 1.5694 61.0163 1.1354ZM55.1473 63.658L55.1426 63.7012L37.1737 42.8648L47.8786 26.1539C48.1986 25.6242 48.287 24.9974 48.1248 24.4072C47.9626 23.8169 47.5627 23.3099 47.0103 22.9941C46.458 22.6784 45.7969 22.579 45.168 22.7171C44.5391 22.8552 43.9922 23.2199 43.6438 23.7334L32.9352 40.4421L5.05308 35.073L5.09515 35.0632L58.4509 5.13911L55.1473 63.658Z"
fill="white" fill-opacity="0.06" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="26" viewBox="0 0 25 26"
fill="none">
<path
d="M22.0629 0.652545C21.7651 0.521766 21.4358 0.468339 21.1088 0.497769C20.7819 0.527198 20.4692 0.63842 20.2029 0.819976L20.1866 0.825584L1.67135 13.9677C1.368 14.1765 1.13919 14.4677 1.01539 14.8024C0.891585 15.1372 0.878668 15.4996 0.978355 15.8414C1.07804 16.1832 1.2856 16.4882 1.5734 16.7157C1.8612 16.9433 2.21557 17.0827 2.58934 17.1152L13.4805 18.0688L21.266 25.3246C21.5133 25.5577 21.8261 25.719 22.1673 25.7896C22.5086 25.8602 22.8642 25.8371 23.192 25.723C23.2419 25.7058 23.291 25.6865 23.3394 25.6652C23.6793 25.5177 23.9633 25.2756 24.1533 24.9713C24.3434 24.6669 24.4303 24.315 24.4026 23.9627L23.1222 2.12274C23.1202 2.11762 23.1182 2.1125 23.1162 2.10737C23.0932 1.79836 22.9835 1.50073 22.7984 1.24505C22.6132 0.989376 22.3594 0.78487 22.0629 0.652545ZM22.5629 24.0651L22.563 24.0813L15.0067 17.0401L18.2615 10.4334C18.3575 10.2247 18.3634 9.98886 18.278 9.77614C18.1926 9.56342 18.0226 9.39065 17.8042 9.29466C17.5858 9.19868 17.3364 9.18707 17.1091 9.26232C16.8817 9.33757 16.6945 9.49372 16.5873 9.69748L13.331 16.3036L2.7603 15.3777L2.77548 15.3725L21.2828 2.23546L22.5629 24.0651Z"
fill="white" fill-opacity="0.06" />
</svg>
</div>
<svg class="w-44 md:w-48 max-w lg:w-52 xl:w-56 2xl:w-60 h-40 md:h-44 lg:h-48 xl:h-52 2xl:h-56"
xmlns="http://www.w3.org/2000/svg" width="64" height="69" viewBox="0 0 64 69"
fill="none">
<path
d="M61.0163 1.1354C60.263 0.705176 59.402 0.472405 58.5218 0.461067C57.6416 0.449729 56.7741 0.660234 56.0086 1.0709L55.9635 1.08137L2.58518 31.0168C1.71262 31.49 1.01336 32.2031 0.580514 33.061C0.147669 33.919 0.00178 34.8811 0.162272 35.8192C0.322765 36.7574 0.782022 37.627 1.47889 38.3124C2.17576 38.9978 3.07717 39.4664 4.06309 39.6558L32.7905 45.1868L51.304 66.6582C51.8913 67.3471 52.6751 67.8629 53.5628 68.1446C54.4505 68.4264 55.405 68.4624 56.3137 68.2484C56.4519 68.2163 56.5887 68.1785 56.724 68.135C57.675 67.8353 58.5064 67.2681 59.1064 66.5093C59.7064 65.7506 60.0463 64.8367 60.0807 63.8902L63.3867 5.34374C63.383 5.32954 63.3793 5.31535 63.3756 5.30116C63.4093 4.47144 63.2085 3.64824 62.7938 2.91614C62.3792 2.18403 61.7657 1.5694 61.0163 1.1354ZM55.1473 63.658L55.1426 63.7012L37.1737 42.8648L47.8786 26.1539C48.1986 25.6242 48.287 24.9974 48.1248 24.4072C47.9626 23.8169 47.5627 23.3099 47.0103 22.9941C46.458 22.6784 45.7969 22.579 45.168 22.7171C44.5391 22.8552 43.9922 23.2199 43.6438 23.7334L32.9352 40.4421L5.05308 35.073L5.09515 35.0632L58.4509 5.13911L55.1473 63.658Z"
fill="white" fill-opacity="0.06" />
</svg>
</div>
</div>
<!-- Newsletter block end -->
</div>
<div class="md:w-[320px]">
<h5 class="my-3">Sidebar Variation</h5>
<!-- Newsletter block start -->
<div
class="aegov-newslette bg-aeblack-800 py-10 md:py-11 lg:py-12 xl:py-14 2xl:py-16 px-4 2xl:px-6 rounded-md md:rounded-lg xl:rounded-xl relative">
<div class="relative z-[1]">
<div class="text-base leading-normal font-bold text-whitely-50/60 mb-2">Sign up for our
newsletter</div>
<div
class="text-whitely-50 text-lg xl:text-xl leading-normal font-bold font-inter mb-6 lg:mb-7 xl:mb-8 2xl:mb-9">
To stay in touch with the latest information from the ministry
</div>
<form action="">
<div class="flex">
<div class="aegov-form-control control-sm w-full flex">
<div class="form-control-input !rounded-e-none w-full">
<input type="email" id="newsletter" placeholder="Email address"
class="placeholder:!text-aeblack-500 !w-full">
</div>
</div>
<button type="submit" class="aegov-btn btn-icon btn-sm rounded-s-none"
aria-label="Search">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<circle cx="112" cy="112" r="80" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="16">
</circle>
<line x1="168.57" y1="168.57" x2="224" y2="224" fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="16"></line>
</svg>
</button>
</div>
</form>
</div>
<!-- papper planes in background - here you can do animation if needed -->
<div class="inline-block absolute top-6 end-6 pointer-events-none">
<div class="flex justify-center gap-x-12 mb-9">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="69" viewBox="0 0 64 69"
fill="none">
<path
d="M61.0163 1.1354C60.263 0.705176 59.402 0.472405 58.5218 0.461067C57.6416 0.449729 56.7741 0.660234 56.0086 1.0709L55.9635 1.08137L2.58518 31.0168C1.71262 31.49 1.01336 32.2031 0.580514 33.061C0.147669 33.919 0.00178 34.8811 0.162272 35.8192C0.322765 36.7574 0.782022 37.627 1.47889 38.3124C2.17576 38.9978 3.07717 39.4664 4.06309 39.6558L32.7905 45.1868L51.304 66.6582C51.8913 67.3471 52.6751 67.8629 53.5628 68.1446C54.4505 68.4264 55.405 68.4624 56.3137 68.2484C56.4519 68.2163 56.5887 68.1785 56.724 68.135C57.675 67.8353 58.5064 67.2681 59.1064 66.5093C59.7064 65.7506 60.0463 64.8367 60.0807 63.8902L63.3867 5.34374C63.383 5.32954 63.3793 5.31535 63.3756 5.30116C63.4093 4.47144 63.2085 3.64824 62.7938 2.91614C62.3792 2.18403 61.7657 1.5694 61.0163 1.1354ZM55.1473 63.658L55.1426 63.7012L37.1737 42.8648L47.8786 26.1539C48.1986 25.6242 48.287 24.9974 48.1248 24.4072C47.9626 23.8169 47.5627 23.3099 47.0103 22.9941C46.458 22.6784 45.7969 22.579 45.168 22.7171C44.5391 22.8552 43.9922 23.2199 43.6438 23.7334L32.9352 40.4421L5.05308 35.073L5.09515 35.0632L58.4509 5.13911L55.1473 63.658Z"
fill="white" fill-opacity="0.06" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="26" viewBox="0 0 25 26"
fill="none">
<path
d="M22.0629 0.652545C21.7651 0.521766 21.4358 0.468339 21.1088 0.497769C20.7819 0.527198 20.4692 0.63842 20.2029 0.819976L20.1866 0.825584L1.67135 13.9677C1.368 14.1765 1.13919 14.4677 1.01539 14.8024C0.891585 15.1372 0.878668 15.4996 0.978355 15.8414C1.07804 16.1832 1.2856 16.4882 1.5734 16.7157C1.8612 16.9433 2.21557 17.0827 2.58934 17.1152L13.4805 18.0688L21.266 25.3246C21.5133 25.5577 21.8261 25.719 22.1673 25.7896C22.5086 25.8602 22.8642 25.8371 23.192 25.723C23.2419 25.7058 23.291 25.6865 23.3394 25.6652C23.6793 25.5177 23.9633 25.2756 24.1533 24.9713C24.3434 24.6669 24.4303 24.315 24.4026 23.9627L23.1222 2.12274C23.1202 2.11762 23.1182 2.1125 23.1162 2.10737C23.0932 1.79836 22.9835 1.50073 22.7984 1.24505C22.6132 0.989376 22.3594 0.78487 22.0629 0.652545ZM22.5629 24.0651L22.563 24.0813L15.0067 17.0401L18.2615 10.4334C18.3575 10.2247 18.3634 9.98886 18.278 9.77614C18.1926 9.56342 18.0226 9.39065 17.8042 9.29466C17.5858 9.19868 17.3364 9.18707 17.1091 9.26232C16.8817 9.33757 16.6945 9.49372 16.5873 9.69748L13.331 16.3036L2.7603 15.3777L2.77548 15.3725L21.2828 2.23546L22.5629 24.0651Z"
fill="white" fill-opacity="0.06" />
</svg>
</div>
<svg class="w-32 h-28" xmlns="http://www.w3.org/2000/svg" width="64" height="69"
viewBox="0 0 64 69" fill="none">
<path
d="M61.0163 1.1354C60.263 0.705176 59.402 0.472405 58.5218 0.461067C57.6416 0.449729 56.7741 0.660234 56.0086 1.0709L55.9635 1.08137L2.58518 31.0168C1.71262 31.49 1.01336 32.2031 0.580514 33.061C0.147669 33.919 0.00178 34.8811 0.162272 35.8192C0.322765 36.7574 0.782022 37.627 1.47889 38.3124C2.17576 38.9978 3.07717 39.4664 4.06309 39.6558L32.7905 45.1868L51.304 66.6582C51.8913 67.3471 52.6751 67.8629 53.5628 68.1446C54.4505 68.4264 55.405 68.4624 56.3137 68.2484C56.4519 68.2163 56.5887 68.1785 56.724 68.135C57.675 67.8353 58.5064 67.2681 59.1064 66.5093C59.7064 65.7506 60.0463 64.8367 60.0807 63.8902L63.3867 5.34374C63.383 5.32954 63.3793 5.31535 63.3756 5.30116C63.4093 4.47144 63.2085 3.64824 62.7938 2.91614C62.3792 2.18403 61.7657 1.5694 61.0163 1.1354ZM55.1473 63.658L55.1426 63.7012L37.1737 42.8648L47.8786 26.1539C48.1986 25.6242 48.287 24.9974 48.1248 24.4072C47.9626 23.8169 47.5627 23.3099 47.0103 22.9941C46.458 22.6784 45.7969 22.579 45.168 22.7171C44.5391 22.8552 43.9922 23.2199 43.6438 23.7334L32.9352 40.4421L5.05308 35.073L5.09515 35.0632L58.4509 5.13911L55.1473 63.658Z"
fill="white" fill-opacity="0.06" />
</svg>
</div>
</div>
<!-- Newsletter block end -->
</div>
</div>
Previous
Login
Next
Page rating