סטריפ קונטקט פורם 3 עמודות
<div class="gs-contact-form">
[response]
<div class="form-horizontal">
<div class="col-md-3 col-sm-12 form-col">
[text* your-name class:form-control class:form placeholder "שם"]
</div>
<div class="col-md-3 col-sm-12 form-col">
[tel tel-912 class:form-control class:form placeholder "טלפון"]
</div>
<div class="col-md-3 col-sm-12 form-col">
[email email-263 class:form-control class:form placeholder "אימייל"]
</div>
<div class="col-md-3 col-sm-12 form-col" id="btn">[submit class:btn "שלח"]</div>
</div>
</div>
<style>
.gs-contact-form .col-md-3 {
width: 30%;
padding: 0 0.5%;
margin: 0 auto;
}
.gs-contact-form .col-md-3:last-of-type {
width: 10%;
padding: 0 0.5%;
margin: 0 auto;
}
.gs-contact-form .wpcf7-form-control.wpcf7-submit {
background: #F9A535;
padding: 1px 34px;
border: 1px solid #F9A535;
font-size: 22px;
color: #fff;
margin-top: -1px;
}
.gs-contact-form input, .gs-contact-form input textarea, .gs-contact-form input p {
font-size: 22px;
}
</style>
סטריפ קונטקט פורם 3 עמודות
[response]
<div class="gs-contact-form cf7_custom_style_1">
<div class="form-horizontal">
<div class="col-md-3 form-col vc_col-sm-12 vc_col-lg-3 vc_col-md-3 col-sm-12">
[text* your-name class:form-control class:form placeholder "שם מלא:"]
</div>
<div class="col-md-3 col-sm-12 form-col vc_col-sm-12 vc_col-lg-3 vc_col-md-3 col-sm-12">
[tel* tel-912 class:form-control class:form placeholder "טלפון:"]
</div>
<div class="col-md-3 col-sm-12 form-col vc_col-sm-12 vc_col-lg-3 vc_col-md-3 col-sm-12">
[email email-263 class:form-control class:form placeholder "אימייל:"]
</div>
<div class="col-md-3 col-sm-12 form-col vc_col-sm-12 vc_col-lg-3 vc_col-md-3 col-sm-12">
[text text-884 class:form-control class:form placeholder "הודעה:"]
</div>
<div class="col-md-3 col-sm-12 form-col vc_col-sm-12 vc_col-lg-3 vc_col-md-4 col-sm-12" id="btn">[submit class:btn "שלח"]</div>
</div>
</div>
</div>
<style>
.gs-contact-form .col-md-3 ,.gs-contact-form .vc_col-lg-3,.gs-contact-form .vc_col-md-3{
width: 22.5%;
padding: 0 0.5%;
margin: 0 auto;
float:right;
}
.gs-contact-form .col-md-3:last-of-type, .gs-contact-form .vc_col-lg-3:last-of-type ,.gs-contact-form .vc_col-md-3:last-of-type{
width: 10%;
padding: 0 0.5%;
margin: 1px auto;
float:right;
}
.gs-contact-form .wpcf7-form-control.wpcf7-submit {
background: #F9A535;
padding: 1px 34px;
border: 1px solid #F9A535;
font-size: 22px;
color: #fff;
margin-top: -1px;
}
.gs-contact-form input, .gs-contact-form input textarea, .gs-contact-form input p {
font-size: 22px;
}
@media (max-width: 768px){
.gs-contact-form .col-md-3 ,.gs-contact-form .vc_col-lg-3,.gs-contact-form .vc_col-md-3,.gs-contact-form .vc_col-md-3:last-of-type{
width: 100% !important;
}
}
</style>
עוד גרסה, הכי מעודכן
<div class="row-form">
<h3>ליצירת קשר מלאו את פרטיכם ונציגנו יחזרו אליכם בהקדם.</h3>
<div class="first-row">
[text* your-name placeholder "שם מלא"]
[tel* tel-164 placeholder "טלפון"]
[email your-email placeholder "מייל"]
</div>
<div class="second-row">
[textarea textarea-684 placeholder "הודעה"]
</div>
<div class="third-row">
<span class="wpcf7-form-control-wrap submit">[submit "שלח"]</span>
</div>
</div>
<style>
.row-form h3{
color: #fff;
text-shadow: none;
}
.row-form {
background: #333e47;
padding: 20px;
}
.row-form input, .row-form select, .row-form textarea {
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
text-indent:10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.row-form .first-row .wpcf7-form-control-wrap{
flex-grow: 1;
-webkit-flex-grow: 1;
width: 100px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
.row-form .second-row .wpcf7-form-control-wrap textarea{
height: 60px;
}
@media screen and (min-width:769px){
.row-form .first-row{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-left: -10px;
margin-top: -10px;
}
.row-form .wpcf7-form-control-wrap.submit input {
width: 16%;
padding:12px 0;
}
.row-form .third-row {
text-align: left;
direction: ltr;
}
}
</style>
עבור MC
<div class="row-form">
<div class="first-row">
[text* your-name placeholder "שם מלא"]
[tel* tel-164 placeholder "טלפון"]
[email your-email placeholder "מייל"]
</div>
<div class="second-row">
[textarea textarea-684 placeholder "הודעה"]
</div>
<div class="third-row">
<span class="wpcf7-form-control-wrap submit">[submit "שלח"]</span>[wpcaptcha]
</div>
</div>
<style>
.row-form .cptch_block {
float: right;
width: 50%;
}
.row-form h3{
color: #fff;
text-shadow: none;
}
.row-form {
background: #C8A734;
padding: 20px;
display: grid;
}
.row-form input, .row-form select, .row-form textarea {
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
text-indent:10px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
float:none;
}
.row-form .first-row .wpcf7-form-control-wrap{
flex-grow: 1;
-webkit-flex-grow: 1;
width: 100px;
margin-left: 10px;
margin-top: 10px;
text-align: center;
color: white;
}
.row-form .second-row .wpcf7-form-control-wrap textarea{
height: 60px;
}
@media screen and (min-width:769px){
.row-form .first-row{
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-left: -10px;
margin-top: -10px;
}
.row-form .wpcf7-form-control-wrap.submit input {
width: 16%;
padding:12px 0;
background:#937023;
border:1px solid #937023;
color:#fff;
}
.row-form .third-row {
text-align: left;
direction: ltr;
}
}
</style>
שם מלא: [your-name]
אימייל: [your-email]
טלפון: [tel-164]
הודעה: [textarea-684]