CODEWITHSUNDEEP
csswordpresscontact-formcontact-form-7
roncha
roncha

Reputation: 73

4 Contact Form 7 fields in one line

I am trying to make a contact form that include 4 fields one after one in same line, and in tablet or mobile, the fields will be one under one in 100% width.

actually i have tried a lot, and i got confused from the css.

this is the css that i use:

.one-half,
.one-third {
position: relative;
margin-right: 4%;
float: right;
    margin-bottom: 20px;

}

.one-half { width: 48%; }
.one-third { width: 30.66%; }

.last {
margin-left: 0 !important;
clear: left;
}

@media only screen and (max-width: 767px) {
.one-half, .one-third {
    width: 100%;
    margin-right: 0;
}
}

the form is:

<div class="one-half">
[text* Fullname placeholder "full name"]
</div>
<div class="one-half">
[tel* phone placeholder "phone"]
</div>
<div class="one-half">
[email* email placeholder "email"]
</div>
<div class="one-half last">
[submit "SEND"] </div>

Upvotes: 0

Views: 8264

Answers (2)

remiq
remiq

Reputation: 1

Your e-mail*: <span style="display:inline-block;">[email* your-email]</span> <span style="display:inline-block;">[submit "Send"]</span>

Upvotes: 0

raviramani
raviramani

Reputation: 522

give these properties to parent div of the element which you give float LIKE

<div class="container">
    <div class="one-half">
    [text* Fullname placeholder "full name"]
    </div>
    <div class="one-half">
    [tel* phone placeholder "phone"]
    </div>
    <div class="one-half">
    [email* email placeholder "email"]
    </div>
    <div class="one-half last">
    [submit "SEND"] </div>
</div>

CSS:

container:after{
    content:'';
    display:table;
    clear:both;
}

Upvotes: 1

Related Questions