.elementor-1708 .elementor-element.elementor-element-3b40dbd1{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-1708 .elementor-element.elementor-element-71af28c3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0%;--padding-bottom:0%;--padding-left:10%;--padding-right:10%;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1708 .elementor-element.elementor-element-69efcd08 > .elementor-widget-container{padding:0% 10% 0% 0%;}.elementor-1708 .elementor-element.elementor-element-69efcd08{text-align:left;}.elementor-1708 .elementor-element.elementor-element-69efcd08 .elementor-heading-title{font-family:"Amsterdam Static", Sans-serif;font-size:46px;font-weight:400;line-height:100px;color:var( --e-global-color-775eaeb );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1708 .elementor-element.elementor-element-14445867{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:left;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;font-style:normal;text-transform:none;text-decoration:none;line-height:1.5em;letter-spacing:0px;word-spacing:0em;color:var( --e-global-color-775eaeb );}.elementor-1708 .elementor-element.elementor-element-1d7203ab{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1708 .elementor-element.elementor-element-1046363e{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:100px 100px;--row-gap:100px;--column-gap:100px;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:10%;--padding-left:0%;--padding-right:3%;}.elementor-1708 .elementor-element.elementor-element-71f77954{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1708 .elementor-element.elementor-element-7ef1c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-1708 .elementor-element.elementor-element-52635d8b > .elementor-widget-container{padding:20px 0px 0px 0px;}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(15px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(15px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(15px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-15px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-15px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-icon i{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-icon svg{fill:var( --e-global-color-accent );transition:fill 0.3s;}.elementor-1708 .elementor-element.elementor-element-52635d8b{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-item > .elementor-icon-list-text, .elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:300;font-style:normal;text-transform:none;text-decoration:none;line-height:1.5em;letter-spacing:0px;word-spacing:0em;}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-text{color:var( --e-global-color-775eaeb );transition:color 0.3s;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1708 .elementor-element.elementor-element-3b40dbd1{--gap:80px 80px;--row-gap:80px;--column-gap:80px;--flex-wrap:wrap;--margin-top:5%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-1708 .elementor-element.elementor-element-71af28c3{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:35%;}.elementor-1708 .elementor-element.elementor-element-69efcd08 > .elementor-widget-container{padding:0% 0% 0% 0%;}.elementor-1708 .elementor-element.elementor-element-14445867{--container-widget-width:257px;--container-widget-flex-grow:0;width:var( --container-widget-width, 257px );max-width:257px;font-size:14px;}.elementor-1708 .elementor-element.elementor-element-1046363e{--gap:50px 50px;--row-gap:50px;--column-gap:50px;--margin-top:15%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:30%;--padding-left:0%;--padding-right:5%;}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-item > .elementor-icon-list-text, .elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-item > a{font-size:14px;}}@media(max-width:767px){.elementor-1708 .elementor-element.elementor-element-3b40dbd1{--gap:30px 30px;--row-gap:30px;--column-gap:30px;}.elementor-1708 .elementor-element.elementor-element-71af28c3{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1708 .elementor-element.elementor-element-69efcd08{text-align:center;}.elementor-1708 .elementor-element.elementor-element-14445867{--container-widget-width:998px;--container-widget-flex-grow:0;width:var( --container-widget-width, 998px );max-width:998px;text-align:center;}.elementor-1708 .elementor-element.elementor-element-1046363e{--gap:30px 30px;--row-gap:30px;--column-gap:30px;--margin-top:25%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}.elementor-1708 .elementor-element.elementor-element-7ef1c{--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-1708 .elementor-element.elementor-element-7ef1c.e-con{--order:-99999 /* order start hack */;}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-8px/2);}.elementor-1708 .elementor-element.elementor-element-52635d8b .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-8px/2);}}@media(min-width:768px){.elementor-1708 .elementor-element.elementor-element-71af28c3{--width:53%;}.elementor-1708 .elementor-element.elementor-element-1d7203ab{--width:50%;}.elementor-1708 .elementor-element.elementor-element-71f77954{--width:50%;}.elementor-1708 .elementor-element.elementor-element-7ef1c{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-1708 .elementor-element.elementor-element-71af28c3{--width:100%;}.elementor-1708 .elementor-element.elementor-element-1d7203ab{--width:100%;}.elementor-1708 .elementor-element.elementor-element-71f77954{--width:60%;}.elementor-1708 .elementor-element.elementor-element-7ef1c{--width:50%;}}/* Start custom CSS for shortcode, class: .elementor-element-64c3765 */FORM 1 - Design

<div class="form-row">
    <div class="form-half">
        <label for="user-fullname">Name</label>
        [text* user-fullname id:user-fullname placeholder "Name"]
    </div>
    <div class="form-half">
        <label for="user-company">Company</label>
        [text user-company id:user-company placeholder "Company"]
    </div>
</div>

<div class="form-row">
    <div class="form-half">
        <label for="user-phone">Phone</label>
        [tel user-phone id:user-phone placeholder "Phone"]
    </div>
    <div class="form-half">
        <label for="user-email">Email</label>
        [email* user-email id:user-email placeholder "Email"]
    </div>
</div>

<div class="form-row">
    <label for="user-subject">Subject</label>
    [text user-subject id:user-subject placeholder "Subject"]
</div>

<div class="form-row">
    <label for="user-message">Message</label>
    [textarea user-message id:user-message placeholder "Message"]
</div>

<div class="form-row">
    [submit "Send Message"]
</div>


CSS Code - Form 1 & Form 2

<style>
/* General Form Styling */
.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

/* Form Row Styling */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px; /* Add spacing between rows */
}

/* Half-Width Fields */
.form-half {
    width: 48%;
    margin-right: 2% !important; /* Space between two fields in the same row */
}

.form-half:last-child {
    margin-right: 0;
}

/* Labels Styling */
.wpcf7-form label {
    display: block;
    margin-bottom: 8px; /* Space below the label */
    padding-top: 10px; /* Add padding above labels */
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

/* Input and Textarea Fields */
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="submit"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #d9d9d9;
    border-radius: 25px;
    background-color: #9E6A8E; /* Light blue background */
    font-size: 16px;
    color: #333;
}

/* Text Area Reduced Rows */
textarea {
    height: 120px; /* Adjust height for less rows */
    resize: none; /* Disable resize */
}

/* Placeholder Text */
textarea::placeholder,
input::placeholder {
    color: #bbb; /* Minimal and soft color for placeholders */
    font-size: 14px;
}

/* Submit Button */
input[type="submit"] {
    background-color: #9E6A8E;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    margin-top: 30px; /* Add spacing above the button */
    padding: 12px 20px; /* Adjust button padding */
}

input[type="submit"]:hover {
    background-color: #9E6A8E;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .form-half {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px; /* Add spacing for stacked fields */
    }
}
</style>


Form 1 Message Body :

You have received a new message from the contact form on your website.

Name: [user-fullname]
Company: [user-company]
Phone: [user-phone]
Email: [user-email]

Subject: [user-subject]

Message:
[user-message]

---
This email was sent from your website's contact form.




Form 2 - Design

<style>
/* General Form Styling */
.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

/* Form Row Styling */
.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px; /* Add spacing between rows */
}

/* Half-Width Fields */
.form-half {
    width: 48%; /* Fields take 48% of the width */
    margin-right: 2% !important; /* Space between two fields in the same row */
}

.form-half:last-child {
    margin-right: 0;
}

/* Labels Styling */
.wpcf7-form label {
    display: block;
    margin-bottom: 8px; /* Space below the label */
    padding-top: 10px; /* Padding above labels */
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

/* Input, Textarea, Select, and Button Fields */
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="submit"],
select,
input[type="radio"],
input[type="checkbox"],
input[type="file"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #d9d9d9;
    border-radius: 25px;
    background-color: #ffffff; /* white */
    font-size: 16px;
    color: #333;
}

/* New Fields with Extra Padding for Attractive Look */
.form-row select,
.form-row input[type="radio"],
.form-row input[type="checkbox"],
.form-row input[type="file"] {
    padding: 15px 20px; /* Add extra padding for new fields */
    background-color: #e6f3ff; /* Light blue background for these fields */
    border-radius: 30px; /* Slightly rounder corners */
}

/* Checkbox Styling */
input[type="checkbox"] {
    width: auto;
    margin-right: 10px; /* Spacing between checkboxes */
}

input[type="checkbox"]:not(:first-child) {
    margin-top: 10px; /* Space between multiple checkboxes */
}

/* File Upload Styling */
input[type="file"] {
    padding: 15px 20px; /* Extra padding for file upload field */
    background-color: #ffffff; /* White background for file upload */
    border: 1px solid #d9d9d9;
    border-radius: 25px;
    color: #333;
    cursor: pointer;
}

/* Text Area Reduced Rows */
textarea {
    height: 120px; /* Adjust height for fewer rows */
    resize: none; /* Disable resize */
}

/* Placeholder Text */
textarea::placeholder,
input::placeholder {
    color: #bbb; /* Minimal and soft color for placeholders */
    font-size: 14px;
}

/* Submit Button */
input[type="submit"] {
    background-color: #9E6A8E;
    color: #fffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    margin-top: 30px; /* Add spacing above the button */
    padding: 12px 20px; /* Adjust button padding */
}

input[type="submit"]:hover {
    background-color: #9E6A8E;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .form-half {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px; /* Add spacing for stacked fields */
    }
}
</style>

<div class="form-row">
    <div class="form-half">
        <label for="user-fullname">Name</label>
        [text* user-fullname id:user-fullname placeholder "Name"]
    </div>
    <div class="form-half">
        <label for="user-company">Company</label>
        [text user-company id:user-company placeholder "Company"]
    </div>
</div>

<div class="form-row">
    <div class="form-half">
        <label for="user-phone">Phone</label>
        [tel user-phone id:user-phone placeholder "Phone"]
    </div>
    <div class="form-half">
        <label for="user-email">Email</label>
        [email* user-email id:user-email placeholder "Email"]
    </div>
</div>

<div class="form-row">
    <label for="user-subject">Subject</label>
    [text user-subject id:user-subject placeholder "Subject"]
</div>

<div class="form-row">
    <label for="user-message">Message</label>
    [textarea user-message id:user-message placeholder "Message"]
</div>

<!-- New Fields (100% Width) -->

<div class="form-row">
    <label for="user-dropdown">Select Your Preferred Service</label>
    [select user-dropdown id:user-dropdown "Web Design" "SEO Services" "Digital Marketing" "Content Writing"]
</div>

<div class="form-row">
    <label for="user-radio">How Did You Hear About Us?</label>
    [radio user-radio id:user-radio "Google" "Social Media" "Referral" "Other"]
</div>

<div class="form-row">
    <label for="user-checkbox">Select Services You Are Interested In</label>
    [checkbox user-checkbox id:user-checkbox use_label_element "Website Development" "SEO Optimization" "PPC Management" "Content Creation"]
</div>

<div class="form-row">
    <label for="user-file">Upload Your Project Files</label>
    [file user-file id:user-file]
</div>

<div class="form-row">
    [submit "Send Message"]
</div>

Form 2 Message Body :


You have received a new message from the contact form on your website.

Name: [user-fullname]  
Company: [user-company]  
Phone: [user-phone]  
Email: [user-email]  

Subject: [user-subject]  

Message:  
[user-message]  
 
Select Your Preferred Service: [user-dropdown]  

How Did You Hear About Us?: [user-radio]  

Services You Are Interested In:  
[user-checkbox]  

Uploaded Files: [user-file]  

---

This email was sent from your website's contact form./* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Amsterdam Static';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://bkreationsart.com/wp-content/uploads/2025/11/amsterdam-two-ttf.ttf') format('truetype');
}
/* End Custom Fonts CSS */