Create a Hugo kind shortcode

This is an instance of a Hugo kind shortcode that makes use of Fabform, a well-liked form-to-email service:

<!-- layouts/shortcodes/fabform.html -->
{{- $formID := .Get "id" -}}
{ printf "%s" .Get "formId" -}

<kind id="{{ $formID }}" motion="{{ $formAction }}" methodology="POST">
  <!-- Add your kind fields right here -->
  <label for="title">Identify:</label>
  <enter sort="textual content" id="title" title="title" required>

  <label for="e-mail">Electronic mail:</label>
  <enter sort="e-mail" id="e-mail" title="e-mail" required>

  <!-- Add extra kind fields as wanted -->

  <button sort="submit">Submit</button>
Enter fullscreen mode

Exit fullscreen mode

To make use of this shortcode, it is advisable to specify your Fabform kind ID as a parameter. This is an instance utilization:

{{< fabform id="myForm" formId="your-form-id" >}}
Enter fullscreen mode

Exit fullscreen mode

Within the instance above, the shortcode accepts two parameters: id and formId. The id parameter is used to set the HTML id attribute of the shape factor, whereas the formId parameter is used to specify the Fabform kind ID.

Be certain that to switch "your-form-id" along with your precise Fabform kind ID.

Be happy to change the shape fields and add any further parts or validation as per your necessities.

Hugo types

Concerning the writer. Geoffrey Callaghan is a programmer at fabform.io engaged on the kind backend group.

Leave a Reply

Your email address will not be published. Required fields are marked *