סטריפ קונטקט פורם 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]