Micro Frontend Architecture and Best Practices

What is Micro Frontend?

Micro Frontend is a Microservice approach to front-end web development. The current trend is to build a powerful and feature-rich web application which resides on top of a Microservice architecture. Over time the front end part of the application, is often developed by a separate team, grows and gets more difficult to maintain, this type of application is called Frontend Monolith. To solve this problem, the concept of the Micro Frontend came into the picture.

The concept of Micro Frontend is to think about a web application as a composition of features owned by different independent teams. Each team having a distinct area of business that it specializes in. A team is cross-functional and develops end-to-end features, from the user interface to the database. Micro Frontend is more friendly and less bulky one.

In this type of architecture, split the entire application by business domain across the entire stack. This enables front-end teams the same level of flexibility, testability, and velocity that backend teams get from Microservices.

You would also love to read how to integrate dot js Frameworks to Micro Frontend


How Micro Frontend Works?

Micro Frontend Techniques, strategies and recipes to build a modern web application with multiple teams using different JavaScript frameworks.

The main Concept behind Micro Frontend is as follows –

Be Technology Independent – Each team should choose and upgrade stack without having to coordinate with other teams. Custom elements help to hide implementation details while providing a neutral interface to others.

Isolate Team Code – Never share a runtime, even if teams use the same framework. Build an independent application self-contained. Do not rely on shared state or global variables.

Create Team Prefixes – Use naming conventions where isolation not possible yet. Namespace CSS, Local Storage, Events and Cookies to avoid collisions and clarify ownership.

Favor Native Browser Features over Custom APIs – Instead of building a global PubSub system use browser events for communication. If there is a need to build a cross-team API, try to keep as simple as possible.

Build a Web design that is Resilient – The features should be useful, even if JavaScript failed or do not get executed. To improve perceived performance use universal rendering and progressive enhancement.


Best Practices Of Micro-Frontend

Different practices to implement Micro Frontend –

The Single-SPA meta-framework to combine multiple frameworks on the same page without refreshing the page such a React, Vue, Angular 1, Angular 2 etc.

Multiple single-page application lives at different URLs. For shared functionality application use NPM or Bower components.

Isolating Micro-apps into Iframes using window. post Message APIs and libraries to coordinate. IFrames share APIs exposed by their parent window.

Different modules to communicate over a shared events bus. Each module is built using its own framework, as long as it handles incoming and outgoing events.

Component Libraries depending on the stack of the main app the different components and app sections developed as libraries and “required” into the main app so the main app is a composition of different components.

Web components as an integration layer


How to Adopt Micro Frontend?

Implementing Microservices with Web components

Integration in the Browser

Web components provide a way to create fragments of Front-End imported into Web applications. Those fragments can be packaged into Microservices together with the back-end. Services built, completed with both logic and visual representation packed together. By using this approach, Front-End applications reduced to routing makes decisions involving which set of components displayed and orchestration of events between different web components.

Web Components

Web components allow the creation of reusable components imported into Web applications. These are like widgets imported into any Web page. These are currently supported in browsers such as Chrome, Opera and FireFox. If in case, the browser does not support web components natively, compatibility accomplished using JavaScript Polyfills.

Web components consist of 4 main elements used separately or all together –

  • Custom Elements
  • Shadow DOM
  • HTML Imports
  • HTML Templates

Custom Elements

Create custom HTML tags and elements with Custom Elements. Each element has its own CSS styles and scripts. Create own tags, apply CSS styles and add behaviors through scripts. The only standard required to put hyphen to avoid conflicts new HTML elements. For example, create a list of check-out, both with custom elements and custom tags results in –



<check-out-list></check-out-list>	

In Web components, element lifecycle callbacks are there. These lifecycle callbacks allow defining behaviors specific to the component developing.

Lifecycle callbacks with custom elements are as follows –

  • CreatedCallback – It defines behavior that occurs when the component registered.
  • AttachedCallback – It defines behavior that occurs when the component inserted into the DOM.
  • DetachedCallback – It defines behavior that occurs when the element removed from the DOM.
  • AttributeChangedCallback – It defines behavior that occurs when an attribute added, changed or removed.

Example –


class CheckoutBasket extends HTMLElement {

constructer (){...} is created

connectedCallback (){...}  attached to DOM

attributeChangedCallback (attr , oldVal , newVal)  someone changed an attribute

disconnecteCallback () {...}  removed from DOM, cleanup events that have been registered
}

Custom elements by default – stencil, svelte, SkateJS, AngularElements, hyperHTML Elements etc.

Shadow DOM – the DOM is the API

Shadow DOM combines HTML, CSS and JavaScript inside a Web Component separated from the DOM of the main document when these are inside a component. This separation is similar to the one user while building API services and consumer of an API service does not know about its internals, the only thing that matters for a consumer are API requests. Such service does not have access to the outside world except to make requests to APIs of other services. Similar features observed in web components. Their internal behavior not accessed outside, except when allowed by design nor affects the DOM document they reside in. The main method of communication between web components is by firing events.

HTML Imports

For web components, HTML imports are the packaging mechanism. HTML imports tell DOM, the location of a Web Component. In the context of Microservices, import remote location of service contains the component to use.

HTML imports is a method to reuse and include HTML documents via other HTML documents. Predefined components as HTML imports, where each of them include own styles and scripts, decide on the top level which HTML import present in DOM at the moment, and the imported document handles rest of things.

Shell – Shell is a top-level wrapper which consists of a container for component and component picker. It should include controllers or views which allow user manipulating components.

Container – Container is the actual root place where HTML code of nested applications should be injected. For all nested apps it should have a single entry point.

Component picker – Component picker allows managing of nested applications active at the moment.

HTML imports – HTML imports are the abstract Microservices. These could be whole apps written in different frameworks.

HTML Templates

The HTML template element holds client-side content not rendered when a page loaded. It’s instantiated through JavaScript. It is a fragment of code used in the document.

Let’s try to understand the Implementation of Micro Frontend with the following React Js app example –

It is good when web application developed independently so that changes to the element done without being blocked by others and without breaking others as well. That’s why in this example new react app needed to build, run, and deploy separately, treating others that have to communicate with it as services.

The example below creates a header for a web page. In this example, React.js used. The modern generation is using it nowadays. Let’s use create-react-app for fast bootstrap –


npm install -g create-react-app

create-react-app head

cd head/

npm start

Now let’s add server-side rendering real quick, It will be used later when joining apps, for SEO and performance reasons. It is easier to attach this at the beginning.


Change src/App.js to an actual header:

import React from 'react';

export default () =>


<header>

<h1>Logo</h1>
<nav>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>;

 

Then, create a file called server.js at the root of the project that will start an express server and server-side render react –


const path = require('path');

const fs = require('fs');

const express = require('express');

const React = require('react');

const App = require('./transpiled/App.js').default;

const { renderToString } = require('react-dom/server');

const server = express();

server.get('/', (req, res) => {

const htmlPath = path.resolve(__dirname, 'build', 'index.html');

 fs.readFile(htmlPath, 'utf8', (err, html) => {


const rootElem = '<div id="root">';

const renderedApp = renderToString(React.createElement(App, null));
res.send(html.replace(rootElem, rootElem + renderedApp));
});
});
server.use(express.static('build'));
const port = process.env.PORT || 8080;
server.listen(port, () => {
console.log(`App listening on port ${port}`);
});

This script takes the root to react element (App), renders it to a string, and push it into the HTML before serving it to the user. React will later mount on top of that already rendered component.

But, that runs on NodeJS, and Node JS doesn’t understand JSX or other newer syntaxes like import, so babel used to transpile it before running the server –


npm install --dev babel-cli babel-preset-es2015

Add two tasks to the scripts section in package.json to run that –


"transpile": "NODE_ENV=production babel src --out-dir transpiled --presets es2015,react-app",

"start:prod": "NODE_ENV=production node server.js"

 

That’s it, Now run the header with –


npm run build

npm run transpile

npm run start:prod

Why Micro Frontend Matters?

In the Modern Era, new web apps, the front end is becoming bigger and bigger, and the back end is getting less important. Most of the code written on the frontend. And the Monolith approach doesn’t work for a larger web application. A monolithic approach to a large front-end application becomes unwieldy. There needs to be a tool of breaking it up into smaller modules that act independently. The solution to the problem is Micro frontend. As Micro Frontend code is written only in pure JavaScript and any of the javascript frameworks used or migrated from one framework to another.


Benefits Of Micro Frontend

Every day a new JavaScript technology invented and these are increasing faster than a speeding bullet. That sometimes it can be frustrating as every JavaScript technology has its own pros and cons. And while selecting a particular technology, everyone considers the maximum benefit and minimum risk. Micro frontend helps to use different technology for different services.

Here are some benefits of Micro Frontend –

  • Support code and style isolation, an individual development team can choose their own technology The development and deployment speed is very fast.
  • It helps in Continuous Deployment.
  • The testing becomes very simple as well as for every small change, don’t have to go and touch the entire application.
  • Front-end renovation – Improving new things becomes easier.
  • High Resilience and Better Maintenance.
  • Support code and style isolation.

Concluding Micro Frontend

Make sure the core and the integration are as simple as possible. One of the critical problems is to standardize the UI/UX principles. A universal solution is to use a style guide, example – Material Design, Bootstrap, among others. Communication with the team is the key to ensure everything is running smooth, create some standards and rules to minimize conflicts with the difference of teams working on a product. All these solutions meant to solve one problem, scalability. An application tends to grow significantly introduces numerous issues and conflicts, splitting the code into teams and applying the right logistic to deliver good quality, technology trending, and fast solutions to the world.


[wpforms id="8104"]
<div class="wpforms-container wpforms-container-full optin-monster-forms" id="wpforms-8104"><form id="wpforms-form-8104" class="wpforms-validate wpforms-form" data-formid="8104" method="post" enctype="multipart/form-data" action="/insights/what-is-micro-frontend/"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-page-indicator progress" data-indicator="progress" data-indicator-color="#72b239" data-scroll="1"><span class="wpforms-page-indicator-page-title" ></span><span class="wpforms-page-indicator-page-title-sep" style="display:none;"> - </span><span class="wpforms-page-indicator-steps">Step <span class="wpforms-page-indicator-steps-current">1</span> of 2</span><div class="wpforms-page-indicator-page-progress-wrap"><div class="wpforms-page-indicator-page-progress" style="width:50%;background-color:#72b239;"></div></div></div><div class="wpforms-field-container"><div class="wpforms-page wpforms-page-1 "><div id="wpforms-8104-field_10-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="10"></div><div id="wpforms-8104-field_24-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="24"><div id="wpforms-8104-field_24"><div class="form-popup-header"> <h2>Modernise Data Operations with DataOps</h2> </div></div></div><div id="wpforms-8104-field_21-container" class="wpforms-field wpforms-field-radio custom-radio-btn-wrapper wpforms-list-2-columns" data-field-id="21"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-8104-field_21">Sevices <span class="wpforms-required-label">*</span></label><ul id="wpforms-8104-field_21" class="wpforms-field-required wpforms-image-choices wpforms-image-choices-modern"><li class="choice-1 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8104-field_21_1" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/data-catalog-delivery-platform.png" alt="Data Catalog and Discovery Platform" title="Data Catalog and Discovery Platform"></span><input type="radio" id="wpforms-8104-field_21_1" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Data Catalog and Discovery Platform" tabindex="-1" required ><span class="wpforms-image-choices-label">Data Catalog and Discovery Platform</span></label></li><li class="choice-2 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8104-field_21_2" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/real-time-analytics-platform.png" alt="Real Time Analytics Platform" title="Real Time Analytics Platform"></span><input type="radio" id="wpforms-8104-field_21_2" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Real Time Analytics Platform" tabindex="-1" required ><span class="wpforms-image-choices-label">Real Time Analytics Platform</span></label></li><li class="choice-3 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8104-field_21_3" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/migration-delta-lake.png" alt="Migration to Delta Lake" title="Migration to Delta Lake"></span><input type="radio" id="wpforms-8104-field_21_3" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Migration to Delta Lake" tabindex="-1" required ><span class="wpforms-image-choices-label">Migration to Delta Lake</span></label></li><li class="choice-4 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8104-field_21_4" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/cloud-data-warehouse.png" alt="Cloud Data warehouse" title="Cloud Data warehouse"></span><input type="radio" id="wpforms-8104-field_21_4" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Cloud Data warehouse" tabindex="-1" required ><span class="wpforms-image-choices-label">Cloud Data warehouse</span></label></li><li class="choice-5 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8104-field_21_5" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/enterprise-data-strategy.png" alt="Enterprise Data Strategy" title="Enterprise Data Strategy"></span><input type="radio" id="wpforms-8104-field_21_5" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Enterprise Data Strategy" tabindex="-1" required ><span class="wpforms-image-choices-label">Enterprise Data Strategy</span></label></li></ul></div><div id="wpforms-8104-field_23-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="23"><div class="wpforms-clear wpforms-pagebreak-left"><button class="wpforms-page-button wpforms-page-next" data-action="next" data-page="1" data-formid="8104">Next</button></div></div></div><div class="wpforms-page wpforms-page-2 last " style="display:none;"><div id="wpforms-8104-field_25-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="25"><div id="wpforms-8104-field_25"><div class="form-popup-header"> <h2>Lets Discuss and Understand the Requirements</h2> </div></div></div><div id="wpforms-8104-field_20-container" class="wpforms-field wpforms-field-name col-12 col-sm-12 col-md-12 form-group" data-field-id="20"><label class="wpforms-field-label" for="wpforms-8104-field_20">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8104-field_20" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][20]" placeholder="Name" required></div><div id="wpforms-8104-field_2-container" class="wpforms-field wpforms-field-email col-12 col-sm-12 col-md-12 form-group" data-field-id="2"><label class="wpforms-field-label" for="wpforms-8104-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-8104-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email" required></div><div id="wpforms-8104-field_3-container" class="wpforms-field wpforms-field-text col-12 col-sm-12 col-md-12 form-group" data-field-id="3"><label class="wpforms-field-label" for="wpforms-8104-field_3">Organization <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8104-field_3" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][3]" placeholder="Organization" required></div><div id="wpforms-8104-field_11-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="11"><div class="wpforms-clear wpforms-pagebreak-left"></div></div></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-8104-field-hp" class="wpforms-field-label">Email</label><input type="text" name="wpforms[hp]" id="wpforms-8104-field-hp" class="wpforms-field-medium"></div><input type="hidden" name="wpforms[recaptcha]" value=""><div class="wpforms-submit-container" style="display:none;"><input type="hidden" name="wpforms[id]" value="8104"><input type="hidden" name="wpforms[author]" value="2"><input type="hidden" name="wpforms[post_id]" value="209"><button type="submit" name="wpforms[submit]" class="wpforms-submit om-trigger-conversion mon-btn" id="wpforms-submit-8104" value="wpforms-submit" aria-live="assertive" data-alt-text="Submitting..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container -->
[wpforms id="8095"]
<div class="wpforms-container wpforms-container-full optin-monster-forms" id="wpforms-8095"><form id="wpforms-form-8095" class="wpforms-validate wpforms-form" data-formid="8095" method="post" enctype="multipart/form-data" action="/insights/what-is-micro-frontend/"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-page-indicator progress" data-indicator="progress" data-indicator-color="#72b239" data-scroll="1"><span class="wpforms-page-indicator-page-title" ></span><span class="wpforms-page-indicator-page-title-sep" style="display:none;"> - </span><span class="wpforms-page-indicator-steps">Step <span class="wpforms-page-indicator-steps-current">1</span> of 2</span><div class="wpforms-page-indicator-page-progress-wrap"><div class="wpforms-page-indicator-page-progress" style="width:50%;background-color:#72b239;"></div></div></div><div class="wpforms-field-container"><div class="wpforms-page wpforms-page-1 "><div id="wpforms-8095-field_10-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="10"></div><div id="wpforms-8095-field_24-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="24"><div id="wpforms-8095-field_24"><div class="form-popup-header"> <h2>RPA and Cognitive Automation</h2> <p>Making business processes smarter and more efficient</p> </div></div></div><div id="wpforms-8095-field_21-container" class="wpforms-field wpforms-field-radio custom-radio-btn-wrapper wpforms-list-3-columns" data-field-id="21"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-8095-field_21">Sevices <span class="wpforms-required-label">*</span></label><ul id="wpforms-8095-field_21" class="wpforms-field-required wpforms-image-choices wpforms-image-choices-modern"><li class="choice-1 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8095-field_21_1" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/automation-anywhere.png" alt=""></span><input type="radio" id="wpforms-8095-field_21_1" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Choice 1" tabindex="-1" required ><span class="wpforms-image-choices-label"></span></label></li><li class="choice-2 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8095-field_21_2" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/uipath.png" alt=""></span><input type="radio" id="wpforms-8095-field_21_2" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Choice 2" tabindex="-1" required ><span class="wpforms-image-choices-label"></span></label></li><li class="choice-3 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8095-field_21_3" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/blueprism.png" alt=""></span><input type="radio" id="wpforms-8095-field_21_3" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Choice 3" tabindex="-1" required ><span class="wpforms-image-choices-label"></span></label></li><li class="choice-4 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8095-field_21_4" tabindex="0"><input type="radio" id="wpforms-8095-field_21_4" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Intelligent Automation" tabindex="-1" required ><span class="wpforms-image-choices-label">Intelligent Automation</span></label></li><li class="choice-5 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8095-field_21_5" tabindex="0"><input type="radio" id="wpforms-8095-field_21_5" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="RPA with AI" tabindex="-1" required ><span class="wpforms-image-choices-label">RPA with AI</span></label></li><li class="choice-6 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8095-field_21_6" tabindex="0"><input type="radio" id="wpforms-8095-field_21_6" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Open Source RPA Implementation" tabindex="-1" required ><span class="wpforms-image-choices-label">Open Source RPA Implementation</span></label></li></ul></div><div id="wpforms-8095-field_23-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="23"><div class="wpforms-clear wpforms-pagebreak-left"><button class="wpforms-page-button wpforms-page-next" data-action="next" data-page="1" data-formid="8095">Next</button></div></div></div><div class="wpforms-page wpforms-page-2 last " style="display:none;"><div id="wpforms-8095-field_25-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="25"><div id="wpforms-8095-field_25"><div class="form-popup-header"> <h2>Let Us Discuss and Understand the Requirement</h2> </div></div></div><div id="wpforms-8095-field_20-container" class="wpforms-field wpforms-field-name col-12 col-sm-12 col-md-12 form-group" data-field-id="20"><label class="wpforms-field-label" for="wpforms-8095-field_20">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8095-field_20" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][20]" placeholder="Name" required></div><div id="wpforms-8095-field_2-container" class="wpforms-field wpforms-field-email col-12 col-sm-12 col-md-12 form-group" data-field-id="2"><label class="wpforms-field-label" for="wpforms-8095-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-8095-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email" required></div><div id="wpforms-8095-field_3-container" class="wpforms-field wpforms-field-text col-12 col-sm-12 col-md-12 form-group" data-field-id="3"><label class="wpforms-field-label" for="wpforms-8095-field_3">Organization <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8095-field_3" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][3]" placeholder="Organization" required></div><div id="wpforms-8095-field_11-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="11"><div class="wpforms-clear wpforms-pagebreak-left"></div></div></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-8095-field-hp" class="wpforms-field-label">Phone</label><input type="text" name="wpforms[hp]" id="wpforms-8095-field-hp" class="wpforms-field-medium"></div><input type="hidden" name="wpforms[recaptcha]" value=""><div class="wpforms-submit-container" style="display:none;"><input type="hidden" name="wpforms[id]" value="8095"><input type="hidden" name="wpforms[author]" value="2"><input type="hidden" name="wpforms[post_id]" value="209"><button type="submit" name="wpforms[submit]" class="wpforms-submit om-trigger-conversion mon-btn" id="wpforms-submit-8095" value="wpforms-submit" aria-live="assertive" data-alt-text="Submitting..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container -->
[wpforms id="8085"]
<div class="wpforms-container wpforms-container-full optin-monster-forms" id="wpforms-8085"><form id="wpforms-form-8085" class="wpforms-validate wpforms-form" data-formid="8085" method="post" enctype="multipart/form-data" action="/insights/what-is-micro-frontend/"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-page-indicator progress" data-indicator="progress" data-indicator-color="#72b239" data-scroll="1"><span class="wpforms-page-indicator-page-title" ></span><span class="wpforms-page-indicator-page-title-sep" style="display:none;"> - </span><span class="wpforms-page-indicator-steps">Step <span class="wpforms-page-indicator-steps-current">1</span> of 2</span><div class="wpforms-page-indicator-page-progress-wrap"><div class="wpforms-page-indicator-page-progress" style="width:50%;background-color:#72b239;"></div></div></div><div class="wpforms-field-container"><div class="wpforms-page wpforms-page-1 "><div id="wpforms-8085-field_10-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="10"></div><div id="wpforms-8085-field_24-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="24"><div id="wpforms-8085-field_24"><div class="form-popup-header"> <img src="https://www.xenonstack.com/images/wednesday-digitally-transform-popup-img.png" /> <h2>Digitally Transform <span>your Organization </span></h2> </div></div></div><div id="wpforms-8085-field_21-container" class="wpforms-field wpforms-field-radio custom-radio-btn-wrapper wpforms-list-2-columns" data-field-id="21"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-8085-field_21">Sevices <span class="wpforms-required-label">*</span></label><ul id="wpforms-8085-field_21" class="wpforms-field-required wpforms-image-choices wpforms-image-choices-modern"><li class="choice-1 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8085-field_21_1" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/continous-delivery-e1594278564177.png" alt="Continous Delivery and DevSecOps" title="Continous Delivery and DevSecOps"></span><input type="radio" id="wpforms-8085-field_21_1" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Continous Delivery and DevSecOps" tabindex="-1" required ><span class="wpforms-image-choices-label">Continous Delivery and DevSecOps</span></label></li><li class="choice-2 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8085-field_21_2" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/robotic-process.png" alt="Robotic Process Automation" title="Robotic Process Automation"></span><input type="radio" id="wpforms-8085-field_21_2" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Robotic Process Automation" tabindex="-1" required ><span class="wpforms-image-choices-label">Robotic Process Automation</span></label></li><li class="choice-3 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8085-field_21_3" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/big-data-analytics.png" alt="Big Data Analytics" title="Big Data Analytics"></span><input type="radio" id="wpforms-8085-field_21_3" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Big Data Analytics" tabindex="-1" required ><span class="wpforms-image-choices-label">Big Data Analytics</span></label></li><li class="choice-4 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8085-field_21_4" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/cloud-security.png" alt="Cloud Security" title="Cloud Security"></span><input type="radio" id="wpforms-8085-field_21_4" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Cloud Security" tabindex="-1" required ><span class="wpforms-image-choices-label">Cloud Security</span></label></li><li class="choice-5 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8085-field_21_5" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/data-science-ai-e1594278553510.png" alt="Data Science and AI" title="Data Science and AI"></span><input type="radio" id="wpforms-8085-field_21_5" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Data Science and AI" tabindex="-1" required ><span class="wpforms-image-choices-label">Data Science and AI</span></label></li><li class="choice-6 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8085-field_21_6" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/cloud-migration-e1594278582638.png" alt="Cloud Migration" title="Cloud Migration"></span><input type="radio" id="wpforms-8085-field_21_6" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Cloud Migration" tabindex="-1" required ><span class="wpforms-image-choices-label">Cloud Migration</span></label></li></ul></div><div id="wpforms-8085-field_23-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="23"><div class="wpforms-clear wpforms-pagebreak-left"><button class="wpforms-page-button wpforms-page-next" data-action="next" data-page="1" data-formid="8085">Next</button></div></div></div><div class="wpforms-page wpforms-page-2 last " style="display:none;"><div id="wpforms-8085-field_25-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="25"><div id="wpforms-8085-field_25"><div class="form-popup-header"> <img src="https://www.xenonstack.com/images/wednesday-digitally-transform-popup-img.png" /> <div> <h2>How can we get in Touch</h2> <p>Fill the form and we will revert back to you soon.<p></div> </div></div></div><div id="wpforms-8085-field_20-container" class="wpforms-field wpforms-field-name col-12 col-sm-12 col-md-12 form-group" data-field-id="20"><label class="wpforms-field-label" for="wpforms-8085-field_20">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8085-field_20" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][20]" placeholder="Name" required></div><div id="wpforms-8085-field_2-container" class="wpforms-field wpforms-field-email col-12 col-sm-12 col-md-12 form-group" data-field-id="2"><label class="wpforms-field-label" for="wpforms-8085-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-8085-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email" required></div><div id="wpforms-8085-field_3-container" class="wpforms-field wpforms-field-text col-12 col-sm-12 col-md-12 form-group" data-field-id="3"><label class="wpforms-field-label" for="wpforms-8085-field_3">Organization <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8085-field_3" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][3]" placeholder="Organization" required></div><div id="wpforms-8085-field_11-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="11"><div class="wpforms-clear wpforms-pagebreak-left"></div></div></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-8085-field-hp" class="wpforms-field-label">Phone</label><input type="text" name="wpforms[hp]" id="wpforms-8085-field-hp" class="wpforms-field-medium"></div><input type="hidden" name="wpforms[recaptcha]" value=""><div class="wpforms-submit-container" style="display:none;"><input type="hidden" name="wpforms[id]" value="8085"><input type="hidden" name="wpforms[author]" value="2"><input type="hidden" name="wpforms[post_id]" value="209"><button type="submit" name="wpforms[submit]" class="wpforms-submit om-trigger-conversion mon-btn" id="wpforms-submit-8085" value="wpforms-submit" aria-live="assertive" data-alt-text="Submitting..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container -->
[wpforms id="8051"]
<div class="wpforms-container wpforms-container-full optin-monster-forms" id="wpforms-8051"><form id="wpforms-form-8051" class="wpforms-validate wpforms-form" data-formid="8051" method="post" enctype="multipart/form-data" action="/insights/what-is-micro-frontend/"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-page-indicator progress" data-indicator="progress" data-indicator-color="#72b239" data-scroll="1"><span class="wpforms-page-indicator-page-title" ></span><span class="wpforms-page-indicator-page-title-sep" style="display:none;"> - </span><span class="wpforms-page-indicator-steps">Step <span class="wpforms-page-indicator-steps-current">1</span> of 2</span><div class="wpforms-page-indicator-page-progress-wrap"><div class="wpforms-page-indicator-page-progress" style="width:50%;background-color:#72b239;"></div></div></div><div class="wpforms-field-container"><div class="wpforms-page wpforms-page-1 "><div id="wpforms-8051-field_10-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="10"></div><div id="wpforms-8051-field_24-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="24"><div id="wpforms-8051-field_24"><div class="form-popup-header"> <h2>Build an AI-Driven Enterprise</h2> <p>unlock the potential of AI at scale</p> </div></div></div><div id="wpforms-8051-field_21-container" class="wpforms-field wpforms-field-radio custom-radio-btn-wrapper wpforms-list-3-columns" data-field-id="21"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-8051-field_21">Sevices <span class="wpforms-required-label">*</span></label><ul id="wpforms-8051-field_21" class="wpforms-field-required wpforms-image-choices wpforms-image-choices-modern"><li class="choice-1 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8051-field_21_1" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/privacy-preserving-ai.png" alt="Privacy-Preserving AI" title="Privacy-Preserving AI"></span><input type="radio" id="wpforms-8051-field_21_1" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Privacy-Preserving AI" tabindex="-1" required ><span class="wpforms-image-choices-label">Privacy-Preserving AI</span></label></li><li class="choice-2 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8051-field_21_2" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/conversation-ai-platform.png" alt="Conversation AI Platform" title="Conversation AI Platform"></span><input type="radio" id="wpforms-8051-field_21_2" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Conversation AI Platform" tabindex="-1" required ><span class="wpforms-image-choices-label">Conversation AI Platform</span></label></li><li class="choice-3 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8051-field_21_3" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/enterprise-ai-platform.png" alt="Enterprise AI Platform" title="Enterprise AI Platform"></span><input type="radio" id="wpforms-8051-field_21_3" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Enterprise AI Platform" tabindex="-1" required ><span class="wpforms-image-choices-label">Enterprise AI Platform</span></label></li><li class="choice-4 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8051-field_21_4" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/continuous-delivery-machine-learning.png" alt="Continuous Delivery for Machine learning" title="Continuous Delivery for Machine learning"></span><input type="radio" id="wpforms-8051-field_21_4" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Continuous Delivery for Machine learning" tabindex="-1" required ><span class="wpforms-image-choices-label">Continuous Delivery for Machine learning</span></label></li><li class="choice-5 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8051-field_21_5" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/federated-transfer-learning.png" alt="Federated and Transfer Learning" title="Federated and Transfer Learning"></span><input type="radio" id="wpforms-8051-field_21_5" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Federated and Transfer Learning" tabindex="-1" required ><span class="wpforms-image-choices-label">Federated and Transfer Learning</span></label></li><li class="choice-6 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-8051-field_21_6" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/explainable-artificial-intelligence.png" alt="Explainable Artificial Intelligence (XAI)" title="Explainable Artificial Intelligence (XAI)"></span><input type="radio" id="wpforms-8051-field_21_6" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Explainable Artificial Intelligence (XAI)" tabindex="-1" required ><span class="wpforms-image-choices-label">Explainable Artificial Intelligence (XAI)</span></label></li></ul></div><div id="wpforms-8051-field_23-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="23"><div class="wpforms-clear wpforms-pagebreak-left"><button class="wpforms-page-button wpforms-page-next" data-action="next" data-page="1" data-formid="8051">Next</button></div></div></div><div class="wpforms-page wpforms-page-2 last " style="display:none;"><div id="wpforms-8051-field_25-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="25"><div id="wpforms-8051-field_25"><div class="form-popup-header"> <h2>How can we get in Touch</h2> <p>Fill the form and we will revert back to you soon.<p> </div></div></div><div id="wpforms-8051-field_20-container" class="wpforms-field wpforms-field-name col-12 col-sm-12 col-md-12 form-group" data-field-id="20"><label class="wpforms-field-label" for="wpforms-8051-field_20">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8051-field_20" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][20]" placeholder="Name" required></div><div id="wpforms-8051-field_2-container" class="wpforms-field wpforms-field-email col-12 col-sm-12 col-md-12 form-group" data-field-id="2"><label class="wpforms-field-label" for="wpforms-8051-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-8051-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email" required></div><div id="wpforms-8051-field_3-container" class="wpforms-field wpforms-field-text col-12 col-sm-12 col-md-12 form-group" data-field-id="3"><label class="wpforms-field-label" for="wpforms-8051-field_3">Organization <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-8051-field_3" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][3]" placeholder="Organization" required></div><div id="wpforms-8051-field_11-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="11"><div class="wpforms-clear wpforms-pagebreak-left"></div></div></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-8051-field-hp" class="wpforms-field-label">Name</label><input type="text" name="wpforms[hp]" id="wpforms-8051-field-hp" class="wpforms-field-medium"></div><input type="hidden" name="wpforms[recaptcha]" value=""><div class="wpforms-submit-container" style="display:none;"><input type="hidden" name="wpforms[id]" value="8051"><input type="hidden" name="wpforms[author]" value="2"><input type="hidden" name="wpforms[post_id]" value="209"><button type="submit" name="wpforms[submit]" class="wpforms-submit om-trigger-conversion mon-btn" id="wpforms-submit-8051" value="wpforms-submit" aria-live="assertive" data-alt-text="Submitting..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container -->
[wpforms id="7646"]
<div class="wpforms-container wpforms-container-full optin-monster-forms" id="wpforms-7646"><form id="wpforms-form-7646" class="wpforms-validate wpforms-form" data-formid="7646" method="post" enctype="multipart/form-data" action="/insights/what-is-micro-frontend/"><noscript class="wpforms-error-noscript">Please enable JavaScript in your browser to complete this form.</noscript><div class="wpforms-page-indicator progress" data-indicator="progress" data-indicator-color="#72b239" data-scroll="1"><span class="wpforms-page-indicator-page-title" ></span><span class="wpforms-page-indicator-page-title-sep" style="display:none;"> - </span><span class="wpforms-page-indicator-steps">Step <span class="wpforms-page-indicator-steps-current">1</span> of 2</span><div class="wpforms-page-indicator-page-progress-wrap"><div class="wpforms-page-indicator-page-progress" style="width:50%;background-color:#72b239;"></div></div></div><div class="wpforms-field-container"><div class="wpforms-page wpforms-page-1 "><div id="wpforms-7646-field_10-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="10"></div><div id="wpforms-7646-field_24-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="24"><div id="wpforms-7646-field_24"><div class="form-popup-header"> <h2>Accelerate Digital Transformation with Intelligent Automation</h2> </div></div></div><div id="wpforms-7646-field_21-container" class="wpforms-field wpforms-field-radio custom-radio-btn-wrapper wpforms-list-2-columns" data-field-id="21"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-7646-field_21">Sevices <span class="wpforms-required-label">*</span></label><ul id="wpforms-7646-field_21" class="wpforms-field-required wpforms-image-choices wpforms-image-choices-modern"><li class="choice-1 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-7646-field_21_1" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/real-time-data-analysis.png" alt="Real Time Data Analytics" title="Real Time Data Analytics"></span><input type="radio" id="wpforms-7646-field_21_1" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Real Time Data Analytics" tabindex="-1" required ><span class="wpforms-image-choices-label">Real Time Data Analytics</span></label></li><li class="choice-2 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-7646-field_21_2" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/data-visualization.png" alt="Interactive Data Visualisation" title="Interactive Data Visualisation"></span><input type="radio" id="wpforms-7646-field_21_2" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Interactive Data Visualisation" tabindex="-1" required ><span class="wpforms-image-choices-label">Interactive Data Visualisation</span></label></li><li class="choice-3 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-7646-field_21_3" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/application-modernisation.png" alt="Application Modernisation" title="Application Modernisation"></span><input type="radio" id="wpforms-7646-field_21_3" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Application Modernisation" tabindex="-1" required ><span class="wpforms-image-choices-label">Application Modernisation</span></label></li><li class="choice-4 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-7646-field_21_4" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/enterprise-ai.png" alt="Enterprise AI" title="Enterprise AI"></span><input type="radio" id="wpforms-7646-field_21_4" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Enterprise AI" tabindex="-1" required ><span class="wpforms-image-choices-label">Enterprise AI</span></label></li><li class="choice-5 depth-1 wpforms-image-choices-item"><label class="wpforms-field-label-inline" for="wpforms-7646-field_21_5" tabindex="0"><span class="wpforms-image-choices-image"><img src="https://www.xenonstack.com/wp-content/uploads/2020/07/intelligent-cognitive-automation.png" alt="Intelligent and Cognitive Automation" title="Intelligent and Cognitive Automation"></span><input type="radio" id="wpforms-7646-field_21_5" class="wpforms-screen-reader-element" name="wpforms[fields][21]" value="Intelligent and Cognitive Automation" tabindex="-1" required ><span class="wpforms-image-choices-label">Intelligent and Cognitive Automation</span></label></li></ul></div><div id="wpforms-7646-field_23-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="23"><div class="wpforms-clear wpforms-pagebreak-left"><button class="wpforms-page-button wpforms-page-next" data-action="next" data-page="1" data-formid="7646">Next</button></div></div></div><div class="wpforms-page wpforms-page-2 last " style="display:none;"><div id="wpforms-7646-field_25-container" class="wpforms-field wpforms-field-html form-popup-header-wrapper" data-field-id="25"><div id="wpforms-7646-field_25"><div class="form-popup-header"> <h2>How can we get in Touch</h2> <p>Fill the form and we will revert back to you soon.<p> </div></div></div><div id="wpforms-7646-field_20-container" class="wpforms-field wpforms-field-name col-12 col-sm-12 col-md-12 form-group" data-field-id="20"><label class="wpforms-field-label" for="wpforms-7646-field_20">Name <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-7646-field_20" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][20]" placeholder="Name" required></div><div id="wpforms-7646-field_2-container" class="wpforms-field wpforms-field-email col-12 col-sm-12 col-md-12 form-group" data-field-id="2"><label class="wpforms-field-label" for="wpforms-7646-field_2">Email <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-7646-field_2" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][2]" placeholder="Email" required></div><div id="wpforms-7646-field_3-container" class="wpforms-field wpforms-field-text col-12 col-sm-12 col-md-12 form-group" data-field-id="3"><label class="wpforms-field-label" for="wpforms-7646-field_3">Organization <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-7646-field_3" class="wpforms-field-large wpforms-field-required" name="wpforms[fields][3]" placeholder="Organization" required></div><div id="wpforms-7646-field_11-container" class="wpforms-field wpforms-field-pagebreak" data-field-id="11"><div class="wpforms-clear wpforms-pagebreak-left"></div></div></div></div><div class="wpforms-field wpforms-field-hp"><label for="wpforms-7646-field-hp" class="wpforms-field-label">Phone</label><input type="text" name="wpforms[hp]" id="wpforms-7646-field-hp" class="wpforms-field-medium"></div><input type="hidden" name="wpforms[recaptcha]" value=""><div class="wpforms-submit-container" style="display:none;"><input type="hidden" name="wpforms[id]" value="7646"><input type="hidden" name="wpforms[author]" value="2"><input type="hidden" name="wpforms[post_id]" value="209"><button type="submit" name="wpforms[submit]" class="wpforms-submit om-trigger-conversion mon-btn" id="wpforms-submit-7646" value="wpforms-submit" aria-live="assertive" data-alt-text="Submitting..." data-submit-text="Submit">Submit</button></div></form></div> <!-- .wpforms-container -->