Learn how to create a stunning CSS3 custom contact form in this comprehensive tutorial! This video covers everything you need to know, including adding text fields, dropdowns, checkboxes, radio buttons, file uploads, text areas, and agreement checkboxes. We also incorporate modern CSS techniques to enhance the appearance of checkboxes and radio buttons, making them more interactive and visually appealing.
By the end of this tutorial, you'll have a beautifully designed contact form that stands out on any website. Whether you're a beginner or looking to refine your web design skills, this guide has got you covered.
What you'll learn:
-Adding and styling text inputs, dropdowns, checkboxes, radio buttons, and file uploads
-Using CSS3 to enhance the form's design
-Implementing interactive elements with modern CSS
-Creating a responsive and user-friendly contact form
Necessary Codes
HTML
<div class="contact-form-container" > <!-- FORM CONTAINER -->
<label class="main-label" >CSS3 Custom Form </label>
<div class="name">
<label for="first-name"> First Name </label>
[text first-name id:cu-frist-name class:cu-first-name]
<label for="last-name"> Last Name </label>
[text first-name id:cu-last-name class:cu-last-name]
</div> <!-- END OF NAME CONTAINER -->
<label for="cu-email-two"> Email </label>
[email* your-email id:cu-email class:cu-email ]
<label for="phone"> Phone </label>
[phonetext* phone id:cu-phone class:cu-phone numberonly]
<label for="fav-browser" > Favourite Browser? </label>
[select* fav-browser id:cu-fav-browser class:cu-fav-browser "Google Chrome" "Mozilla Firefox" "Safari" "Microsoft Edge"]
<label for="gender"> Gender </label>
[radio radio-gender id:cu-gender class:cu-gender use_label_element default:1 "Male" "Female"]
<label for="fav-js"> Favourite JS Framework </label>
[radio fav-js id:cu-js-framework class:cu-js-framework use_label_element default:1 "React" "Vue" "Angular"]
<label for="fav-css"> Favourite CSS Framework </label>
[radio fav-css id:cu-css-framework class:cu-css-framework use_label_element default:1 "Bootstrap" "Foundation" "Material Design"]
<label for="frequent-apps"> Which apps do you use frequently? </label>
[checkbox frequent-apps id:cu-frequent-apps class:cu-frequent-apps use_label_element "Whatsapp" "Instagram" "Snapchat" "Tiktok"]
<label for="sports"> Sports? </label>
[checkbox sports id:cu-sports class:cu-sports use_label_element "Football" "Cricket" "Golf" "Swimming" ]
[checkbox slider id:cu-slider class:cu-slider use_label_element "status"]
[submit id:submit class:cu-submit "submit"]
</div> <!-- END OF FORM CONTAINER -->
CSS
:root {
--cf7-background: #ebf8ff;
--cf7-primary-color: #3abcff;
--cf7-secondary-color: #ebf8ff;
--cf7-text-color: #333;
--cf7-white-color: #fff;
--cf7-border-secondary: #a6a6a6;
--cf7-submit-hover: #007aba;
}
body {
color: #333;
background: var(--cf7-background)!important;
font: 600 16px/1.6 "Roboto", sans-serif;
}
/* label styles */
.wpcf7-form label {
line-height: 1.5;
color: var(--cf7-primary-color);
font-size: 16px;
font-family: "Roboto", sans-serif;
font-weight: 600;
margin-bottom: 2px !important;
display: inline-block;
}
/* HEADER TEXT STYLE */
.wpcf7-form .main-label {
display: block;
height: 50px;
color: var(--cf7-text-color);
font-size: 30px !important;
font-weight: 400 !important;
}
/* FORM CUSTOMIZATION */
/* FORM CONTAINER FIX FOR THEMES 2021,22,23 AND 24 */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) {
max-width: none !important;
}
.entry-content {
font-family: "Roboto", sans-serif;
}
.wpcf7-form p {
margin: initial;
}
.wpcf7-form {
width: 100%;
display: flex !important;
flex-direction: column;
align-items: center !important;
}
.contact-form-container {
font-size: 16px;
background-color: var(--cf7-white-color);
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
width: 60%;
padding: 50px;
}
/* INPUT CUSTOMIZATION */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
border: none !important;
border-radius: 0;
outline: none;
border-bottom: 1px solid var(--cf7-border-secondary) !important;
width: 100%;
font: 16px/1.6 "Roboto", sans-serif;
transition: border 0.3s linear;
padding: 0;
}
/* FOCUS STATE OF TEXT AND EMAIL */
.wpcf7-form p:has(label[for="first-name"]),
.wpcf7-form p:has(label[for="last-name"]),
.wpcf7-form p:has(label[for="cu-email-two"]),
.wpcf7-form p:has(label[for="phone"]){
display: block;
margin: 8px 0;;
padding: 0;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form
input[type="email"]:focus {
outline: none !important;
border-bottom: 1px solid var(--cf7-primary-color) !important;
box-shadow: none !important;
}
/* ALIGN FIRST NAME AND LAST NAME ON THE SAME LINE */
.wpcf7-form .name {
display: flex;
column-gap: 5%;
}
/* -- INPUT LABEL ICONS -- */
/*LABEL CUSTOMIZATION */
.wpcf7-form label[for="first-name"],
.wpcf7-form label[for="last-name"],
.wpcf7-form label[for="cu-email-two"],
.wpcf7-form label[for="phone"] {
font-size: 16px !important;
position: relative !important;
font-weight: 600 !important;
padding-left: 20px;
margin-bottom: -10px;
margin-top: 20px;
line-height: 0.9;
}
.wpcf7-form label[for="fav-browser"],
.wpcf7-form label[for="gender"] ,
.wpcf7-form label[for="fav-css"],
label[for="fav-js"],
.wpcf7-form label[for="frequent-apps"],
.wpcf7-form label[for="sports"]{
display: block !important;
margin-bottom: -22px !important;
margin-top: 25px;
font-weight: 600 !important;
}
.wpcf7-form label[for="fav-css"] {
display: block;
padding-bottom: 8px !important;
}
/* NAME ICONS */
.wpcf7-form label[for="first-name"]:before,
.wpcf7-form label[for="last-name"]:before {
content: '\f007';
}
/* EMAIL ICON */
label[for="cu-email-two"]:before {
content: '\f0e0';
}
/* PHONE ICON */
label[for="phone"]:before {
content: '\f095';
transform: rotate(90deg);
}
/* ALL ICONS STYLE */
.wpcf7-form label[for="first-name"]:before,
.wpcf7-form label[for="last-name"]:before,
.wpcf7-form label[for="cu-email-two"]:before,
.wpcf7-form label[for="phone"]:before {
font-family: "Font Awesome 5 Free";
position: absolute;
font-size: 13px;
top: 0;
left: 0;
transform: translate
transition: all 0.2s linear;
line-height: 1;
}
label[for="cu-email-two"]:before {
margin-top: 1px !important;
}
/* SUBMIT BUTTON CUSTOMIZATION */
.wpcf7-submit {
width: 100% !important;
height: 50px;
outline: none !important;
border: initial !important;
background-color:var(--cf7-primary-color) !important;
border-radius: 25px !important;
color: var(--cf7-white-color) !important;
cursor: pointer;
text-transform: uppercase;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 2px;
margin: 0 auto !important;
transition: background 0.3s linear;
}
/* SUBMIT BUTTON HOVER */
.wpcf7-form input[type="submit"]:hover {
background: var(--cf7-submit-hover) !important;
}
/* FAV BROWSER CUSTOMIZATION */
.wpcf7-form-control-wrap:has(.cu-fav-browser) select {
font: 16px/1.6 "Roboto", sans-serif;
background: var(--cf7-secondary-color);
color: #333;
border: 1px solid var(--cf7-primary-color);
box-shadow: none;
height: 100%;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
}
.wpcf7-form-control-wrap:has(.cu-fav-browser) {
height: 45px !important;
position: relative;
display: flex;
}
.cu-fav-browser {
width: 100% !important;
padding: 0 15px;
}
.cu-fav-browser option {
background: var(--cf7-secondary-color);
}
.wpcf7-form-control-wrap:has(.cu-fav-browser)::before,
.wpcf7-form-control-wrap:has(.cu-fav-browser)::after {
content: '';
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
pointer-events: none;
}
.wpcf7-form-control-wrap:has(.cu-fav-browser)::before {
width: 30px;
background: var( --cf7-primary-color);
}
.wpcf7-form-control-wrap:has(.cu-fav-browser)::after {
width: 0;
height: 0;
right: 10px;
margin: auto;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: var(--cf7-white-color) transparent transparent transparent;
}
/* FOCUS STATE */
.wpcf7-form-control-wrap:has(.cu-fav-browser) select:focus {
outline: none !important;
border: 1px solid var(--cf7-primary-color);
}
/* REMOVE ORIGINAL INPUTS FOR SELECT, RADIO AND CHECKBOX */
.cu-gender input[type="radio"],
.cu-js-framework input[type="radio"],
.cu-css-framework input[type="radio"],
.cu-frequent-apps input[type="checkbox"],
.cu-sports input[type="checkbox"],
.cu-slider input[type="checkbox"] {
position: absolute;
left: -9999px;
}
/* INPUT LABEL CUSTOMIZATION AND FACILITATING CUSTOM INPUTS */
.cu-gender input[type="radio"]+.wpcf7-list-item-label,
.cu-js-framework input[type="radio"]+.wpcf7-list-item-label,
.cu-frequent-apps input[type="checkbox"]+.wpcf7-list-item-label,
.cu-sports input[type="checkbox"]+.wpcf7-list-item-label,
.cu-slider
input[type="checkbox"] + .wpcf7-list-item-label {
position: relative; /* LET'S US USE ABSOLUTE POSITIONING */
cursor: pointer;
color: var(--cf7-text-color);
font-size: 16px !important;
font-weight: 400 !important;
padding-left: 20px !important;
margin-right: 20px !important;
}
/* REMOVE MARGINS FOR THEME COMPATIBILITY */
.cu-gender .wpcf7-list-item,
.cu-css-framework .wpcf7-list-item,
.cu-frequent-apps .wpcf7-list-item,
.cu-sports .wpcf7-list-item,
.cu-slider .wpcf7-list-item {
margin: 0 !important;
padding: 0 !important;
}
/*GENDER CUSTOMIZATION*/
.cu-gender input[type="radio"]+.wpcf7-list-item-label {
padding-left: 25px !important;
}
.cu-gender input[type="radio"]+.wpcf7-list-item-label::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
padding: 8px;
border: 1px solid var(--cf7-border-secondary);
border-radius: 100%;
}
/* CUSTOM RADIO BLUE BACKGROUND */
.cu-gender input[type="radio"]+.wpcf7-list-item-label::after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 10px;
height: 10px;
opacity: 0;
background: var(--cf7-primary-color);
border-radius: 100%;
transition: all 0.2s linear;
}
/* CHECKED STATE */
.cu-gender input[type="radio"]:checked+.wpcf7-list-item-label:after {
opacity: 1;
}
/* JS FRAMEWORK CUSTOMIZATION */
.cu-js-framework input[type="radio"]+.wpcf7-list-item-label {
background: var(--cf7-secondary-color);
border: 1px solid var(--cf7-primary-color);
padding: 15px 20px;
display: inline-block;
cursor: pointer;
color: var(--cf7-text-color);
transition: all 0.3s linear;
}
/* CHECKED STATE */
.cu-js-framework input[type="radio"]:checked+.wpcf7-list-item-label {
background: var(--cf7-primary-color);
color: var(--cf7-white-color) !important;
}
/* REMOVING UNNECESSARY MARGINS */
.cu-js-framework .wpcf7-list-item {
margin-left: 0 !important;
margin-right: -15px !important;
}
/* FAV CSS CUSTOMIZATION*/
.cu-css-framework {
line-height: 1.5;
display: inline;
border: 1px solid var(--cf7-primary-color);
background: var(--cf7-secondary-color);
padding: 25px 6px !important;
}
.cu-css-framework input[type="radio"]+.wpcf7-list-item-label {
display: block;
color: var(--cf7-text-color);
font-size: 16px;
font-weight: 400;
cursor: pointer;
transition: all 0.3s linear;
padding: 14px 12px;
margin: 0 2px;
}
.cu-css-framework input[type="radio"]:checked+.wpcf7-list-item-label {
color: var(--cf7-white-color);
background: var(--cf7-primary-color);
}
/* FREQUENT APPS CUSTOMIZATION */
.cu-frequent-apps input[type="checkbox"]+.wpcf7-list-item-label {
position: relative;
padding-left: 25px !important;
}
.cu-frequent-apps input[type="checkbox"]+.wpcf7-list-item-label:before {
content: '';
position: absolute;
left: 0;
top: 0;
padding: 8px;
border: 1px solid var(--cf7-border-secondary);
border-radius: 3px;
background: var(--cf7-white-color);
}
.cu-frequent-apps input[type="checkbox"]+.wpcf7-list-item-label:after {
content: "\f00c";
font-family: "Font Awesome 5 free";
font-weight: 900;
position: absolute;;
top: 9px;
left: 2px;
font-size: 14px !important;
line-height: 1px !important;
color: #3abcff;
opacity: 0;
transform: scale(0);
transition: all 0.2s linear;
}
/* CHECKED STATE */
.cu-frequent-apps input[type="checkbox"]:checked+.wpcf7-list-item-label:after {
opacity: 1;
transform: scale(1);
}
/* SPORTS CUSTOMIZATION */
.cu-sports .wpcf7-list-item label {
display: inline-block !important;
}
.cu-sports input[type="checkbox"]+.wpcf7-list-item-label {
background: #ebf8ff;
border: 1px solid #3abcff;
color: #333;
font-weight: 400;
margin-right: 5px !important;
padding: 14px 20px;
display: inline-block;
cursor: pointer;
transition: all 0.3s linear;
margin-bottom: 15px !important;
}
/* CHECKED STATE */
.cu-sports input[type="checkbox"]:checked+.wpcf7-list-item-label {
color: #fff;
background: #3abcff;
}
/* SLIDER CUSTOMIZATION */
/* SLIDER LABEL CUSTOMIZATION */
.cu-slider input[type="checkbox"] + .wpcf7-list-item-label {
font: 16px/1.6 "Roboto", sans-serif !important;
display: flex;
color: #000d !important;
position: relative;
cursor: pointer;
font-size: 16px;
margin-bottom: 15px;
padding-left: 55px !important;
}
p:has(.cu-slider) {
display: inline-block;
}
.cu-slider input[type="checkbox"] + .wpcf7-list-item-label:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 45px;
height: 25px;
background: #cccccc;
border-radius: 35px;
border: 2px solid #cccccc;
border: none;
}
.cu-slider input[type="checkbox"] + .wpcf7-list-item-label:after {
position: absolute;
content: "";
top: 3.01px;
left: 4px !important;
width: 18px;
height: 18px;
background-color: #fff;
border-radius: 50%;
transition: all 0.35s linear;
}
.cu-slider input[type="checkbox"]:checked + .wpcf7-list-item-label:after {
left: 23.4px !important;
}
.cu-slider input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
background: #3abcff;
}
.cu-slider .wpcf7-list-item label {
margin: 15px 0 !important;
}
/* MEDIA QUERIES */
@media (max-width: 840px) {
.contact-form-container {
width: 90% !important
}
}
@media only screen and (max-width: 650px) {
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
font-size: 14px;
}
.wpcf7-form input[type="submit"] {
font-size: 14px;
height: 45px;
}
.contact-form-container {
width: 100%;
padding: 30px;
}
}
@media (max-width: 540px) {
.contact-form-container {
padding: 50px 10px;
width: 100%;
}
.wpcf7-form .name {
flex-direction: column;
column-gap: 0;
}
.cu-css-framework input[type="radio"]+.wpcf7-list-item-label {
padding: 12px 8px;
}
}
@media (max-width: 490px) {
.cu-js-framework .wpcf7-list-item {
margin: 5px;
}
.cu-css-framework .wpcf7-list-item ,
.cu-css-framework .wpcf7-list-item label {
width: 100% !important;
}
.cu-css-framework {
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
width: 100%;
justify-content: center;
align-items: stretch !important;
font-size: 16px;
/* padding: px 8px 5px 8px; */
padding: 6px !important;
}
.cu-css-framework .wpcf7-list-item-label {
padding: 20px 40px !important;
}
.cu-css-framework .wpcf7-list-item {
padding: 5px 0px !important;
text-align: center;
}
.cu-css-framework input[type="radio"]:checked+.wpcf7-list-item-label {
padding: 20px 60px;
}
}
@media (max-width: 360px) {
.cu-css-framework input[type="radio"]:checked+.wpcf7-list-item-label {
padding: 20px 40px;
}
.main-label {
margin-bottom: 20px;
}
}
Post a Comment