Dynamics-365-Customer-Insights-Form-Templates

Dynamics 365 Customer Insights - Form Templates

License HTML Validation GitHub stars GitHub forks

Beautiful, modern, accessible, and customizable form templates for Dynamics 365 Customer Insights - available in both Tailwind CSS and pure CSS3 versions.

image

Overview

This repository provides custom HTML form templates for Dynamics 365 Customer Insights that break free from the standard default forms. These templates are rebuilt from the ground up with a modern look, advanced features, and full accessibility support.

This repo was inspired by the work of Megan V. Walker, who’s content I’ve used over the years to super-charge my Dynamics knowledge. https://meganvwalker.com

Form Types and Use Cases

Dynamics 365 has multiple form types: standard forms (such as contact forms), event forms, and preference centers. This repo currently focuses on standard forms, with event forms and preference centers coming soon.

Standard Forms

Form Template Versions

This repository includes two versions of the contact form template:

1. Tailwind CSS Version (contact-form.html)

2. Pure CSS3 Version (contact-form-css3.html)

📊 Need help choosing? See the Template Comparison Guide for detailed differences and recommendations.

Note: Both versions use Google Fonts and an optional email validation API. The validation API fails gracefully if unavailable.

🎨 Easy Theme Customization

One template, infinite possibilities! Simply change a single color value to switch themes.

Available Color Themes

Theme Color Code Description Use Case
🔵 Blue #0078d4 Professional and trustworthy Default, tech, corporate
⚫ Corporate #1e293b Sleek slate gray B2B, enterprise, professional
🟣 Vibrant #9333ea Bold purple Creative, events, youth brands
⚪ Minimal #000000 Classic black and white Luxury, design studios, modern
🎨 Custom #?????? Your brand color Anything you want!

How to Change Theme

For Tailwind CSS Version:

  1. Open templates/contact-form.html
  2. Find line 53 (the Tailwind configuration)
  3. Replace #0078d4 with your chosen color code
  4. Save and you’re done!

For Pure CSS3 Version:

  1. Open templates/contact-form-css3.html
  2. Find the :root CSS variables section (around line 44)
  3. Replace --brand-color: #0078d4; with your chosen color code
  4. Save and you’re done!

Example:

colors: {
    brand: {
        DEFAULT: /* @brand-color */ '#9333ea' /* @brand-color */
        // Changed to Vibrant theme!
    }
}

That’s it! The entire form (buttons, focus rings, checkboxes) automatically updates to your chosen color.

Prerequisites

Before using these templates, ensure you have:

Quick Start

  1. Choose your template version
    • Tailwind CSS Version: templates/contact-form.html (uses Tailwind CSS CDN)
    • Pure CSS3 Version: templates/contact-form-css3.html (no external frameworks)
  2. Copy the HTML template
    • Navigate to your chosen template file in this repository
    • Copy the entire HTML content
  3. Access Dynamics 365 Marketing Forms
    • Log into Dynamics 365 Customer Insights
    • Navigate to Channels* > **Forms
    • Click New to create a new form
  4. Switch to HTML Editor
    • In the form editor, switch to HTML/Code view
    • Paste the template code
  5. Customize for your CRM
    • Update data-targetaudience attributes (contact or lead)
    • Verify data-targetproperty values match your CRM field logical names
    • Modify styling and text content as needed
  6. Test and Publish
    • Save the form
    • Test submission
    • Publish when ready

Installation & Customization

For detailed technical documentation, see documentation.md.

Basic Customization

Change Colors:

The template includes clear instructions at the top of the file. Just change one line:

DEFAULT: /* @brand-color */ '#0078d4' /* @brand-color */

Replace #0078d4 with any hex color to instantly theme the entire form!

Customize Validation Messages:

Find the VALIDATION_CONFIG object in the template and modify the messages:

const VALIDATION_CONFIG = {
  messages: {
    required: 'Please fill out this field',
    email: 'Please enter a valid email address',
    emailPersonal: 'Work email is preferred. Personal email detected.',
    emailInvalid: 'This email address is not valid',
    emailValid: 'Email address accepted',
    validating: 'Validating email...'
  },
  // Add or remove personal email domains
  personalDomains: [
    'gmail.com', 'yahoo.com', 'outlook.com', 'hotmail.com', ...
  ]
};

Add Custom Fields:

<div class="mb-4"
     data-editorblocktype="TextFormField"
     data-targetaudience="contact"
     data-targetproperty="your_field_logical_name"
     data-required="required">
  <label for="your_field" class="block text-gray-800 text-sm font-medium mb-2">
    Your Field Label
  </label>
  <input id="your_field"
         type="text"
         name="your_field_logical_name"
         placeholder="Enter value"
         required
         title="Your custom validation message"
         class="w-full p-3 border border-gray-300 rounded-lg">
  <span class="validation-message text-sm text-red-600 mt-1 hidden"></span>
</div>

Tech Stack

Tailwind CSS Version

Pure CSS3 Version

Development

Browser Support

Features

Testing

This project includes a comprehensive test suite to ensure all functionality works as expected.

Running Tests

# Install dependencies
npm install

# Run all tests (HTML validation + automated tests)
npm test

# Run only HTML validation
npm run test:html

# Run automated test suite
npm run test:serve

# Open browser-based interactive tests
npm run test:browser

Test Coverage

The test suite includes 31+ automated tests covering:

For detailed testing documentation, see tests/README.md.

Troubleshooting

Common Issues

Form doesn’t submit:

Validation messages not showing:

Email validation not working:

Styling doesn’t appear:

Modal doesn’t close:

Fields not mapping to CRM:

Tests failing:

For more detailed troubleshooting, see the documentation.

Roadmap

Contributing

Contributions are welcome! If you’d like to improve these templates:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/your-feature)
  3. Commit your changes (git commit -m 'Add your feature')
  4. Push to the branch (git push origin feature/your-feature)
  5. Open a Pull Request

Please ensure your code:

License

This project is licensed under the MIT License - see the LICENSE file for details.

Credits & Resources

Support

For questions or issues:

Made with ❤️ for the Dynamics 365 community

This site is open source. Improve this page.