Create newsletter component

Desktop

Mobile

Original HTML

https://codeberg.org/drupalberlin/web-2024/src/branch/main/public/index....

<form action="https://drupalberlin.us5.list-manage.com/subscribe/post" method="POST">
  <input type="hidden" name="u" value="[OMITTED]">
  <input type="hidden" name="id" value="[OMITTED]">
  <!-- people should not fill these in and expect good things -->
  <div style="
		left: -9999px;
		position: absolute;
	" aria-label="Please leave the following three fields empty" aria-hidden="true">
    <label for="b_name">Name: </label>
    <input type="text" name="b_name" tabindex="-1" value="" placeholder="Freddie" id="b_name">

    <label for="b_email">Email: </label>
    <input type="email" name="b_email" tabindex="-1" value="" placeholder="youremail@gmail.com" id="b_email">

    <label for="b_comment">Comment: </label>
    <textarea name="b_comment" tabindex="-1" placeholder="Please comment" id="b_comment"></textarea>
  </div>

  <br>
  <label for="MERGE0">E-Mail:</label>
  <input required type="email" autocapitalize="none" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="">

  <input type="submit" name="submit" value="Abonnieren">

  <div style="
		margin-top: 0.2em;
	">
    <small>
      <label for="group_1"><input required type="checkbox" id="group_1" name="group[28545][1]" value="1"><span>Mailchimp-<a href="https://mailchimp.com/de/legal/">Nutzungsbedingungen</a> (<a href="https://mailchimp.com/de/legal/cookies/">Cookies</a>, <a href="https://www.intuit.com/privacy/statement/">Datenschutz</a>) zustimmen</span>
      </label>
    </small>
  </div>

  <input type="hidden" name="ht" value="19677e3d61bcd17d727e69c7a90377a6d069fc79:MTczMjg2NTcxNS41MzI5">
  <input type="hidden" name="mc_signupsource" value="hosted">
</form>