Conditional Form Docs #362
Comments
|
@tfsumon , to be able to use these dynamic forms, which files do I have to touch in which folders? |
|
I've added a dynamic form shortcode to the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hugo Shortcodes Documentation for Conditional Forms
This guide provides a comprehensive explanation of how to use Hugo shortcodes to create dynamic forms with conditional fields, radio buttons, checkboxes, and calculated fields. The shortcodes and their corresponding HTML templates work together to create a seamless user experience.
Shortcodes and Examples
1. Form Container
The form container shortcode sets the background, style, and other attributes of the form.
{{< form background=`#1D1F26` style=`rounded-boxed` netlify=true conditional-form=true >}} <!-- Form content goes here --> {{< /form >}}rounded-boxed).2. Text Input
Creates a text input field with various attributes.
{{< input-text label=`Your Name` id=`name` name=`name` required=true placeholder=`muhammad sumon` >}}3. Select Dropdown
Creates a select dropdown menu with conditional attributes.
{{< select title=`Reason For Contacting` id=`reason-for-contacting` required=true condition=`match/Question:specific-question;match/Feedback:feedback` name=`reason-for-contacting` >}} {{< select-option label=`Select an option` value=`` selected=true disabled=true >}} {{< select-option value=`Question` >}} {{< select-option value=`Feedback` >}} {{< select-option value=`Other` >}} {{< /select >}}4. Conditional Elements
Elements that are displayed or hidden based on conditions.
{{< input-text label=`Specific Question` id=`specific-question` required=true name=`specific-question` conditional-element=true >}} {{< input-textarea label=`Feedback` id=`feedback` required=true name=`feedback` placeholder=`your feedback` conditional-element=true >}}5. Radio Button Group
Creates a group of radio buttons with conditional logic.
{{< input-group title=`How would you rate your experience with us?` >}} {{< input-check label=`Bad` required=true type=`radio` id=`bad` name=`experience` condition=`checked:negative` value=`bad` >}} {{< input-check label=`Fair` required=true type=`radio` id=`fair` name=`experience` condition=`checked:negative` value=`fair` >}} {{< input-check label=`Good` required=true type=`radio` id=`good` name=`experience` condition=`checked:positive` value=`good` >}} {{< input-check label=`Very good` required=true type=`radio` id=`veryGood` name=`experience` condition=`checked:positive` value=`very_good` >}} {{< input-check label=`Excellent` required=true type=`radio` id=`excellent` name=`experience` condition=`checked:testimonial-propose` value=`excellent` >}} {{< /input-group >}}6. Submit Button
Creates a submit button with customizable attributes.
{{< button-submit value=`Submit` width=`full` >}}Example Usage in a Form
Here is a complete example of how to use these shortcodes within a form:
Feedback Form
Empower Engineers - Service Request Form
Project Initiation Form
Selecting Web Design Themes
Calculating Project Cost
Estimating Project Duration
Explanation of Key Attributes
formula: Defines a mathematical formula used to calculate values within the form. The syntax is
formula="({input-id1}*value1)+({input-id2}*value2)/{input-id3}". Input IDs enclosed in curly braces are dynamically replaced with user-entered values from corresponding form elements, enabling real-time calculations.condition: Specifies conditions under which a form element should appear or remain hidden based on the value of another form element:
condition="match/value:target-id"- Displays the target element when the current element's value matches the specified value.condition="match/value:target-id;condition="match/value:target-id"- Allows multiple conditions separated by semicolons.condition="checked:target-id"- Shows the target element when the checkbox or radio button is checked; hides it otherwise.condition="calc/mathematical-operation:target-id"- Incorporates the current element's value into calculations for the target element:add,sub,mul, anddiv.The text was updated successfully, but these errors were encountered: