Contact Form7 űrlap 2 oszlopos megjelenéssel

Archívum 2006-2018.11.09 bovitmenyek
#1

Sziasztok,



Tudna valaki segíteni abban, hogy contact formot hogyan lehet betördelni 2 oszlopba? Az lenne a cél, hogy ne nyúljon le a végtelenségig. Egy gyors kóddal van beillesztve az oldalba, a form leírásában sehol sem találtam erre opciót. [contact-form-7 id=“6” title=“Ajánlatkérés”]



Erről beszélünk egyébként.



Előre is köszönöm a segítséget.

#2

CSS-be kell belenyúlni. Van hozzá létező megoldás, pénzért.

http://cf7skins.com/skins/templates/

Itt meg egy példa kód kétoszlopos form létrehozására:

http://code.tutsplus.com/tutorials/mini-guide-to-contact-form-7–wp-25086

#3

Köszönöm a segítséget!

#4

Kétoszlopos reszponzív űrlap minta (ContactForm 7):

<br />
<div id="responsive-form" class="clearfix"><br />
<br />
<div class="form-row"><br />
<div class="column-half">Vezetéknév[text* first-name]</div><br />
<div class="column-half">Utónév [text* last-name]</div><br />
</div><br />
<br />
<div class="form-row"><br />
<div class="column-half">E-mail cím[email* your-email]</div><br />
<div class="column-half">Telefonszám[text* your-phone]</div><br />
</div><br />
<br />
<div class="form-row"><br />
<div class="column-full">Tárgy [text* your-subject]</div><br />
</div><br />
<br />
<div class="form-row"><br />
<div class="column-full"> Üzenet szövege [textarea your-message]</div><br />
</div><br />
<br />
<div class="form-row"><br />
<div class="column-full">[submit "Küldés"]</div><br />
</div><br />
<br />
</div><!--end responsive-form-->
```<br />
Reszponzív, kétoszlopos Contact Form 7 minta - CSS kód<br />

#responsive-form{
max-width:600px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

/**
Media query
**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7-select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}