The W3CSS Contact bundle, a sub-module within the Drupal Module W3CSS Paragraphs, represents a robust and versatile tool for web developers and designers using Drupal. This bundle is specifically tailored to integrate and display contact forms in a visually appealing and customizable manner. To utilize its full functionality, the Contact Formatter Drupal module must be installed.

Display Tab Features:

1. Background Colors:
   • Offers a selection of 30 different colors.
   • Enables users to personalize the background color of the contact section to match the website’s theme or to stand out.
2. Background Color Hover:
   • Provides 30 color options available for hover states.
   • Enhances user interaction by changing the background color when hovered over.
3. Text Colors:
   • Includes 30 different color options for text.
   • Allows for a harmonious or contrasting text color selection based on the chosen background.
4. Text Color Hover:
   • Presents 30 color options for text on hover.
   • Improves readability and user engagement upon hovering.
5. Border Color:
   • Offers a choice of 30 different colors for borders.
   • Useful for defining the boundary or emphasizing the contact section.
6. Border Color Hover:
   • Features 30 color options available for border color changes on hover.
   • Adds an interactive element to the contact section borders.
7. Background Color Opacity:
   • After selecting a background color, users can adjust the opacity from 5% to 95% in increments of 10%.
   • This feature provides 330 color variations, exclusively affecting the background color.
   • Enhances the visual appeal by allowing background blending with underlying content or images.
8. Width:
   • Options range from 30% to 100%.
   • Enables users to control the width of the contact section, ensuring it fits seamlessly into various layouts.
9. Borders:
   • Choose from 11 different border styles.
   • Offers a range of styles from simple lines to more intricate designs.
10. Round Borders:
    • 6 styles available for rounded borders.
    • Adds a softer, more modern look to the contact section.
11. Margin:
    • 6 margin styles available.
    • Facilitates spacing adjustments around the contact section for a balanced layout.
12. Padding:
    • Choose from 8 different padding styles.
    • Ensures content within the contact section has adequate space from the edges for better readability.
13. Box Shadow:
    • Option to add a 2px or 4px bordered shadow.
    • Creates a subtle depth effect, making the contact section more prominent.
14. W3.CSS Classes:
    • Additional field to apply any W3.CSS classes.
    • Provides further customization and styling options by leveraging W3.CSS’s extensive class library.

Content Tab Features:

1. Title:
   • A field to input the content title.
   • Allows users to add a descriptive or catchy title to the contact section.
2. Entity Reference Field:
   • To reference and display the contact form.
   • Seamlessly integrates a Drupal contact form into the paragraph bundle.

In summary, the W3CSS Contact bundle offers a comprehensive set of customization options that enable web developers to create visually appealing and interactive contact sections in their Drupal site. With a wide range of color, style, and layout choices, it ensures that the contact form can be seamlessly integrated while maintaining the site's aesthetic integrity and enhancing user engagement.