• FORM FIELDS AND CONDITIONAL LOGIC • SETUP GUIDE

How to Use Hidden Fields, Section Headers, and HTML Blocks

What you will achieve in this guide

Follow this step-by-step documentation to configure custom B2B registration forms, approval workflows, and customer tagging.

EXPECTED SETUP TIME 5-10 Minutes
COMPATIBILITY All Shopify Themes & Plans
TECHNICAL DIFFICULTY Zero Code Required

Organize Shopify application forms with section headers and HTML content, and carry additional data through hidden fields.


Before you begin

Open the intended form in the builder and identify what the answer will be used for: review only, field mapping, a visibility condition, or an approval rule. Choose the answer type before configuring those dependencies.


Which elements capture answers

A Hidden field carries configured extra data, such as a campaign source, without presenting an editable question. A Section header introduces a group of questions, and an HTML block adds explanatory content. The latter two organize the page rather than request a business answer.

Hidden fields are not secret storage; their values are part of the storefront form. Never put credentials in them. Custom JavaScript is not supported; use the form's appearance controls or Custom CSS for styling.


Set up this workflow

  1. Add Section header to introduce a new group of questions.

  2. Add an HTML block for explanatory content when formatted text is needed.

  3. Add Hidden for an extra value that should not appear as a buyer input.

  4. Give hidden data a clear key and review its intended value.

  5. Save and preview to ensure display content does not resemble a required question.

  6. Submit a test application and verify the hidden data and visible layout behave as intended.


Example

Add a Section header called Business details and a Hidden field representing a demo campaign source such as demo-wholesale. Use an HTML block for a short explanation of the review process.

Expected result

Explanatory content is visible, the hidden value is not an editable buyer question, and the submitted data includes the configured hidden information.


Limits and important behavior

  • Custom JavaScript is not supported.
  • Do not place secrets in hidden fields; hidden inputs are not secure storage.
  • Use Custom CSS for styling rather than embedded scripts.

Troubleshooting and verification

If hidden data is missing, inspect its configured value and the actual saved form used on the page. Section headers and HTML blocks do not provide applicant answers. Do not use JavaScript or assume a hidden value is protected against inspection or editing.


Screenshots to add

Screenshot placeholder: Capture the relevant app screen for “How to Use Hidden Fields, Section Headers, and HTML Blocks” after completing the setup. Show the controls used to add Section header to introduce a new group of questions. Add a second screenshot showing the result of this check: Submit a test application and verify the hidden data and visible layout behave as intended. Use dummy applicant details and mask any secrets.


Related guides