Hello there,
I have installed the pre-build website – Dental Studio Pro. And I am missing the look of contact form from your Dental Studio Pro website.
Could you be so kind and could you provide me with the code for contact form 7 plugin and CSS used through extra class to make it look same as in your prebuild example? Thank you in advance!
I am adding screen here:
My installed prebuild CF on Dental Studio PRO
Your Original look of CF in Dental Studio Pro
Link to my website is: https://dentalnipraxe.cz/kontakt/
Hello,
To set the contact form please check this article -> https://forum.tagdiv.com/add-contact-form/ for this demo is using Contact form 7.
Also, you need to create the form as you want ->
This is the custom Code
.td-dentist-contact-form input[type=submit] {
font-family: 'Work Sans', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
background-color: #1db4c1;
}
.td-dentist-contact-form input[type=submit]:hover {
background-color: #444;
}
Thank you!
Hello Anamaria,
thank you for the CCS, but it was much more lines I had to put there to achieve same look as you have on your “Demo Website” for Dental Studio Pro.
But in case of any other guys, who would like to achieve the same look with Contact Form 7, here it is:
.td-dentist-contact-form input[type=text],
input[type=url],
input[type=tel],
input[type=email] {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
border-bottom-color: #1db4c1 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
border: none!important;
border-bottom-width: 1px!important;
border-bottom-style: solid!important;
border-bottom-color: #1db4c1!important;
border-radius: 0!important;
color: #444!important;
font-size: 14px!important;
height: 36px!important;
border-color: #eef0f3;
border-width: 0 0 1px 0;
border-radius: 0;
color: #243442;
font-size: 15px;
font-weight: 500;
}
.td-dentist-contact-form textarea {
background-color: #fff;
box-sizing: border-box;
border-radius: 2px;
color: #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
display: block;
float: none;
font-size: 16px;
border: 1px solid #ccc;
padding: 6px 10px;
height: 38px;
width: 100%;
line-height: 1.3;
border-bottom-color: #1db4c1 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
border: none!important;
border-bottom-width: 1px!important;
border-bottom-style: solid!important;
border-bottom-color: #1db4c1!important;
border-radius: 0!important;
color: #444!important;
font-size: 14px!important;
height: 36px!important;
border-color: #eef0f3;
border-width: 0 0 1px 0;
border-radius: 0;
color: #243442;
font-size: 15px;
font-weight: 500;
height: 120px!important;
min-height: 120px!important;
}
input[type=text]:active,
input[type=url]:active,
input[type=tel]:active,
input[type=email]:active,
input[type=text]:focus,
input[type=url]:focus,
input[type=tel]:focus,
input[type=email]:focus {
border-color: #1db4c1 !important;
}
Feel Free to “clean it” as I am not a coder and I just try to somehow overtake it from your demo website of Dental Studio Pro.
