Newsletter Form Block

The Newsletter Form block can be used as a simple method for users to sign up to your newsletter from your website. It includes editable title and text fields in the CMS and an example form with Full Name and Email fields. We recommend you update the form with your own preferred form handling method.

Front End

Content Model

The content model for the Newsletter Form block is as follows:

title: Text Field - Required

text: Long Text Field - Required

Code

The Newsletter Form block uses the BlockData type from the Contento JavaScript SDK.

import { BlockData } from '@gocontento/client'

export default function NewsletterForm({ block }: { block: BlockData }) {
  return (
    <div className="py-9 md:py-16">
      <div className="flex flex-col items-center justify-center gap-y-6 md:space-y-12">
        <div className="prose">
          <h2 className="text-3xl font-semibold leading-snug md:text-center md:text-5xl">
            {block.fields.title.text}
          </h2>
          <div
            dangerouslySetInnerHTML={{ __html: block.fields.text.text }}
            className="text-lg md:text-center"
          />
          {/* FORM EXAMPLE - REPLACE WITH YOUR OWN FORM HANDLER */}
          <form className="mx-auto my-10 flex flex-col justify-center gap-x-9 gap-y-3 md:flex-row md:items-center">
            <div className="w-full">
              <label className="mb-1 block font-semibold" htmlFor="full-name">
                Full Name
              </label>
              <input
                className="w-full border-2 border-gray-200 bg-gray-200 px-4 py-2"
                id="full-name"
                type="text"
              />
            </div>
            <div className="w-full">
              <label className="mb-1 block font-semibold" htmlFor="email">
                Email
              </label>
              <input
                className="w-full border-2 border-gray-200 bg-gray-200 px-4 py-2"
                id="email"
                type="email"
              />
            </div>
            <div className="mt-4 flex flex-shrink-0 md:mt-8">
              <button
                className="bg-zinc-700 px-6 py-3 text-white hover:opacity-80"
                type="button"
              >
                Sign Up
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}