<section id="about" class="stack">
  {#  This is a hidden form that will be submitted by the button below.#}
  <form
    id="form-about"
    class="stack-small"
    hx-post="{{ form.post_url }}"
    hx-target="#about"
    hx-swap="outerHTML"
  >
    <input type="hidden" data-field="text" name="text" value="{{ form.text.value }}">
  </form>
  <h2>About</h2>
  <p contenteditable="true" data-field="text">{{ form.text.value }}</p>
  {% for error in form.text.errors %}
    <p class="error">{{ error|escape }}</p>
  {% endfor %}
  <div> {# prevent button from taking full width with this div #}
    <button id="submit-about" type="submit">
      <svg class="edit-icon-small">
        <use href="#ok"></use>
      </svg>
    </button>
  </div>
  <script>registerClickListenerForHiddenForm("about", "submit-about", "form-about");</script>
</section>
