<!-- =========================================================
MK FORM SECTION
Fluent Form ID: 3
Logo + Form Design
Divi Code Module
========================================================= -->
<section id="mk-fluent-form-section">
<div class="mk-form-wrapper">
<!-- LOGO -->
<div class="mk-form-logo">
<img
src="YOUR-LOGO-IMAGE-URL-HERE"
alt="MK Logo"
>
</div>
<!-- INTRO -->
<div class="mk-form-intro">
<h2>Let's Connect</h2>
<p>
Fill in the details below and our team will get back to you.
</p>
</div>
<!-- FLUENT FORM -->
<div class="mk-fluent-form">
[fluentform id="3"]
</div>
</div>
</section>
<style>
/* =========================================================
MAIN SECTION
========================================================= */
#mk-fluent-form-section {
--mk-blue: #0c71c3;
--mk-dark: #111111;
--mk-body: #555b63;
--mk-light: #f5f8fc;
--mk-white: #ffffff;
width: 100%;
margin: 0;
padding: 70px 20px;
background:
radial-gradient(
circle at 10% 10%,
rgba(12, 113, 195, 0.08),
transparent 35%
),
radial-gradient(
circle at 90% 90%,
rgba(12, 113, 195, 0.07),
transparent 35%
),
var(--mk-light);
font-family: Inter, Arial, sans-serif;
box-sizing: border-box;
}
/* =========================================================
BOX SIZING
========================================================= */
#mk-fluent-form-section,
#mk-fluent-form-section * {
box-sizing: border-box;
}
/* =========================================================
MAIN FORM WRAPPER
========================================================= */
#mk-fluent-form-section .mk-form-wrapper {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 45px;
background: var(--mk-white);
border-radius: 20px;
border: 1px solid rgba(12, 113, 195, 0.10);
box-shadow:
0 20px 60px rgba(17, 35, 55, 0.08);
position: relative;
}
/* =========================================================
LOGO
========================================================= */
#mk-fluent-form-section .mk-form-logo {
width: 105px;
height: 105px;
margin: 0 auto 22px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 50%;
overflow: hidden;
box-shadow:
0 10px 30px rgba(17, 35, 55, 0.10);
}
/* LOGO IMAGE */
#mk-fluent-form-section .mk-form-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
/* =========================================================
INTRO
========================================================= */
#mk-fluent-form-section .mk-form-intro {
text-align: center;
margin-bottom: 35px;
}
/* HEADING */
#mk-fluent-form-section .mk-form-intro h2 {
margin: 0;
padding: 0;
color: var(--mk-dark);
font-size: 38px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
}
/* BLUE ACCENT */
#mk-fluent-form-section .mk-form-intro h2::after {
content: "";
display: block;
width: 55px;
height: 3px;
margin: 13px auto 0;
background: var(--mk-blue);
border-radius: 10px;
}
/* DESCRIPTION */
#mk-fluent-form-section .mk-form-intro p {
max-width: 600px;
margin: 14px auto 0;
padding: 0;
color: var(--mk-body);
font-size: 15px;
line-height: 1.6;
}
/* =========================================================
FLUENT FORM CONTAINER
========================================================= */
#mk-fluent-form-section .mk-fluent-form {
width: 100%;
}
/* =========================================================
FLUENT FORM - REMOVE UNNECESSARY OUTER EFFECTS
========================================================= */
#mk-fluent-form-section .ff-default {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* =========================================================
LABELS
========================================================= */
#mk-fluent-form-section .ff-el-form-label {
color: var(--mk-dark) !important;
font-size: 14px !important;
font-weight: 600 !important;
margin-bottom: 7px !important;
}
/* REQUIRED STAR */
#mk-fluent-form-section .ff-el-form-label .error {
color: #d63638 !important;
}
/* =========================================================
INPUTS
========================================================= */
#mk-fluent-form-section input[type="text"],
#mk-fluent-form-section input[type="email"],
#mk-fluent-form-section input[type="tel"],
#mk-fluent-form-section input[type="number"],
#mk-fluent-form-section input[type="url"],
#mk-fluent-form-section input[type="date"],
#mk-fluent-form-section select,
#mk-fluent-form-section textarea {
width: 100% !important;
min-height: 50px;
padding: 13px 15px !important;
background: #ffffff !important;
color: #222222 !important;
border: 1px solid #dce2e8 !important;
border-radius: 8px !important;
font-size: 14px !important;
line-height: 1.4;
outline: none;
box-shadow: none !important;
transition:
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
/* TEXTAREA */
#mk-fluent-form-section textarea {
min-height: 120px;
resize: vertical;
}
/* =========================================================
INPUT FOCUS
========================================================= */
#mk-fluent-form-section input:focus,
#mk-fluent-form-section select:focus,
#mk-fluent-form-section textarea:focus {
border-color: var(--mk-blue) !important;
background: #ffffff !important;
box-shadow:
0 0 0 3px rgba(12, 113, 195, 0.10) !important;
}
/* =========================================================
FORM FIELD SPACING
========================================================= */
#mk-fluent-form-section .ff-el-group {
margin-bottom: 20px !important;
}
/* =========================================================
CHECKBOX / RADIO
========================================================= */
#mk-fluent-form-section .ff-el-form-check-label {
color: var(--mk-body) !important;
font-size: 14px !important;
line-height: 1.5;
}
/* =========================================================
SUBMIT BUTTON
========================================================= */
#mk-fluent-form-section button.ff-btn-submit {
width: 100% !important;
min-height: 52px;
padding: 14px 25px !important;
background: var(--mk-blue) !important;
color: #ffffff !important;
border: 0 !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.2;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
/* BUTTON HOVER */
#mk-fluent-form-section button.ff-btn-submit:hover {
background: #095f9f !important;
transform: translateY(-1px);
box-shadow:
0 8px 20px rgba(12, 113, 195, 0.22);
}
/* =========================================================
SUCCESS MESSAGE
========================================================= */
#mk-fluent-form-section .ff-message-success {
margin-top: 20px !important;
padding: 15px 18px !important;
background: #f0faf4 !important;
color: #176b3a !important;
border: 1px solid #c8ead6 !important;
border-radius: 8px !important;
}
/* =========================================================
ERROR MESSAGE
========================================================= */
#mk-fluent-form-section .ff-errors {
color: #d63638 !important;
font-size: 13px !important;
}
/* =========================================================
FIELD ERROR
========================================================= */
#mk-fluent-form-section .ff-el-is-error input,
#mk-fluent-form-section .ff-el-is-error select,
#mk-fluent-form-section .ff-el-is-error textarea {
border-color: #d63638 !important;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 767px) {
#mk-fluent-form-section {
padding: 45px 15px;
}
#mk-fluent-form-section .mk-form-wrapper {
padding: 30px 22px;
border-radius: 15px;
}
#mk-fluent-form-section .mk-form-logo {
width: 85px;
height: 85px;
margin-bottom: 18px;
}
#mk-fluent-form-section .mk-form-intro h2 {
font-size: 29px;
}
#mk-fluent-form-section .mk-form-intro p {
font-size: 14px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
#mk-fluent-form-section {
padding: 30px 10px;
}
#mk-fluent-form-section .mk-form-wrapper {
padding: 25px 16px;
border-radius: 12px;
}
#mk-fluent-form-section .mk-form-logo {
width: 75px;
height: 75px;
}
#mk-fluent-form-section .mk-form-intro h2 {
font-size: 25px;
}
#mk-fluent-form-section .ff-el-form-label {
font-size: 13px !important;
}
#mk-fluent-form-section input[type="text"],
#mk-fluent-form-section input[type="email"],
#mk-fluent-form-section input[type="tel"],
#mk-fluent-form-section input[type="number"],
#mk-fluent-form-section input[type="url"],
#mk-fluent-form-section input[type="date"],
#mk-fluent-form-section select,
#mk-fluent-form-section textarea {
font-size: 14px !important;
}
}
</style>
