Les 4: Stijling, dropdowns en geavanceerde tags

In de laatste les van deze CF7-handleiding behandelen we de overige veldtypen, stijling via CSS en handige uitbreidingen die CF7 nog krachtiger maken.

Meer veldtypen

• Dropdown: [select onderwerp "Kies een onderwerp" "Vraag" "Klacht" "Samenwerking"]
• Checkboxes: [checkbox diensten "Website" "Webshop" "SEO"]
• Radio buttons: [radio budget "Tot €500" "€500-€2000" "Meer dan €2000"]
• Bestandsupload: [file bijlage limit:2mb filetypes:pdf|doc|docx]
• Datum: [date gewenste-datum]

CF7 stylen via CSS

CF7 voegt minimale standaard stijling toe. Alle velden zitten in .wpcf7 wrappers. Voeg eigen CSS toe via Weergave → Aanpassen → Extra CSS:

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px;
}

.wpcf7 input[type="submit"] {
    background: #0070c9;
    color: #fff;
    padding: 12px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
}

Nuttige CF7-uitbreidingen

• Flamingo — slaat alle CF7-inzendingen op in je database (CF7 doet dit standaard niet). Gratis, van de maker van CF7 zelf. Installeer altijd.
• CF7 to Mailchimp — verbindt CF7-inzendingen met je Mailchimp-lijst
• CF7 Conditional Fields — voegt voorwaardelijke logica toe (zoals Gravity Forms dat heeft ingebouwd)

CF7 vs. Gravity Forms — wanneer kies je wat?

• CF7 — gratis, lichtgewicht, perfect voor eenvoudige contactformulieren. Minder gebruiksvriendelijk, geen ingebouwde inzendingen-opslag (gebruik Flamingo).
• Gravity Forms — betaald, krachtig, ingebouwde inzendingen, voorwaardelijke logica, berekeningen, betalingen. De betere keuze voor complexe formulieren of als formulieren cruciaal zijn voor je bedrijfsproces.

Opdracht

Installeer Flamingo zodat inzendingen worden opgeslagen. Voeg een dropdown toe aan je contactformulier met minimaal drie onderwerp-opties. Stijl het formulier met CSS zodat het past bij je huisstijl.