两列上的联系人表单7字段

Posted 2021-02-22

Displaying Contact Form 7 fields on 2 columns using CSS.

************CF7 markup***************
 
<div class="one-half">
<label> Your Name (required)
     </label>
</div>
 
<div class="one-half last">
<label> Your Email (required)
    [email* your-email] </label>
</div>
 
<label> Your Message
    [textarea your-message] </label>
 
[submit "Send"]
 
 
 
 
************CSS***************
 
.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}