Form Builder - Raw HTML Block

Form Builder - Raw HTML Block

Purpose Statement

The Raw HTML Block in Form Builder allows users to insert custom HTML code directly into forms, providing advanced formatting and functionality beyond standard form elements. This feature enables departments to create highly customized forms that meet specific operational requirements while maintaining consistency within the Inspections, Permits, Invoicing and Fire Investigation modules.

Background Information

The Raw HTML Block is an advanced form building feature that gives users complete control over form presentation and functionality. This block is particularly useful for departments that need to incorporate complex formatting, custom styling, embedded media, or specialized interactive elements that aren't available through standard form blocks. Common use cases include adding custom headers with department branding, creating specialized data input sections, embedding instructional videos, or incorporating third-party widgets that enhance the user experience.

Required Permissions

To use the Raw HTML Block feature, users must have the following permissions:

  • Form Builder access permission
  • Edit Forms permission for the specific module (Inspections, Permits, Invoicing or Fire Investigation)
  • Advanced Form Elements permission (if applicable in your system configuration)
Note: Contact your system administrator if you cannot access the Raw HTML option in the Form Builder dropdown menu.

Video


Step-by-Step Guide




1.  Create a new form or select edit to edit an existing form.






2. Mouse over in the left margin at the current block and select the + sign to add a Raw HTML Block under the current Block.





3.  Select Raw HTML from the dropdown menu.






4. Enter or copy/paste your raw HTML code.






5. Select Tune to move up and down, or delete (select the X 2 times).





6.  Example of a Form with Raw HTML printed.




Best Practices

Do's:

  • Test your HTML code in a separate environment before adding it to production forms
  • Use clean, well-structured HTML that follows web standards
  • Include proper accessibility attributes for screen readers and assistive devices
  • Keep custom styling consistent with your department's branding guidelines
  • Document any custom HTML blocks for future maintenance and updates

Don'ts:

  • Avoid using deprecated HTML tags or attributes
  • Don't include malicious scripts or code that could compromise system security
  • Avoid overly complex HTML that might not render properly on mobile devices
  • Don't use inline styling excessively; consider CSS classes instead
  • Avoid HTML that conflicts with the existing form framework

Troubleshooting & FAQs

Q: My HTML code isn't displaying correctly in the form. What should I check? A: Verify that your HTML is properly formatted with correctly closed tags, check for any conflicting CSS styles, and ensure you're using supported HTML elements within the form builder environment.

Q: Can I include JavaScript in my Raw HTML Block? A: This depends on your system's security settings. Contact your administrator to confirm whether JavaScript is permitted in Raw HTML blocks, as it may be restricted for security purposes.

Q: The Raw HTML option doesn't appear in my dropdown menu. Why? A: You may not have the required permissions to use advanced form elements. Contact your system administrator to verify your user permissions for form building features.

Q: How can I ensure my Raw HTML is mobile-responsive? A: Use responsive HTML techniques such as flexible layouts, relative units (percentages, em, rem), and media queries if supported. Test your forms on various devices before deployment.

    • Related Articles

    • Form Builder - Raw HTML Block

      Purpose Statement The Raw HTML Block in Form Builder allows users to insert custom HTML code directly into forms, providing advanced formatting and functionality beyond standard form elements. This feature enables departments to create highly ...

    • Form Builder - Text Block

      Purpose Statement The Text Block feature in Form Builder allows administrators to add formatted text content, including dynamic data fields, to custom forms across multiple modules. This feature enables the creation of professional, informative forms ...

    • Form Builder - Text Block

      Purpose Statement The Text Block feature in Form Builder allows administrators to add formatted text content, including dynamic data fields, to custom forms across multiple modules. This feature enables the creation of professional, informative forms ...

    • Form Builder - Heading Block

      Purpose Statement The Heading Block in Form Builder allows users to add formatted heading text to custom forms, providing clear section organization and improved readability. This feature enables departments to create professional, well-structured ...

    • Form Builder - Heading Block

      Purpose Statement The Heading Block in Form Builder allows users to add formatted heading text to custom forms, providing clear section organization and improved readability. This feature enables departments to create professional, well-structured ...