Hi,
how can i build a contact form like “coaching pro” with 2 areas left and right and dropdown-field?
https://demo.tagdiv.com/newspaper_coaching_pro/contact/
Hello,
You need to use a custom code css https://www.anantvijaysoni.in/creating-a-2-column-responsive-form-with-contact-form-7-wordpress-plugin/
This is the code used for the form
.td-coaching-form { -> https://i.imgur.com/tpjPHkz.png -> https://i.imgur.com/3DjdnNm.png
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
margin-left: -30px;
margin-right: -30px;
}
.td-coaching-form-left,
.td-coaching-form-right {
width: 50%;
padding: 0 30px;
}
@media (min-width: 768px) and (max-width: 1018px) {
.td-coaching-form-left,
.td-coaching-form-right {
padding: 0 15px;
}
.td-coaching-form {
margin-left: -15px;
margin-right: -15px;
}
.td-request-form textarea {
height: 168px !important;
min-height: 168px !important;
}
}
@media (max-width: 767px) {
.td-coaching-form {
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.td-coaching-form-left,
.td-coaching-form-right {
width: 100%;
padding: 0 10px;
}
.td-coaching-form {
margin-left: 0px;
margin-right: 0px;
}
}
.td-request-form select {
font-size: 16px;
font-weight: 500;
margin-top: 12px;
padding: 13px 15px 12px;
width: 100%;
border: 3px solid var(--custom-accent-3);
}
.td-request-form textarea {
font-size: 16px;
font-weight: 500;
margin-top: 12px;
height: 176px;
min-height: 176px;
padding: 13px 15px;
border: 3px solid var(--custom-accent-3);
}
.td-request-form input[type=text],
.td-request-form input[type=url],
.td-request-form input[type=tel],
.td-request-form input[type=email] {
margin-top: 12px;
font-size: 16px;
font-weight: 500;
height: 54px;
padding: 0 15px;
border: 3px solid var(--custom-accent-3);
}
.td-request-form span.your-consent {
display: block;
text-align: center;
font-size: 14px;
}
.td-request-form span input[type=checkbox] {
margin-right: 10px;
}
.td-request-form input[type=submit] {
margin-left: auto;
margin-right: auto;
display: block;
background-color: var(--custom-accent-2);
color: #fff;
transition: all 0.3s ease;
padding: 18px 36px;
font-size: 14px;
border: 3px solid var(--custom-accent-3);
border-radius: 50px;
font-family: "Red Hat Display", "Open Sans", sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.td-request-form input[type=submit]:hover,
.td-request-form input[type=submit]:focus,
.td-request-form input[type=submit]:active {
background-color: var(--custom-accent-1);
}
Thank you!
Hi Anamaria,
Great, Thanks. For Beginners, where does the code have to be placed?
Hello,
You can use the Raw HTML element from Composer, and add the code there.
Thank you!
I tried importing the contact form https://demo.tagdiv.com/newspaper_momentum_pro/contact/. Can you please send me the contact form 7 code snippet?
<div id="td-request-form" class="td-request-form">
<div class="form-row">
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
</div>
<div class="form-row">
<div class="column-half">Email [email* your-email]</div>
<div class="column-half">Phone [text* your-phone]</div>
</div>
<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>
<div class="form-row">
<div class="column-full">Your message [textarea your-message]</div>
</div>
<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>
</div>
Seems, I’m missing proper class.
Hi,
You need only to change the shortcode, and the style will be applied.
Thank you!
Hi Anamaria,
It’s been a while, but despite all my attempts I can’t get the form to display with the corresponding selection field. My font would be JOST, by the way.
I would need the following German items in the selection menu.
– Allgemein
– Lob und Kritik
– Korrekturwunsch
– Löschung
Could you help me further with this? For you, with login details it would probably take 5 minutes, for me it would take countless hours in which I couldn’t get any further.
Much Love!
Thomas
Hello,
Did you have made the form with those fields? Yes, I can take a look, so please get in touch with us via email at contact@tagdiv.com and provide the wp-admin access, the form you want to use, and the page where the form is.
Thank you!
