Dynamics-365-Customer-Insights-Form-Templates

Template Version Comparison Guide

This document helps you choose between the two available form template versions.

Quick Comparison

Feature	Tailwind CSS Version	Pure CSS3 Version
File Name	contact-form.html	contact-form-css3.html
CSS Framework	Tailwind CSS (CDN)	Pure CSS3
External Dependencies	Yes (Tailwind CDN)	No
File Size	~19 KB HTML + ~50KB Tailwind (CDN)	~27 KB (self-contained)
Styling Approach	Utility classes	Custom CSS
Theme Customization	One line (Tailwind config)	One line (CSS variable)
Browser Support	Modern browsers	Modern browsers
Load Time	Fast (CDN cached)	Fast (inline styles)
Offline Support	Requires internet	Fully self-contained
Customization Ease	Tailwind utilities	Traditional CSS
Learning Curve	Requires Tailwind knowledge	Standard CSS knowledge

When to Use Tailwind CSS Version

✅ Best for:

• Teams already familiar with Tailwind CSS
• Projects using Tailwind elsewhere
• When you want the smallest HTML file size
• When CDN availability is reliable
• Fast prototyping and iteration
• Projects with internet connectivity

❌ Avoid if:

• You need offline form functionality
• Corporate firewalls block CDN access
• You prefer not using external dependencies
• Team is unfamiliar with utility-first CSS

When to Use Pure CSS3 Version

✅ Best for:

• Environments with restricted internet access
• Corporate intranets behind firewalls
• Fully self-contained deployments (no CSS framework dependency)
• Teams preferring traditional CSS
• When you want no external CSS framework dependencies
• Smaller total download size (no separate CSS framework)
• Projects where you prefer inline styles

Note: Both versions use an external email validation API service. For truly offline deployments, this API call will fail gracefully and allow form submission.

❌ Avoid if:

• File size is critical (slightly larger)
• Team prefers utility-first approach
• Already using Tailwind in your project

Detailed Feature Comparison

Styling & Design

Tailwind CSS Version:

<input class="w-full p-3 border border-gray-300 rounded-lg 
              focus:outline-none focus:ring-2 focus:ring-brand">

Pure CSS3 Version:

<input type="text">
<!-- Styled with CSS rules -->
<style>
input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
</style>

Theme Customization

Both versions support easy one-line theme changes:

Tailwind CSS Version:

tailwind.config = {
    theme: {
        extend: {
            colors: {
                brand: {
                    DEFAULT: '#0078d4'  // ← Change this
                }
            }
        }
    }
}

Pure CSS3 Version:

:root {
    --brand-color: #0078d4;  /* ← Change this */
}

JavaScript Validation

Both versions use identical JavaScript validation logic:

• ✅ Same validation functions
• ✅ Same email domain checking
• ✅ Same MX record validation (via external API)
• ✅ Same form state management
• ✅ Same error handling

Note on Email Validation API: Both templates use an external email validation service to check MX records. This service:

• Helps prevent invalid email submissions
• Fails gracefully if unavailable (doesn’t block form submission)
• Can be disabled by removing the checkMXRecords function call
• Is optional for email validation to work (basic format validation still functions)

Performance Considerations

Tailwind CSS Version

• First Load: Downloads Tailwind from CDN (~50KB)
• Subsequent Loads: Uses browser cache (very fast)
• Total Load Time: Usually faster due to CDN caching

Pure CSS3 Version

• First Load: Everything inline (~27KB, no CSS framework to download)
• Subsequent Loads: Full HTML downloaded each time (~27KB)
• Total Load Time: Consistent, no separate CSS framework dependency
• Total Data Transfer: Less than Tailwind version (27KB vs 19KB + 50KB)

Maintenance & Updates

Tailwind CSS Version

• Pros: Automatic Tailwind updates from CDN
• Cons: Breaking changes in Tailwind could affect styling
• Maintenance: May need updates if Tailwind API changes

Pure CSS3 Version

• Pros: Complete control, no surprise breaking changes
• Cons: Manual CSS updates if design changes needed
• Maintenance: More stable, no external dependencies to track

Migration Between Versions

Both templates have:

• ✅ Same HTML structure
• ✅ Same Dynamics 365 attributes
• ✅ Same JavaScript validation
• ✅ Same form fields
• ✅ Same functionality

Switching is easy: Just copy your field modifications and theme color to the other version!

Recommendation Matrix

Your Situation	Recommended Version
Building a new form from scratch	Either (choose based on team preference)
Restricted internet access	Pure CSS3
Team knows Tailwind	Tailwind CSS
Team knows traditional CSS	Pure CSS3
Need smallest file size	Tailwind CSS
Zero external dependencies required	Pure CSS3
Corporate firewall restrictions	Pure CSS3
Fast prototyping needed	Tailwind CSS
Offline deployment	Pure CSS3
Maximum browser compatibility	Either (both support same browsers)

Summary

Choose Tailwind CSS Version if:

• You want a smaller HTML file
• Your team knows Tailwind
• Internet access is reliable
• You prefer utility-first CSS

Choose Pure CSS3 Version if:

• You need zero external dependencies
• Internet access is restricted
• Your team prefers traditional CSS
• Self-contained deployment is required

Both versions offer:

• ✅ Same functionality
• ✅ Same validation logic
• ✅ Same user experience
• ✅ Easy theme customization
• ✅ Full Dynamics 365 integration
• ✅ Mobile responsiveness
• ✅ Accessibility features

You can’t go wrong with either choice! Pick the one that best fits your team and deployment environment.

This site is open source. Improve this page.