📋 Contact Form 7 kahes või enamas veerus: flexbox ja lühikoodi lähenemine

Tavaline Contact Form 7 paigutus on vertikaalne väljade veerg. Nimi, e-post, teema, sõnum, üksteise alla laotuna, täislaiuses. See näeb kohmakas välja ja võtab ekraaniruumi, eriti kui sul on rohkem kui kolm välja.

Aga asi on selles: CF7 redaktor mõistab HTML-i. See tähendab, et saad väljad mässida div-konteineritesse, määrata nende laiuse ja joondada need ritta. Ei mingeid pluginaid, ei mingeid häkke, lihtsalt puhas CSS.

Allpool on kaks töötavat meetodit, kuidas paigutada Contact Form 7 väljad 2, 3 või 4 veergu. Esimene on universaalne (HTML + CSS), teine kasutab sinu teema lühikoodisüsteemi. Mõlemat on testitud reaalsetel saitidel ja need ei lõhu mobiilivaadet.

💡 Kiire ülevaade:

• Vaata, milline näeb välja vaikimisi CF7 vorm ja miks vertikaalne paigutus on problemaatiline
• Kopeeri valmis CSS flexbox ja kleebi see oma alamteemasse (meetod 1, pluginaid pole vaja)
• Kui sinu teema juba toetab veergude lühikoode, luba need CF7-s ja mässi oma väljad (meetod 2)
• Testi tulemust lauaarvutil ja mobiilis (meediapäring on kaasas)

Milline näeb välja vaikimisi Contact Form 7 vorm

Pärast vormi loomist läbi "Kontakt" → "Lisa uus" saad standardse märgendi: tekstiväljad, e-post, sõnum ja saatmisnupp, rangelt üksteise alla laotuna. Redaktoris näeb see välja selline:

Esilehel, TwentySeventeeni või mõne muu teemaga, millel pole kohandatud vormikujundust, on tulemus vertikaalne:

"Nime" ja "E-posti" väljad võtavad enda alla kogu saadaoleva laiuse, kuigi poolest piisaks kummalegi. Tulemus: vorm näeb välja kogukas, kasutajad kerivad rohkem kui vaja ja konversioonid langevad.

CF7 redaktor on loodud vastu võtma HTML-märgendit vormi mallis. Just seda me kasutamegi.

Meetod 1: HTML + CSS flexbox (soovitatav)

Lähenemine: mässi vormiväljad <div> elementidesse CSS-i veeruklassidega, seejärel defineeri need klassid üks kord oma alamteemas või kohandatud CSS-i plugina kaudu.

Mingeid täiendavaid veerupluginaid pole vaja, ainult CF7 ja paar rida CSS-i.

CSS ruudustik 2 ja 3 veeru jaoks

Allpool on kasutusvalmis CSS flexbox'iga. Erinevalt float-põhistest lahendustest joondab flex veerud automaatselt kõrguse järgi ega vaja clearfix-häkke:

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
}

Paiguta CSS oma alamteemasse (style.css fail) või läbi Simple Custom CSS plugina, mis lisab stiilivälja administreerimispaneeli, ilma et peaks faile muutma.

Märgend CF7 sees

Ava vormiredaktor (Kontakt → sinu vorm) ja mässi väljad div-konteineritesse ülaltoodud CSS-klassidega. 2 veeru jaoks:

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"]

Saidil näeb tulemus välja selline:

Kolm veergu, sama loogika

Kolm välja ritta saamiseks muuda klassid cf7-col-3 vastu ja lisa kolmas plokk:

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"]

Esiliini väljund:

Väljad „Nimi", „E-post" ja „Teema" on nüüd reastatud ühte ritta, samas kui sõnum hõivab nende all täislaiuse. Ekraanidel, mis on kitsamad kui 767px, vajuvad kõik veerud üheks, hoides vormi telefonis loetavana.

Flexbox'i eelis: kui väljade kõrgused erinevad (näiteks pikk silt ühes veerus), siis rida ei purune. Flex joondab veerud automaatselt. Float-põhised paigutused ei suuda seda ilma clearfix'i ja margin-right lahendusteta.

Meetod 2: teema lühikoodi veerud

Mõned WordPressi teemad, eriti kommertsteemad nagu GeneratePress, Kadence ja Astra, tulevad koos sisseehitatud veergude lühikoodisüsteemiga. Tavaliselt ilmub see redaktoris nupuna, mis genereerib lühikoode nagu [one_half]...[/one_half] või [column grid="6"]...[/column].

Kui sinu teema seda toetab, saab CF7 veerge luua ilma CSS-ita. Siiski pead lubama CF7-l vormi sees lühikoode töödelda, sest vaikimisi ignoreerib see neid.

Samm 1: luba lühikoodid CF7 redaktoris

Paigalda plugin Contact Form 7 Shortcode Enabler. See on minimaalne, kaalub mõne kilobaiti ja teeb täpselt üht asja: suunab lühikoodid läbi CF7.

Alternatiiv ilma pluginata: lisa filter oma alamteema faili functions.php:

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

Samm 2: mähi väljad veergude lühikoodidega

Põhimõte on sama mis div-klasside puhul, kuid CSS-klasside asemel kasutad teema lühikoode. Genereerimise nupp asub tavaliselt WordPressi visuaalses redaktoris:

Genereeri soovitud arvu veergude jaoks lühikoodid ja sisesta sisu:

Lehe väljund:

Nüüd kanna lühikoodid CF7 redaktorisse. Kahe välja jaoks ühes reas:

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"]

Esikülje tulemus on samad kaks veergu nagu esimese meetodi puhul. See lähenemine on mugav, kui sinu teemal on juba olemas lühikoodid ruudustike jaoks: CSS-i pole vaja ja responsiivsus töötab kohe karbist välja.

Miinus: oled seotud oma teemaga. Vaheta teemat ja lühikoodi veerud kaovad, lõhkudes sinu vormi. Esimene meetod CSS-iga kandub üle mis tahes teema vahetamisel.

Video: mitmeveerulise vormi samm-sammuline seadistamine

Üksikasjalik ingliskeelne videojuhend, kus autor demonstreerib mõlemat lähenemist, sealhulgas flexbox-seadistust ja mobiiliga kohandamist:

⁉️🤔 Korduma kippuvad küsimused

Kas flexbox-märgendus töötab vanemates brauserites?

Flexbox on kõigis kaasaegsetes brauserites toetatud juba üle kümne aasta: Chrome, Firefox, Safari ja Edge omavad täielikku ühilduvust ilma eesliideteta alates 2015.-2016. aastal välja antud versioonidest. Ainus erand on Internet Explorer 11, kus flexbox töötab väiksemate vigadega ja nõuab -ms- eesliidet, kuid IE11 osakaal globaalses liikluses on langenud alla statistilise olulisuse piiri. Tootmissaitide jaoks on flexbox ohutu kasutada ilma eesliideteta.

Kas ma saan erinevates vormiridades kasutada erinevat arvu veerge?

Jah. Flexbox-konteiner .cf7-row isoleerib iga rea: see võib sisaldada 2, 3 või 4 veergu, samal ajal kui järgmisel real on teistsugune kombinatsioon. Näiteks esimesel real on nimi + e-post (2 veergu), teisel real ettevõte + telefon + linn (3 veergu) ja kolmandal real sõnum täislaiuses. Veendu lihtsalt, et sulged ühe .cf7-row enne järgmise avamist.

Mis siis, kui väljade sildid on erineva pikkusega ja veerud nihkuvad?

Flexbox-reas venivad veerud vaikimisi kõrgeima veeru kõrguseks. See on selgesõnaliselt lubatud atribuudiga align-items: stretch (ülaltoodud koodis vaikimisi aktiivne). Kui sildid tunduvad visuaalselt siiski valesti joondatud, määra vormi sees fikseeritud sildi kõrgus: label { min-height: 48px; display: block; }.

Kas ma pean esimese CSS-iga meetodi jaoks lühikoodid lubama?

Ei. Esimene meetod kasutab puhast HTML-i (div-konteinerid klassidega) ja CF7 laseb HTML-märgenduse läbi ilma täiendavate pluginateta. Lühikoodide lubamise pluginat on vaja ainult teise meetodi puhul, kus vormi sees kasutatakse teema lühikoodi veerge.

Mis siis, kui minu teema kasutab lühikoodide asemel Gutenbergi?

Gutenbergi veerud töötavad lehe/postituse tasemel, kuid mitte CF7 redaktori sees. CF7 vorm ise sisestatakse lehele lühikoodiga [contact-form-7 id="..." title="..."] ja Gutenberg ei kontrolli selle sees olevat väljade paigutust. Vormisiseste veergude jaoks kasuta esimest meetodit (CSS flexbox), mis ühildub iga redaktoriga.

Kas veergude seadistamise vaev tasub end ära?

Üheveeruline vorm töötab. Kaheveeruline vorm töötab ja kogub rohkem esitamisi, sest see näeb korralikum välja ja nõuab vähem kerimist. Konversiooni erinevus võib esmapilgul tunduda tühine, kuid aja jooksul koguneb sellest kümneid müügivihjeid.

Flexbox-meetod lahendab probleemi täielikult: 15 rida CSS-i, 5 minutit seadistamist, null pluginaid. See ei ole seotud ühegi teemaga, ei purune CMS-i uuendamisel ega tekita sõltuvusi. Kui sinu teema juba toetab sisu veergudeks jagamist, töötab ka lühikoodi lähenemine, pea lihtsalt meeles lühikoodide lubamise pluginat ja seda, et veerud kaovad teema vahetamisel.

Mõlemat meetodit on testitud CF7 versiooniga 6.1 ja uuemaga, WordPress 6.5+-ga. Need töötavad tootmises ilma üllatusteta.