Gerador de formulário de contato em HTML

Como fica

O código

<style>
.cf-form { display: grid; gap: 16px; max-width: 520px; font-family: system-ui, sans-serif; }
.cf-field { display: grid; gap: 6px; }
.cf-field label { font-size: 14px; font-weight: 700; color: #11181c; }
.cf-field input, .cf-field textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #c1c8cd; border-radius: 0; background: #fff; color: #11181c; }
.cf-field textarea { min-height: 120px; resize: vertical; }
.cf-field input:focus, .cf-field textarea:focus { outline: 2px solid #11181c; outline-offset: 1px; }
.cf-button { font: inherit; font-size: 16px; font-weight: 700; padding: 12px 20px; border: 0; border-radius: 0; background: #11181c; color: #fff; cursor: pointer; justify-self: start; }
</style>
<form class="cf-form" action="COLE_AQUI_O_ENDERECO_DE_ENVIO" method="POST">
  <div class="cf-field">
    <label for="cf-name">Nome</label>
    <input type="text" id="cf-name" name="name" autocomplete="name" required>
  </div>
  <div class="cf-field">
    <label for="cf-email">E-mail</label>
    <input type="email" id="cf-email" name="email" autocomplete="email" required>
  </div>
  <div class="cf-field">
    <label for="cf-message">Mensagem</label>
    <textarea id="cf-message" name="message" required></textarea>
  </div>
  <button class="cf-button" type="submit">Enviar mensagem</button>
</form>