hugo-theme/layouts/shortcodes/form.html

<!-- layouts/shortcodes/contact-form.html -->
{{ $action := .Get "action" | default "" }}
{{ $method := .Get "method" | default "post" }}

{{ if not (.Page.Scratch.Get "recaptchaLoaded") }}
  {{ with .Get "recaptcha_site_key" }}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    {{ $.Page.Scratch.Set "recaptchaLoaded" true }}
  {{ end }}
{{ end }}

{{ $seed := now.Unix }}
{{ $random := delimit (shuffle (split (md5 $seed) "" )) "" }}

<form action="{{ $action }}" method="{{ $method }}" id="form-{{ $random }}" class="space-y-4 dark:bg-gray-800 dark:text-gray-100 p-4" enctype="multipart/form-data" accept-charset="UTF-8">
  {{ $fieldCount := 0 }}
  {{ range $key, $value := .Params }}
    {{ if hasPrefix $key "field" }}
      {{ $fieldIndex := int (replaceRE "field(\\d+)_.*" "$1" $key) }}
      {{ if gt $fieldIndex $fieldCount }}
        {{ $fieldCount = $fieldIndex }}
      {{ end }}
    {{ end }}
  {{ end }}

  {{ range $i := seq 0 $fieldCount }}
    {{ $fieldType := $.Get (printf "field%d_type" $i) }}
    {{ $fieldName := $.Get (printf "field%d_name" $i) }}
    {{ $fieldLabel := $.Get (printf "field%d_label" $i) }}
    {{ $fieldRequired := $.Get (printf "field%d_required" $i) }}
    {{ $fieldPlaceholder := $.Get (printf "field%d_placeholder" $i) }}
    {{ $fieldOptions := $.Get (printf "field%d_options" $i) }}

    {{ if and $fieldType $fieldName $fieldLabel }}
      {{ if eq $fieldType "text" }}
        <div>
          <label for="{{ $fieldName }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ $fieldLabel }}</label>
          <input type="text" name="{{ $fieldName }}" id="{{ $fieldName }}" {{ if eq $fieldRequired "true" }}required{{ end }} {{ if $fieldPlaceholder }}placeholder="{{ $fieldPlaceholder }}"{{ end }} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500">
        </div>
      {{ else if eq $fieldType "email" }}
        <div>
          <label for="{{ $fieldName }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ $fieldLabel }}</label>
          <input type="email" name="{{ $fieldName }}" id="{{ $fieldName }}" {{ if eq $fieldRequired "true" }}required{{ end }} {{ if $fieldPlaceholder }}placeholder="{{ $fieldPlaceholder }}"{{ end }} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500">
        </div>
      {{ else if eq $fieldType "select" }}
        <div>
          <label for="{{ $fieldName }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ $fieldLabel }}</label>
          <select name="{{ $fieldName }}" id="{{ $fieldName }}" {{ if eq $fieldRequired "true" }}required{{ end }} class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500">
            {{ range split $fieldOptions "," }}
              <option value="{{ . }}">{{ . }}</option>
            {{ end }}
          </select>
        </div>
      {{ else if eq $fieldType "textarea" }}
        <div>
          <label for="{{ $fieldName }}" class="block text-sm font-medium text-gray-700 dark:text-gray-300">{{ $fieldLabel }}</label>
          <textarea name="{{ $fieldName }}" id="{{ $fieldName }}" {{ if eq $fieldRequired "true" }}required{{ end }} {{ if $fieldPlaceholder }}placeholder="{{ $fieldPlaceholder }}"{{ end }} rows="4" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-500 dark:focus:border-indigo-500"></textarea>
        </div>
      {{ end }}
    {{ end }}
  {{ end }}
  
  <input type="text" name="honey_pot" style="display: none" class="hidden">

  {{ with .Get "recaptcha_site_key" }}
  <div class="g-recaptcha" data-sitekey="{{ . }}" data-callback="submitForm{{ $random }}" data-size="invisible"></div>
  {{ end }}

  <div>
    <button
      id="formSubmit-{{ $random }}"
      class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800" >
      {{ .Get "submit_text" | default "Send" }}
    </button>
  </div>
</form>

<script type="text/javascript">
  const recaptchaSiteKey = '{{.Get "recaptcha_site_key" }}';
  window["submitForm{{ $random }}"] = (token) => {
    const form = document.getElementById("form-{{ $random }}");
    console.log("form submitted");
    form.submit();
  }

  document.addEventListener("DOMContentLoaded", () => {
    const form = document.getElementById("form-{{ $random }}");
    const submit = document.getElementById("formSubmit-{{ $random }}");
    submit.onclick = (e) => {
      e.preventDefault();
      if (form.reportValidity()) {
        if (recaptchaSiteKey) grecaptcha.execute();
        else window["submitForm{{ $random }}"]();
      }
    };
  });
</script>