Contact Form 7 -lomakkeen vakioasettelu on pystysuora kenttärivi. Nimi, sähköposti, aihe, viesti pinotaan allekkain ja venytetään koko leveydelle. Se näyttää kömpelöltä ja vie ruututilaa, varsinkin kun kenttiä on enemmän kuin kolme.

Mutta tässä on pointti: CF7-editori ymmärtää HTML:ää. Tämä tarkoittaa, että voit kääriä kentät div-säiliöihin, asettaa niiden leveyden ja kohdistaa ne riviin. Ei lisäosia, ei virityksiä, pelkkää CSS:ää.

Alla on kaksi toimivaa tapaa järjestää Contact Form 7 -kentät 2, 3 tai 4 sarakkeeseen. Ensimmäinen on yleispätevä (HTML + CSS), toinen käyttää teemasi shortcode-järjestelmää. Molemmat on testattu tuotantosivustoilla, eivätkä ne riko mobiiliasettelua.

💡 Pikaopas:

• Katso, miltä CF7:n oletuslomake näyttää ja miksi pystyasettelu on ongelmallinen
• Kopioi valmis CSS-flexbox ja liitä se child-teemaasi (tapa 1, ei lisäosia)
• Jos teemasi tukee jo sarakeshortcodeja, ota ne käyttöön CF7:ssä ja kääri kenttäsi (tapa 2)
• Testaa lopputulos työpöydällä ja mobiilissa (media query mukana)

Miltä Contact Form 7:n oletuslomake näyttää

Kun luot lomakkeen kohdasta "Yhteystiedot" → "Lisää uusi", saat vakiorakenteen: tekstikentät, sähköposti, viesti ja lähetyspainike tiukasti allekkain pinottuna. Editorissa se näyttää tältä:

Julkisella puolella TwentySeventeenilla tai millä tahansa muulla teemalla ilman mukautettua lomaketyylitystä lopputulos on pystysuora:

"Nimi"- ja "Sähköposti"-kentät vievät koko käytettävissä olevan leveyden, vaikka puolikaskin riittäisi kummallekin. Seuraus: lomake näyttää massiiviselta, käyttäjät joutuvat vierittämään enemmän kuin on tarpeen ja konversiot laskevat.

CF7-editori on suunniteltu hyväksymään HTML-merkintää lomakepohjan sisällä. Juuri sitä me käytämme.

Tapa 1: HTML + CSS flexbox (suositus)

Lähestymistapa: kääri lomakekentät <div>-elementteihin, joissa on CSS-sarakeluokat, ja määrittele sitten nuo luokat kerran child-teemassasi tai mukautetun CSS:n lisäosan kautta.

Mitään ylimääräisiä sarakelisäosia ei tarvita, vain CF7 ja muutama rivi CSS:ää.

CSS grid 2 ja 3 sarakkeelle

Alla on käyttövalmis CSS flexboxilla. Toisin kuin floatiin perustuvat ratkaisut, flex kohdistaa sarakkeet automaattisesti korkeuden mukaan eikä vaadi clearfix-virityksiä:

1
/* Column row */
2
.cf7-row {
3
    display: flex;
4
    flex-wrap: wrap;
5
    gap: 4%;
6
    margin-bottom: 16px;
7
}
8
 
9
/* 2 columns */
10
.cf7-col-2 {
11
    flex: 0 0 48%;
12
}
13
 
14
/* 3 columns */
15
.cf7-col-3 {
16
    flex: 0 0 30.66%;
17
}
18
 
19
/* Mobile: columns stack vertically */
20
@media only screen and (max-width: 767px) {
21
    .cf7-col-2,
22
    .cf7-col-3 {
23
        flex: 0 0 100%;
24
    }
25
}

Sijoita CSS child-teemaasi (style.css-tiedosto) tai Simple Custom CSS -lisäosan kautta, joka lisää tyylikentän hallintapaneeliin ilman tiedostojen muokkaamista.

Merkintä CF7:n sisällä

Avaa lomake-editori (Yhteystiedot → lomakkeesi) ja kääri kentät div-säiliöihin yllä olevilla CSS-luokilla. Kahdelle sarakkeelle:

1
<div class="cf7-row">
2
  <div class="cf7-col-2">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-2">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
</div>
13
 
14
<label>Your message
15
  [textarea your-message]
16
</label>
17
 
18
[submit "Send"]

Sivustolla lopputulos näyttää tältä:

Kolme saraketta, sama logiikka

Kun haluat kolme kenttää riviin, vaihda luokiksi cf7-col-3 ja lisää kolmas lohko:

1
<div class="cf7-row">
2
  <div class="cf7-col-3">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-3">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
  <div class="cf7-col-3">
13
    <label>Subject
14
      [text your-subject]
15
    </label>
16
  </div>
17
</div>
18
 
19
<label>Your message
20
  [textarea your-message]
21
</label>
22
 
23
[submit "Send"]

Lomakkeen ulkoasu:

"Nimi", "Sähköposti" ja "Aihe" -kentät ovat nyt samalla rivillä, ja viesti vie koko leveyden niiden alapuolella. Alle 767 pikselin levyisillä näytöillä kaikki sarakkeet tiivistyvät yhteen, joten lomake pysyy luettavana puhelimella.

Flexboxin etu: jos kenttien korkeudet eroavat (esimerkiksi pitkä nimike yhdessä sarakkeessa), rivi ei hajoa. Flex kohdistaa sarakkeet automaattisesti. Float-pohjaiset asettelut eivät pysty tähän ilman clearfix- ja margin-right-kiertotemppuja.

Tapa 2: teeman shortcode-sarakkeet

Jotkin WordPress-teemat, erityisesti kaupalliset kuten GeneratePress, Kadence ja Astra, sisältävät valmiin shortcode-järjestelmän sarakkeille. Tämä näkyy yleensä editorissa painikkeena, joka tuottaa shortcodeja kuten [one_half]...[/one_half] tai [column grid="6"]...[/column].

Jos teemasi tukee tätä, CF7-sarakkeet voi luoda ilman CSS:ää. Sinun on kuitenkin sallittava CF7:n käsitellä shortcodeja lomakkeen sisällä, sillä se jättää ne oletuksena huomiotta.

Vaihe 1: ota shortcodet käyttöön CF7-editorissa

Asenna Contact Form 7 Shortcode Enabler -lisäosa. Se on kevyt, muutaman kilotavun kokoinen, ja tekee tasan yhden asian: välittää shortcodet CF7:n läpi.

Vaihtoehto ilman lisäosaa: lisää suodatin lapsiteemasi functions.php-tiedostoon:

1
add_filter('wpcf7_form_elements', 'cf7_do_shortcode');
2
 
3
function cf7_do_shortcode($form) {
4
    return do_shortcode($form);
5
}

Vaihe 2: kääri kentät sarake-shortcodeihin

Periaate on sama kuin div-luokkien kanssa, mutta CSS-luokkien sijaan käytät teeman shortcodeja. Luontipainike löytyy yleensä WordPressin visuaalisesta editorista:

Luo shortcodet halutulle sarakemäärälle ja lisää sisältö:

Sivun ulkoasu:

Siirrä nyt shortcodet CF7-editoriin. Kahdelle vierekkäiselle kentälle:

1
[one_half]
2
<label>Your name (required)
3
  [text* your-name]
4
</label>
5
[/one_half]
6
 
7
[one_half_last]
8
<label>Your Email (required)
9
  [email* your-email]
10
</label>
11
[/one_half_last]
12
 
13
<label>Your message
14
  [textarea your-message]
15
</label>
16
 
17
[submit "Send"]

Lopputulos näyttää käyttäjälle samalta kahdelta sarakkeelta kuin menetelmässä 1. Tämä tapa on kätevä, kun teemassasi on valmiit shortcodet ruudukoille: CSS:ää ei tarvita, ja responsiivisuus toimii suoraan.

Haittapuoli: olet sidoksissa teemaasi. Jos vaihdat teemaa, shortcode-sarakkeet katoavat ja lomakkeesi hajoaa. Menetelmä 1 CSS:llä siirtyy minkä tahansa teeman mukana.

Video: monisarakkeisen lomakkeen vaiheittainen rakentaminen

Yksityiskohtainen englanninkielinen video-ohjeistus, jossa tekijä esittelee molemmat tavat, mukaan lukien flexbox-asetukset ja mobiilisovituksen:

⁉️🤔 Usein kysytyt kysymykset

Toimiiko flexbox-merkintä vanhemmissa selaimissa?

Flexbox on ollut kaikkien nykyaikaisten selainten tukema yli kymmenen vuoden ajan: Chrome, Firefox, Safari ja Edge tukevat sitä täysin ilman etuliitteitä vuosina 2015-2016 julkaistuista versioista lähtien. Ainoa poikkeus on Internet Explorer 11, jossa flexbox toimii pienin bugein ja vaatii -ms--etuliitteen, mutta IE11:n osuus maailmanlaajuisesta liikenteestä on pudonnut tilastollisesti merkityksettömäksi. Tuotantosivustoilla flexboxia voi huoletta käyttää ilman etuliitteitä.

Voiko eri lomakeriveillä olla eri määrä sarakkeita?

Voi. Flexbox-säiliö .cf7-row eristää jokaisen rivin: se voi sisältää 2, 3 tai 4 saraketta, kun taas seuraavalla rivillä on eri yhdistelmä. Esimerkiksi ensimmäisellä rivillä on nimi + sähköposti (2 saraketta), toisella yritys + puhelin + kaupunki (3 saraketta) ja kolmannella viesti koko leveydellä. Varmista vain, että suljet yhden .cf7-row-säiliön ennen seuraavan avaamista.

Entä jos kenttien nimilaput ovat eripituisia ja sarakkeet siirtyvät?

Flexbox-rivillä sarakkeet venyvät oletuksena pisimmän sarakkeen korkeuteen. Tämä on nimenomaan sallittu align-items: stretch -asetuksella (aktiivinen oletuksena yllä olevassa koodissa). Jos nimilaput näyttävät silti visuaalisesti kohdistumattomilta, aseta kiinteä nimilapun korkeus label { min-height: 48px; display: block; } lomakkeen sisällä.

Tarvitseeko shortcodet ottaa käyttöön menetelmässä 1 CSS:n kanssa?

Ei. Menetelmä 1 käyttää puhdasta HTML:ää (div-säiliöitä luokkineen), ja CF7 välittää HTML-merkinnän sellaisenaan ilman lisäliitännäisiä. Shortcode Enabler -liitännäistä tarvitaan vain menetelmässä 2, jossa teeman shortcode-sarakkeita käytetään lomakkeen sisällä.

Entä jos teemani käyttää Gutenbergia shortcodejen sijaan?

Gutenbergin sarakkeet toimivat sivu- ja artikkelitasolla, mutta eivät CF7-editorin sisällä. Itse CF7-lomake lisätään sivulle [contact-form-7 id="..." title="..."] -shortcodella, eikä Gutenberg hallitse kenttien asettelua sen sisällä. Lomakkeen sisäisiin sarakkeisiin käytä menetelmää 1 (CSS flexbox), joka on yhteensopiva minkä tahansa editorin kanssa.

Kannattaako sarakkeiden asettaminen nähdä vaivaa?

Yksisarakkeinen lomake toimii. Kaksisarakkeinen lomake toimii ja kerää enemmän yhteydenottoja, koska se näyttää siistimmältä ja vaatii vähemmän vierittämistä. Konversioero voi ensi silmäyksellä vaikuttaa mitättömältä, mutta ajan mittaan siitä kertyy kymmeniä liidejä.

Flexbox-menetelmä ratkaisee ongelman täysin: 15 riviä CSS:ää, 5 minuuttia asennusta, ei yhtään liitännäistä. Se ei ole sidottu mihinkään teemaan, ei hajoa CMS:n päivittyessä eikä luo riippuvuuksia. Jos teemasi tukee valmiiksi sisällön jakamista sarakkeisiin, shortcode-lähestymistapa toimii myös, muista vain shortcode-enabler-liitännäinen ja se, että sarakkeet katoavat teemaa vaihtaessa.

Molemmat menetelmät on testattu CF7-versiolla 6.1 ja sitä uudemmilla, WordPress 6.5+:lla. Ne toimivat tuotannossa ilman yllätyksiä.