form
Shortcode
form
shortcode is a tool to generate the form
component correctly across
multiple outputs. This shortcode is meant to organize form cleaning based on
the selected output format.
Example usage:
{{< form "" "post" "shortcodes/form" >}}
...
<fieldset class="border center">
<input type="reset" value="Reset" accesskey="s" />
<input class="pinpoint" type="submit" value="Apply" />
</fieldset>
...
{{< /form >}}
This shortcode is available starting from v0.12.0
.
Heads-Up
While the shortcode is useful, it breaks the Markdown syntax conventions due to Hugo specific shortcode feature. Therefore, when using other Markdown renderer, these shortcodes would be rendered as text instead of HTML code fragments.
Also, be careful and stay safe while using this shortcode. It allows any form of HTML to be embedded into your Markdown page.
Pre-Requisite
Depending on your Bissetii version, you need to include extended modules.
Some output format (e.g. AMP) requires additional Javascript module to load before using the HTML form.
Version v1.13.0
and Above
You need to include form
into modules.extensions
inside your Hugo page’s
front-matter. Here is an example:
|
|
Version v1.12.5
and Below
You need to include amp-form
into amp.modules
inside your Hugo page’s
front-matter. Here is an example:
|
|
Using form
Since Bissetii supports AMP form rendering, there is a need to use shortcode to organize the form properly.
Here is the shortcode pattern:
|
|
We will walk through each of the parameters in detail.
<content>
Parameter
This field holds the content for the form like the input and label fields. The write up should be in HTML format.
<outputType>
Parameter
This parameter is to selectively render the form based on a list of outputs
separated by bar (|
). Example:
- for vanilla html only, it is:
"html"
. - for amp html only, it is:
"amp"
. - for both vanilla and amp html, it is
"html|amp"
.
This is only use for Bissetii version v1.12.0
to v1.12.5
. For higher
version, form will render on all output formats for content consistency. Hence,
you should always supply empty string.
<method>
Parameter
This field defines the form method attribute. To comply with
HTML5
and XHTML standards,
this field will be converted to lowercase automatically. Example, when given
GET
, it will become get
.
<action>
Parameter
This field defines the form action attribute (usually a link). Bissetii’s relative URL is compatible with this field. However, since Hugo is a static site generator, it is recommended to provide an absoluate URL to your backend server API instead.
<ID>
Parameter
This field is optional and will be filled into the form’s id=
attribute.
If you are using the following parameters but this parameter, you must supply this field with an empty string.
Example:
|
|
<Class>
Parameter
This field is optional and will be filled into the form’s class=
attribute.
If you are using the following parameters but this parameter, you must supply this field with an empty string.
Example:
|
|
<Label>
Parameter
This field is optional and will be filled into the form’s aria-label=
attribute.
If you are using the following parameters but this parameter, you must supply this field with an empty string.
Example:
|
|
Example Usage
Here is an example for how to use form
shortcode. Given that:
|
|
The above example is rendered into the following output depending on whether you’re viewing in AMP or vanilla HTML):
|
|
Conclusion
That’s all about form
shortcode in Bissetii. If you need more feature or
need to report a bug, please feel free to file an issue at our
Issue Section.