Hubspot-Modules
Image by Jordi, Made with AI

Paper Container with Search Module
Overview
This module is a customizable Paper Container with integrated search functionality. It includes a title, content area, and a fully functional search bar with styling and behavior defined using HTML, HubL, CSS, and JSON configurations for fields and styles.
Features
-
Content Display:
- Supports rich text content and custom HTML through
{{ module.content }}
and{{ module.richtext_field }}
. - Designed for use cases like showcasing documents, articles, or flyers.
- Supports rich text content and custom HTML through
-
Search Functionality:
- A fully interactive search form (
hs-search-field__form
) allowing users to query different types of content:- Website Pages
- Blog Posts
- Knowledge Articles
- Landing Pages
- Includes suggestions dropdown for auto-suggested search results.
- A fully interactive search form (
-
Customizable Styling:
- JSON configuration for fields and styles, enabling customization such as background colors, borders, text fonts, and button styles directly from the HubSpot editor.
-
Accessibility:
- Includes ARIA attributes for screen readers, ensuring compliance with accessibility standards.
Code Structure
HTML
- Defines the container structure with:
div.paper-container
: Main container.div.paper-content
: For rendering dynamic content.div.paper-search
: Search bar implementation using HubSpot modules.
CSS
- Includes styles for:
- Layout (
.paper-container
,.paper-search
). - Search elements (
.hs-search-field
,.hs-search-field__input
,.hs-search-field__button
). - Autosuggest dropdown results and hover states.
- Layout (
JSON
- Fields: Configures search inputs (e.g., labels, placeholders, button text).
- Styles: Allows customization of visual properties like colors, spacing, and fonts.
How to Use
1. Content Configuration
- Update the module’s
title
andcontent
fields via HubSpot’s editor.
2. Search Customization
- Adjust search results behavior by modifying
results
fields in the JSON:- Enable/disable custom search result pages (
use_custom_search_results_template
). - Specify content types for search results (e.g.,
blog_posts
,website_pages
).
- Enable/disable custom search result pages (
3. Styling Adjustments
- Use the
Styles
tab in the HubSpot editor to customize:- Background colors and borders for containers and buttons.
- Font size, color, and alignment for text elements.
4. Autosuggest Configuration
- Customize the autosuggest dropdown text and appearance using the
default_text
group in the JSON.
Notes
- Ensure the search results page in HubSpot is correctly configured to handle search queries.
- For accessibility compliance, verify that all ARIA attributes are accurate and functional.
- For further customization or troubleshooting, consult HubSpot Knowledge Base.
License
This module is licensed under MIT License. Contributions are welcome!
-
API and Pokemon
-
Creating Peachjar’s Help Center
-
Astro: Lessons & Wins
-
Twitter Mention bot
-
Astro Test Blog
-
Hubspot-Modules
-
HubSpot-Module-RichText
Related:
Written by

Jordi Comas
Senior Technical Writer
Industrial Designer