Kontaktformular 7 Elementor Widget: Stil CF7 Uden CSS
Kontaktformular 7-widgetten i det gratis Master Addons-plugin placerer enhver form, du har indbygget Kontaktformular 7 på en Elementor-side og lader dig style den fra panelet. Vælg formularen, vælg en designvariation, og indstil derefter beholderen, titlen, felterne, etiketterne, indsend knappen og fejlmeddelelserne. Kontaktformular 7 håndterer stadig felterne og sender e-mailen. Fire designvariationer er gratis, og syv mere kommer med Master Addons Pro. Du skal have det gratis Contact Form 7-plugin installeret og mindst én formular oprettet.
Sådan tilføjes kontaktformular 7 til Elementor
Du har brug for Elementor, den frie Kontaktformular 7 plugin og det gratis Master Addons plugin.
- Installer Kontaktformular 7, og opret din formular under Kontakt, Tilføj Ny, med de felter og e-mailindstillinger, du har brug for.
- Installer og aktiver Master Addons fra WordPress.org.
- Rediger din side med Elementor, og søg i widgetpanelet efter Kontaktformular 7. Vælg den med Master Addons badge.
- In Vælg Kontaktformular, vælge din formular.
- Vælg en designvariation med stil (stil et til fire er gratis).
- Juster beholderen, felterne, etiketterne, knappen og fejlene, og indsend derefter en testmeddelelse på livesiden.
Hver indstilling er dækket af Kontakt Formular 7 widget indstillinger guide.
Designvariationer: 4 gratis, 7 Pro
I Stil, Design Layout, vælge en Designvariation. Style One til Style Four er i det gratis plugin. Style Five til Style Eleven behov Master Addons Pro. Hver variation styler felterne og knappen sammen, og du kan ændre en hvilken som helst del bagefter i afsnittene nedenfor.
- Hver widget på siden kan bruge sin egen variation, så en sidefodsformular og en kontaktsideformular kan se anderledes ud.
- Vælg formularen under fanen Indhold under Vælg Kontaktformular. Listen viser de formularer, du oprettede i Kontaktformular 7.
- Hvis Kontaktformular 7 ikke er aktiv, viser widgetten en meddelelse i stedet for en formular.
Styling Kontaktformular 7: Widget vs CSS vs Elementor Pro Form
Der er tre almindelige måder at få en flot formular på et Elementor-websted. Her er hvordan de sammenligner.
| Master Addons CF7 widget | Brugerdefineret CSS på CF7 | Elementor Pro Form widget | |
|---|---|---|---|
| Formbygger | Kontaktformular 7 | Kontaktformular 7 | Indbygget i Elementor Pro |
| Styling | Panelkontroller og 11 variationer (4 gratis) | Skriv og vedligehold CSS | Panelkontroller |
| Omkostning | Gratis (7 variationer har brug for Pro) | Free | Behov Elementor Pro |
| Bedst til | Websteder, der allerede bruger CF7 | Udviklere, der ønsker fuld kontrol | Websteder på Elementor Pro, der ønsker formularer og handlinger på ét sted |
Hvis du allerede har kontaktformular 7-formularer, er widgetten den hurtigste måde at få dem til at matche dit design. Hvis du bruger et andet formular-plugin, skal du se Ninja Forms eller Gravity Forms widgets, eller den Mailchimp widget til tilmeldinger.
Form Container og Titel
Form Container indstiller en farve-, farveforløbs- eller billedbaggrund, en Border Top Farve, Form Bredde og Form Polstring. Den Title sektion indstiller farven, justeringen og typografien for en overskrift inde i din formularmarkering, hvis din formular har en.
- Indstil Form Width under 100% for at centrere en smal form i en bred kolonne.
- Den øverste kantfarve fungerer som en simpel accent over formen.
- Polstring giver formularen plads inde i et farvet kort.
Felter og etiketter
Input & tekstområde indstiller baggrundsfarven, tekstfarve, polstring, Feltbredde, kant- og grænseradius for tekstfelter, tekstområder og markeringsmenuer. Etiketter har sin egen farve og typografi, så feltnavne kan skille sig ud fra, hvad besøgende skriver.
- Field Width fungerer i procent, praktisk til to-søjlede layouts bygget i din CF7-formularmarkering.
- Afkrydsningsfelter, radioknapper og filindgange holder dit tema eller CF7-styling.
- Hold nok kontrast mellem feltbaggrund og tekst til tilgængelighed.
Indsend Knap- og Fejlmeddelelser
Indsend knap har typografi plus Normal og Hover faner: baggrund, tekstfarve og kantfarve til Normal, og baggrunds- og tekstfarve til Hover. Kantbredde, kantfarve, radius og polstring er indstillet under fanerne. Den Fejl sektionsstile Fejlmeddelelser under felter og Valideringsfejl for hele formularen og på fanen Indhold kan du vise eller skjule hver af dem.
- Standardknappen er lilla (#6e00e9) med hvid tekst, så indstil dine brandfarver.
- Skjulning af feltfejl gør formularen mere ryddelig, men besøgende stoler derefter på meddelelsen på formularniveau.
- Der er ingen ikonkontrol for knappen. For at tilføje en, se sådan tilføjes et Font Awesome-ikon til knappen Contact Form 7 submit.
Ofte stillede spørgsmål til kontaktformular 7
Hvordan forbinder jeg dette med mine eksisterende kontaktformular 7-formularer?
Åbn i fanen Indhold Vælg Kontaktformular. Det viser hver formular, du har oprettet i Kontaktformular 7. Vælg en, og widgetten viser den med dit valgte design.
Vil min formular stadig sende e-mails og fungere som konfigureret i kontaktformular 7?
Ja. Widgetten ændrer kun, hvordan formularen ser ud. Felter, e-mail-indstillinger, meddelelser og spambeskyttelse forbliver i Kontaktformular 7 og fungerer, mens du indstiller dem der.
Er Kontaktformular 7 widget gratis?
Ja, widgetten er en del af det gratis Master Addons plugin, og Style One til Style Four er gratis. Style Five til Style Eleven har brug for Master Addons Pro. Kontakt Formular 7 selv er også gratis.
Har jeg brug for Contact Form 7 plugin?
Ja. Denne widget stilarter Kontakt Form 7 formularer, så den gratis Kontakt Form 7 plugin skal være installeret og aktiv. Uden det, widget viser en “Kontakt Form 7 er ikke aktiveret” meddelelse.
Hvad sker der, hvis jeg tilføjer et nyt felt i pluginnet Kontaktformular 7?
Rediger formularen i Kontaktformular 7, og gem. Widgetten viser den opdaterede formular, og dine felt- og etikettypografier gælder for det nye felt, fordi de er målrettet mod alle tekstfelter og etiketter. Opdater Elementor-editoren, hvis forhåndsvisningen ikke opdateres.
Har jeg brug for at kende CSS for at style mine formularer?
Nej til farver, kanter, mellemrum og typografi, som alle er panelkontroller. Layout inde i formularen, såsom at sætte to felter side om side, kommer fra din Kontaktformular 7 formularmarkering.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
