Contact | Charcoal

<!doctype html> <html class="has-no-js" lang="en" data-template="contact" > <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <base href="https://charcoal.locomotive.ca/"> <title>Contact | Charcoal</title> <link rel="alternate" hreflang="fr" href="https://charcoal.locomotive.ca/fr/contact"> <meta name="description" content="A web-based tool box that adapts to all your project needs."> <meta property="og:type" content="website"> <meta property="og:url" content="https://charcoal.locomotive.ca/en/contact"> <meta property="og:site_name" content="Charcoal"> <meta property="og:title" content="Contact"> <meta property="og:image" content="https://charcoal.locomotive.ca/assets/app/images/placeholders/default-meta-image.png"> <meta property="og:description" content="A web-based tool box that adapts to all your project needs."> <meta property="twitter:title" content="Contact"> <meta property="twitter:description" content="A web-based tool box that adapts to all your project needs.">  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="HandheldFriendly" content="true">  <link rel="apple-touch-icon" sizes="180x180" href="assets/app/images/favicons/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/app/images/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/app/images/favicons/favicon-16x16.png"> <link rel="manifest" href="assets/app/images/favicons/site.webmanifest"> <link rel="mask-icon" href="assets/app/images/favicons/safari-pinned-tab.svg" color="#5bbad5"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff">   <link rel="icon" href="assets/app/images/favicons/favicon.svg"> <link id="css-app-main" rel="stylesheet" href="assets/app/styles/main.css?v=202206141126" media="print" onload="this.media='all'; this.onload=null; this.isLoaded=true"> <style media="all"> html{min-height:100%;color:#222;font-family:"Suisse BP Int'l";line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}@media (max-width: 699px){html{font-size:15px}}@media (min-width: 700px) and (max-width: 999px){html{font-size:15px}}@media (min-width: 1000px) and (max-width: 1199px){html{font-size:15px}}@media (min-width: 1200px) and (max-width: 1599px){html{font-size:16px}}@media (min-width: 1600px) and (max-width: 1999px){html{font-size:17px}}@media (min-width: 2000px) and (max-width: 2399px){html{font-size:17px}}@media (min-width: 2400px){html{font-size:18px}}html.is-loading{cursor:wait}html.has-scroll-smooth,html:not(.has-scroll-module-init){overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}html.has-scroll-dragging{user-select:none}html.has-menu-mobile-open{overflow:hidden}body{overflow-x:hidden}.has-scroll-smooth body{overflow:hidden}.has-menu-mobile-open body{overflow:hidden}.is-first-load body{opacity:1 !important}::selection{background-color:#fff;color:#3297FD;text-shadow:none}a{color:currentColor}a:hover{color:currentColor}svg{display:block}[data-scroll-section]{will-change:transform}[data-load-container]{position:relative;z-index:10}.c-preloader{position:fixed;z-index:10000;top:0;left:0;width:100%;height:100%;transition:visibility 0s cubic-bezier(0.4, 0, 0, 1) 0s;visibility:visible}.c-preloader::before{content:"";position:absolute;top:0;bottom:0;right:0;left:0;z-index:-1;background-color:#4958E5;transform:scale3d(1, 1, 1);transform-origin:center bottom;transition:transform 0.6s cubic-bezier(0.4, 0, 0, 1) 0.3s}.is-loaded .c-preloader{visibility:hidden;transition-delay:0.8s}.is-loaded .c-preloader::before{transform:scale3d(1, 0, 1);transform-origin:center top;transition-duration:0.8s;transition-delay:0s}.c-loader{position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;z-index:1;transition:visibility .3s cubic-bezier(0.4, 0, 0, 1),opacity .3s cubic-bezier(0.4, 0, 0, 1);color:#F1F2FE;visibility:visible;opacity:1;overflow:visible;padding-top:60px;width:60px}.is-loaded .c-loader{visibility:hidden;opacity:0}form.is-loading .c-loader{opacity:1;z-index:10;visibility:visible;color:#4D5DF1}.c-loader_inner{position:absolute;top:0;left:0;width:60px;height:60px;box-sizing:border-box;z-index:1}.c-loader_inner:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;animation:loader-figure 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);animation-play-state:running;background-color:currentColor;z-index:1}.c-loader_inner:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;animation:loader-label 1.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);animation-play-state:running;background-color:currentColor;z-index:-1;transform:scale(0);opacity:0}.is-loaded .c-loader_inner:before,.is-loaded .c-loader_inner:after{animation-play-state:paused}form.is-loading .c-loader_inner:before,form.is-loading .c-loader_inner:after{animation-play-state:running}@keyframes loader-figure{0%{transform:scale(1)}50%{transform:scale(0.75)}100%{transform:scale(1)}}@keyframes loader-label{0%{opacity:1;transform:scale(0)}50%{}75%{opacity:0;transform:scale(1.6)}100%{}} /*# sourceMappingURL=critical.css.map */ </style> </head> <body data-module-load style="opacity: 0;"> <div class="c-preloader"> <div class="c-loader"> <span class="c-loader_inner"></span> </div> </div> <div data-load-container> <nav class="c-products-nav"> <div class="c-products-nav_background" data-module-products-button></div> <div class="c-products-nav_container"> <div class="o-container"> <div class="c-products-nav_inner"> <ul class="c-products-nav_list"> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="en/feature/content-management"> Content Management </a> </li> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="en/feature/e-shop-management"> E-Commerce Toolbox </a> </li> <li class="c-products-nav_list_item "> <span class="c-products-nav_list_item_icon"> <svg role="img"><use href="assets/app/images/sprite.svg#arrow-right"></use></svg> </span> <a href="en/feature/data-management"> Data & API Integration </a> </li> </ul> </div> </div> <div class="c-products-nav_image"> <div class="c-products-nav_image_inner" style="background-image:url('assets/app/images/shapes/shape-01.png');"> </div> </div> </div> </nav> <div class="c-nav-mobile"> <div class="c-nav-mobile_inner o-container"> <div class="c-nav-mobile_container"> <ul class="c-nav-mobile_list"> <li class="c-nav-mobile_list_item"> <span class="c-nav-mobile_list_item_label">Features</span> <ul class="c-nav-mobile_sublist"> <li class="c-nav-mobile_sublist_item"> <a href="en/feature/content-management" class="c-nav-mobile_list_item_label">Content Management</a> </li> <li class="c-nav-mobile_sublist_item"> <a href="en/feature/e-shop-management" class="c-nav-mobile_list_item_label">E-Commerce Toolbox</a> </li> <li class="c-nav-mobile_sublist_item"> <a href="en/feature/data-management" class="c-nav-mobile_list_item_label">Data & API Integration</a> </li> </ul> </li> <li class="c-nav-mobile_list_item"> <a href="en/technology" class="c-nav-mobile_list_item_label">Technology</a> </li> </ul> <div class="c-nav-mobile_buttons">  <a href="en/contact" class="c-button -black"> <span class="c-button_label">Get in touch</span> </a> </div> </div> </div> </div> <header class="c-header -fixed"> <div class="o-container"> <div class="c-header_container"> <div class="c-header_container_item"> <a class="c-header_logo" href="en"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> <ul class="c-header_menu u-none@to-medium"> <li class="c-header_menu_item -products"> <button class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" data-module-products-button type="button"> Features <span class="c-header_menu_item_inner_arrow"> <svg role="img"> <use href="assets/app/images/sprite.svg#arrow-down-tip"></use> </svg> </span> </button> </li> <li class="c-header_menu_item"> <a class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" href="en/technology"> Technology </a> </li> </ul> </div> <div class="c-header_container_item -right"> <ul class="c-header_menu"> <li class="c-header_menu_item u-none@to-medium"> <a class="c-header_menu_item_inner c-link u-capitalize" href="https://charcoal.locomotive.ca/fr/contact" data-module-split data-split-type="chars" data-load="false"> fr </a> </li> <li class="c-header_menu_item u-none@to-medium"> <a href="en/contact" class="c-button"> <span class="c-button_label">Get in touch</span> </a> </li> </ul> <button class="c-header_burger" type="button" aria-label="Toggle Menu" data-module-nav-mobile-button> <span class="c-header_burger_open"> <span class="c-header_burger_open_item"></span> <span class="c-header_burger_open_item"></span> </span> <span class="c-header_burger_close"> <span class="c-header_burger_close_item"></span> <span class="c-header_burger_close_item"></span> </span> </button> </div> </div> </div> </header> <div class="o-scroll" data-module-scroll="main"> <section data-scroll-section> <header class="c-header -difference"> <div class="o-container"> <div class="c-header_container"> <div class="c-header_container_item"> <a class="c-header_logo" href="en"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> <ul class="c-header_menu u-none@to-medium"> <li class="c-header_menu_item -products"> <button class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" data-module-products-button type="button"> Features <span class="c-header_menu_item_inner_arrow"> <svg role="img"> <use href="assets/app/images/sprite.svg#arrow-down-tip"></use> </svg> </span> </button> </li> <li class="c-header_menu_item"> <a class="c-header_menu_item_inner c-link" data-module-split data-split-type="chars" href="en/technology"> Technology </a> </li> </ul> </div> <div class="c-header_container_item -right"> <ul class="c-header_menu"> <li class="c-header_menu_item u-none@to-medium"> <a class="c-header_menu_item_inner c-link u-capitalize" href="https://charcoal.locomotive.ca/fr/contact" data-module-split data-split-type="chars" data-load="false"> fr </a> </li> <li class="c-header_menu_item u-none@to-medium"> <a href="en/contact" class="c-button"> <span class="c-button_label">Get in touch</span> </a> </li> </ul> <button class="c-header_burger" type="button" aria-label="Toggle Menu" data-module-nav-mobile-button> <span class="c-header_burger_open"> <span class="c-header_burger_open_item"></span> <span class="c-header_burger_open_item"></span> </span> <span class="c-header_burger_close"> <span class="c-header_burger_close_item"></span> <span class="c-header_burger_close_item"></span> </span> </button> </div> </div> </div> </header> <div class="c-section"> <div class="o-container"> <header class="c-header-contact"> <div class="o-layout -gutter"> <div class="o-layout_item u-3/5@from-medium"> <h1 class="c-heading -h2 u-color-blue u-anim-text-line" data-module-split data-scroll data-scroll-speed="2" data-scroll-position="top"> Get <br> in touch </h1> <p class="c-header-contact_infos u-anim -delay-3"> If you would like to build a project on Charcoal, our team can help. </p> </div> <div class="o-layout_item u-2/5@from-medium"> <h2 class="c-heading -h4 u-anim -delay-4">Your Message</h2> <form id="c-contact-form" class="c-header-contact_form u-anim -delay-5" action="/api/v1/contact" method="POST" data-module-form data-module-recaptcha data-form-success-message="Thank you! Our team will reach out as soon as possible." data-form-warning-message="There is a problem with your form. Please try again." data-form-error-message="An error occurred. Please try again." data-form-critical-message="An error occurred. Please try later."> <div class="o-layout -gutter"> <div class="o-layout_item"> <div id="name-field" class="c-form_item"> <label class="c-form_label" for="name">Full Name</label> <input class="c-form_control c-form_input" id="name" name="name" type="text" required> </div> </div> <div class="o-layout_item"> <div id="email-field" class="c-form_item"> <label class="c-form_label" for="email">Email Address</label> <input class="c-form_control c-form_input" id="email" name="email" type="email" required> </div> </div> <div class="o-layout_item"> <div id="message-field" class="c-form_item"> <label class="c-form_label" for="message">Message</label> <textarea class="c-form_control c-form_textarea" id="message" name="message" required></textarea> </div> </div> <div for="c-contact-form-feedback" class="o-layout_item u-1/2" data-form="feedback"> </div> <div class="o-layout_item u-1/2 u-text-right"> <div class="c-header-contact_submit_wrap"> <div class="c-spinner"> <svg aria-hidden="true" focusable="false"> <use href="assets/app/images/sprite.svg#spinner"></use> </svg> </div> <button for="c-contact-form-submit" type="submit" class="c-header-contact_submit c-button -blue -big">Send</button> </div> </div> </div> </form> </div> </div> </header> </div> </div> </section> <section data-scroll-section class="u-background-light"> <div class="c-section" id="features"> <div class="o-container"> <h2 class="c-heading -h1 u-color-blue u-anim-text-line" data-module-split data-scroll> Main Features </h2> <div class="o-layout -gutter-small u-text-center c-tiles"> <div class="o-layout_item u-1/4@from-medium u-1/2@from-small"> <a href="en/feature/content-management" class="c-tile -quarter u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="4" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Enhance your digital growth with our comprehensive content management system.</span> <span class="c-tile_inner_top_item">01</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="square" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="0"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Content Management</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/4@from-medium u-1/2@from-small"> <a href="en/feature/e-shop-management" class="c-tile -quarter u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="2" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Drive your sales online with our flexible & customizable e-commerce toolbox.</span> <span class="c-tile_inner_top_item">02</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="hexagon" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="300"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">E-Commerce Toolbox</span> </span> </div> </div> </a> </div> <div class="o-layout_item u-1/4@from-medium u-1/2@from-small"> <a href="en/feature/data-management" class="c-tile -quarter u-border-radius" data-scroll data-scroll-offset="0" data-scroll-speed="-1" data-scroll-target="#features"> <div class="c-tile_inner"> <div class="c-tile_inner_top"> <span class="c-tile_inner_top_item">Manage incoming and outgoing data with our flexible, open API framework.</span> <span class="c-tile_inner_top_item">03</span> </div> <div class="c-tile_inner_middle"> <div class="c-tile_inner_middle_lottie" data-module-lottie data-lottie-file-path="https://charcoal.locomotive.ca/assets/app/lottie/" data-lottie-file-name="circle" data-lottie-autoplay="true" data-lottie-yoyo="true" data-lottie-delay="600"></div> </div> <div class="c-tile_inner_bottom"> <span class="c-tile_inner_bottom_item"> <div class="c-tile_inner_bottom_button"> <svg role="img" aria-hidden="true"> <use href="https://charcoal.locomotive.ca/assets/app/images/sprite.svg#arrow-right"> </use> </svg> </div> </span> <span class="c-tile_inner_bottom_item"> <span class="c-tile_inner_bottom_title">Data & API Integration</span> </span> </div> </div> </a> </div> </div> </div> </div> </section> <section data-scroll-section> <footer class="c-footer"> <div class="c-footer_background"> <div class="c-footer_background_shape -one" data-scroll data-scroll-speed="1.5" data-scroll-position="bottom" data-scroll-offset="0" data-scroll-delay="0.15"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-1"></use> </svg> </div> </div> <div class="c-footer_background_shape -two" data-scroll data-scroll-speed="3" data-scroll-position="bottom" data-scroll-offset="0" data-scroll-delay="0.07"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-2"></use> </svg> </div> </div> <div class="c-footer_background_shape -three" data-scroll data-scroll-speed="4" data-scroll-position="bottom" data-scroll-offset="0"> <div class="c-footer_background_shape_inner"> <svg role="img"> <use href="assets/app/images/sprite.svg#shape-3"></use> </svg> </div> </div> </div> <div class="o-container"> <nav class="o-layout -bottom c-footer_nav"> <div class="o-layout_item u-1/3@from-small"> <a class="c-footer_logo u-anim" data-scroll data-scroll-offset="0" href="en"> <svg role="img" aria-label="Charcoal"> <use href="assets/app/images/sprite.svg#logo"></use> </svg> </a> </div> <div class="o-layout_item u-1/3@from-small"> <ul class="c-footer_nav_list" data-scroll data-scroll-offset="0"> <li class="c-footer_nav_list_item u-anim -parent"> <a href="en#features" class="c-link" data-module-split data-split-type="chars"> Features </a> </li> <li class="c-footer_nav_list_item u-anim -delay-1 -parent"> <a href="en/technology" class="c-link" data-module-split data-split-type="chars"> Technology </a> </li> <li class="c-footer_nav_list_item u-anim -delay-2 -parent"> <a href="en/technology#meet-the-team" class="c-link" data-module-split data-split-type="chars"> Team </a> </li> </ul> </div> <div class="o-layout_item u-1/3@from-small u-text-right@from-small u-anim -delay-4" data-scroll data-scroll-offset="0"> <a href="en/contact" class="c-button -white -hover-gray"> <span class="c-button_label"> Get in touch </span> </a> </div> </nav> <div class="c-footer_copy"> <div class="o-layout"> <div class="o-layout_item u-1/3@from-medium u-1/2@to-medium u-anim" data-scroll data-scroll-offset="0"> © 2024 Charcoal </div> <div class="o-layout_item u-2/3@from-medium u-1/2@to-medium u-anim u-text-right@to-medium" data-scroll data-scroll-offset="0"> Website by <a href="https://locomotive.ca" target="_blank" rel="noopener">Locomotive</a> </div> </div> </div> </div> </footer> </section> </div> <div class="c-video-modal" data-module-video-modal> <button type="button" class="c-button -white || c-video-modal_close" data-video-modal="close"> <span class="c-button_bg"></span> <span class="c-button_label">Close</span> </button> <div class="c-video-modal_content"> <div class="c-video-modal_inner" data-video-modal="inner"></div> </div> </div> </div> <script nomodule crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js"></script> <script defer src="assets/app/scripts/vendors.js?v=202206141126"></script> <script defer src="assets/app/scripts/app.js?v=202206141126"></script> </body> </html>

CINXE.COM

Contact | Charcoal