Het contactformulier dient als een cruciaal hulpmiddel om de communicatie tussen individuen of bedrijven te vergemakkelijken. Het biedt een handige en georganiseerde manier voor gebruikers om contact op te nemen en hun vragen te uiten. U kunt er ook toepassingen, contactvragen en opiniepeilingen mee doen.
U kunt eenvoudig een contactpagina op uw website maken met behulp van het gedeelte Contact.
In dit artikel:
- Contactsectie aan een pagina toevoegen
- Inhoud contactformulier
- Lay-out beheren
- Formuliervelden en formuliertypen beheren
- Soorten velden
- Inline-formulier en pop-upformulier
- Knopstijlinstellingen
- Stijl contactformulier
- Contactformulierinstellingen
- Formulier omleiden naar een andere pagina
- Formuliergegevens exporteren
- Ingediende formuliergegevens
- E-mailberichten
- Live voorbeeld
Contactsectie aan een pagina toevoegen
- Op jouw pagina, Klik op de blauw + icoon om een nieuwe sectie aan uw pagina toe te voegen.
- U ziet nu de Sectie Categorieën aan de linkerkant.
- Kies de Formulieren (1) categorie en klik op de Contact tabblad (2) waar u uit kunt kiezen verschillende indelingen van de Contact (3) sectie.
- Kies een sectielay-out en klik erop om deze aan uw pagina toe te voegen.
Inhoud contactformulier
Dit is een belangrijk onderdeel van het formulier, aangezien u de afbeelding uploadt of wijzigt, hier een titel en beschrijving geeft, zodat gebruikers een idee krijgen van het doel van het formulier zelf. Door zorgvuldig een beknopte, beschrijvende titel en een informatieve, overtuigende beschrijving te maken, kunt u de communicatie verbeteren en een sterke band opbouwen met de bezoekers van uw website.
- Je kan Uploaden or Verwijdering (1) de afbeelding die in het formulier wordt weergegeven.
- Bewerk de Onderwerp (2) van het formulier.
- Bewerk de Beschrijving (3) van het formulier.
- Definieer de Sectie Kop (4) die bovenaan het formulier wordt weergegeven.
Lay-out beheren
- Tijdens het toevoegen van het formulier op de pagina moet een lay-out worden geselecteerd. Jij kan De lay-out wijzigen na het toevoegen van het formulier ook.
Als u de lay-out wijzigt, wordt de standaardstijl van het formulier toegepast.
Formuliervelden en formuliertypen beheren
Onder Formuliervelden beheren, kunt u aangeven welke velden u uw bezoekers wilt laten invullen.
- Klik op de + Veld toevoegen (1) knop om meer velden aan uw formulier toe te voegen.
- Bewerken, dupliceren of verwijderen (2) een reeds toegevoegd veld.
- Plaats en versleep (3) het veld om de volgorde in het formulier te wijzigen.
Het veld E-mail is verplicht op het formulier en kan niet worden verwijderd.
Als u op de knop + Veld toevoegen klikt, wordt er een pop-up geopend waarin u de elementen kunt kiezen die u in het formulier wilt weergeven.
Soorten velden
Er zijn verschillende veldtypen die u kunt gebruiken op het contactformulier van uw website om op een gecategoriseerde en professionele manier meer en nuttige gegevens van gebruikers te verzamelen. Deze velden kunnen heel eenvoudig worden toegevoegd, gedupliceerd of verwijderd.
Hier volgt een korte beschrijving van de formuliervelden.
- Naam: Leg hiermee de naam van uw klant vast.
- Korte tekst: gebruik dit vak om korte tekstgegevens van de websitebezoekers vast te leggen.
- Lange tekst: Gebruik dit vak om lange tekstgegevens van websitebezoekers vast te leggen.
- E-mail: Leg de e-mail van uw klant vast.
- Telefoon Nummer: gebruik dit om getallen (cijfers) vast te leggen.
- Dropdown: U kunt opties toevoegen om uit te kiezen in een vervolgkeuzemenu.
- Enkele selectie: Voeg dit toe waar gebruikers slechts één optie uit de lijst kunnen selecteren.
- Meervoudige selectie: Voeg dit toe waar gebruikers meerdere opties uit de lijst kunnen selecteren.
- Datum: voeg een datumkiezer toe zodat uw klanten een datum kunnen kiezen voor elk evenement.
- Lijn: Voeg regels toe aan uw formulier. Dit kan worden gebruikt om de velden te differentiëren.
- Adres: Gebruik dit om het adres van de gebruikers vast te leggen.
- Website: U kunt dit gebruiken om de website van de gebruiker vast te leggen.
- Telefoonnummer: leg telefoonnummer vast met dit veld.
- Tijd: Dit geeft gebruikers een optie om een tijd te selecteren.
- Separator: Dit kan worden gebruikt om de formuliervelden te categoriseren met een optie om titel en ondertitel toe te voegen.
- Toestemming: Verkrijg toestemming van de gebruikers die dit op het formulier gebruiken.
- Ster schaal: Sta gebruikers toe om hiermee sterbeoordelingen te geven. Het kan 3 of 5 sterren weergeven.
- Nummer schaal: Laat gebruikers hiermee een cijferbeoordeling geven. U kunt kiezen om 0 tot 10 weer te geven en de linker- en rechterbijschrift aanpassen.
- Smiley-schaal: Sta gebruikers toe om smiley-beoordelingen te geven met deze optie.
- Bij het toevoegen van bepaalde velden krijgt u de mogelijkheid om de breedte te kiezen tussen Volledig, Half en Eenderde
- U kunt er ook voor kiezen om velden naast elkaar weer te geven door de optie Half of One Third te kiezen
Inline-formulier en pop-upformulier
U kunt ervoor kiezen om het formulier op de pagina weer te geven of als pop-up die is gekoppeld aan een call-to-action-knop.
Inline formulier
Selecteren Inline formulier zal het contactformulier plaatsen direct op de pagina Waar het wordt toegevoegd. Het formulier is direct zichtbaar voor bezoekers zonder dat er verdere actie nodig is. Dit is ideaal voor situaties waarin u het formulier prominent wilt houden en directe interactie wilt stimuleren, zoals op een contact- of aanvraagpagina.
Pop-upformulier
Het kiezen van Pop-upformulier zal alleen een weergeven knop op de paginaWanneer een bezoeker op de knop klikt, opent het contactformulier in een pop-upvenster. Dit zorgt voor een overzichtelijke pagina en werkt goed wanneer u het formulier wilt aanbieden zonder al te veel ruimte in te nemen. Het wordt vaak gebruikt voor snelle vragen, het vastleggen van leads of wanneer u afleidingen op de pagina wilt minimaliseren.
Knopstijlinstellingen
- Knop Label – Geef de zichtbare tekst op uw knop. Dit is wat gebruikers zien en waarop ze klikken.
- Knoopmaat – Kies de grootte van de knop (bijvoorbeeld Klein, Medium, Groot). Hiermee worden de opvulling en de lettergrootte aangepast aan uw ontwerp.
- Knopstijl – Kies de knopstijl als standaard (ingesteld in de Knoppen en koppelingen tabblad van de Design-sectie), Solid, Outline of een Text Link.
- Standaard: Volgt de thema-instellingen van uw site.
- Solide: Een opvallende, gevulde knop.
- Overzicht: Transparante achtergrond met een rand.
- Tekstlink: Eenvoudige, overzichtelijke tekst-en-tekst-stijl (geen knoppenbalk).
- Knop kleur – Pas het kleurenschema van de knop aan:
- Standaard: Neemt thema-instellingen over.
- Omkeren: Draait de tekst-/achtergrondkleuren van de knop om.
- Maat: Hiermee kunt u specifieke tekst- en achtergrondkleuren kiezen.
- Knoptekst – Als u gebruik maakt van Aangepaste knopkleur, kunt u het instellen tekst (label) kleur vanaf hier.
- Knopachtergrond – Ook beschikbaar onder Aangepast, hiermee stelt u de achtergrondkleur van de knop in. Combineer dit met de tekstkleur voor maximale leesbaarheid en stijl.
- Uitlijning van knoppen - Kies de Uitlijning van de knop in de vorm van de optie Links, Midden of Rechts.
- Knopbreedte – Kies hoe breed de knop moet zijn:
- Standaard: Standaardbreedte gebaseerd op de inhoud van de knop
- Groot / Extra Groot: Bredere knoppen voor meer nadruk
- Volle breedte: Knop strekt zich uit over de gehele breedte van de container
Stijl contactformulier
Het vormgeven van een contactformulier is een belangrijk aspect van het creëren van een visueel aantrekkelijke en gebruiksvriendelijke ervaring.
Je hebt meerdere stijlopties voor de sectie:
- Formuliervelden
- Uitlijning
- Tekst
- Spacing
- Opschrift
- Afbeeldingen
- Afbeeldingsrand
- Pop-upknop
- Formulierknop
- Koptekstknoppen
- Koptekst sociale pictogrammen
Formuliervelden
Pixpa toestaat helpen naar geheel aan te passen the uiterlijk of jouw formulier te worden. Deze styling opties dit toepassen naar allen invoer velden in jouw Contact Form en geven helpen meer onder controle te houden over hoe jouw formulier er gezonder uitzien en voelt zich on jouw website.
- Vorm: Kies de vorm van uw invoervelden, bijvoorbeeld rechthoekig, afgerond, pilvormig of tekstvormig, zodat deze bij de stijl van uw website past.
- in te vullen: Schakel deze schakelaar in om een achtergrondkleur toe te passen op uw formuliervelden.
- Basis kleur: Stel de achtergrondkleur van de velden in wanneer de vuloptie is ingeschakeld.
- Overzicht: Schakel de rand (omtrek) voor elk veld in of uit.
- Omtrekkleur: Kies de kleur van de rand van het veld wanneer de omtrek is ingeschakeld.
- Veldtekstkleur: Stel de kleur in van de tekst die gebruikers in de formuliervelden typen.
- Hoogte: Pas de hoogte van uw velden aan door te kiezen uit: Klein, Gemiddeld, Groot of Extra Groot.
- labels: Kies of formulierveldlabels binnen of buiten het veld worden weergegeven.
- Label kleur: Definieer de kleur van labels wanneer ze buiten het veld worden geplaatst.
- Label Binnenkleur: Stel de kleur in voor labels die in het veld worden geplaatst (handig voor labels in tijdelijke aanduidingen).
- Afstand tussen velden: Gebruik de schuifbalk om de verticale afstand (in pixels) tussen elk formulierveld in te stellen.
Uitlijning
- Beheer de uitlijning van de formulierinhoud horizontaal vanuit Horizontale uitlijning (1).
- Beheer de uitlijning van de formulierinhoud verticaal vanuit Verticale uitlijning (2).
Tekst
- Klik op de Tekststijl wijzigen (1) knop om de Design sectie en beheer uw lettergroottes en -stijlen.
- Geef het Onderwerp (2) lettertype van het formulier.
- Geef het Beschrijving (3) lettertype van het formulier.
Spacing
- Geef het Breedte afbeelding (1) van de afbeelding in het formulier in Procent.
- Geef het Ruimte tussen afbeelding en tekst (3) in procenten.
- Geef het Ruimte onder titel (4) in procenten.
Opschrift
- Horizontaal uitlijnen de sectiekoptekst. U kunt deze instellen op Links, Midden en Rechts.
- Inschakelen/uitschakelen van de verdeler tussen de sectiekop en de sectie-inhoud.
- Kies het dikte van de verdeler (in px).
- Geef het Divider kleur van kleurenkiezer.
- Kies een Scheidingsstijl in de vervolgkeuzelijst.
- Kies het Breedte van de kop om te bepalen hoe breed de sectietitel wordt weergegeven, met een minimum van 50%.
- Geef het Ruimte onder de kop binnen de sectie (in px).
Afbeeldingen
- Afbeelding bijsnijden: Kies de Imagiër gewas voor de lijstitems. U kunt de afbeeldingen instellen als Vierkant, Cirkel, Horizontaal, Portret en Origineel.
- Hoekradius: Kies voor een gemeenschappelijke hoekradius of een andere hoekradius voor elke zijde van de lijstitems en stel een getal in (in px) voor de Cor straal van de lijstitemafbeeldingen. Meer weten.
- Zweefanimatie: Kies voor Animeer de afbeelding van de sectie bij zweven door de schakelaar in te schakelen. Bekijk deze functie op een live pagina.
- Animatiestijl: Kies een Animatiestijl voor afbeelding wanneer de cursor erover beweegt.
- Vormmasker: Schakel deze schakelaar in om een vormmasker toe te passen op de afbeeldingen in de sectie Afbeeldingenlijst. Zodra ingeschakeld, zal de geselecteerde vorm de afbeelding visueel in die vorm knippen.
- Selecteer vorm: Kies uit verschillende vooraf gedefinieerde vormen om toe te passen op uw afbeeldingen. Hiermee kunt u uw content creatief stylen door afbeeldingen weer te geven in unieke vormen zoals rond, diamant, druppel, etc.
De hoekradius veld, kunt u verschillende vormen van afbeeldingen van lijstitems maken. Als u hier 500 px opgeeft, worden de afbeeldingen in een cirkelvorm weergegeven.
- Als u gesplitste hoeken heeft gekozen, kunt u voor elke hoek een andere hoekradius instellen.
Afbeeldingsrand
- Rand in-/uitschakelen door de schakelaar om te zetten.
- Kies ervoor om een gemeenschappelijke grens aan alle kanten van de afbeelding of u kunt de grenzen apart voor elke kant.
- Geef het Breedte van de grens. Als deze is ingesteld op 0, wordt de rand niet weergegeven. U heeft ook de mogelijkheid om de randbreedte voor elke zijde van de afbeelding afzonderlijk in te stellen.
- Selecteer het Rand kleur van kleurenkiezer.
- Selecteer een voorkeur Border Style in de vervolgkeuzelijst.
- Bepalen randbreedte voor mobiel apparaten, waarbij het wordt uitgelijnd met de gekozen breedte voor het bureaublad.
Pop-upknop
Deze stijlopties gelden voor de pop-upknop, waarmee het contactformulier wordt geopend wanneer op de knop wordt geklikt.
- Knopgrootte – Selecteer de grootte van de knop. U kunt kiezen uit opties als klein, gemiddeld of groot.
- Ruimte boven knop – Pas de verticale afstand boven de knop aan (in percentage).
- Knopstijl – Kies de stijl van de knop, bijvoorbeeld standaard of aangepast.
- Knop kleur - Selecteer de kleurstijl voor de knop. De opties zijn Standaard, Omkeren of Aangepast.
- Knoptekst – Pas de tekstkleur voor de knop aan.
- Knopachtergrond – Selecteer de achtergrondkleur voor de knop.
Formulierknop
Met deze instellingen kunt u de knop voor het indienen van formulieren aanpassen aan het ontwerp en de lay-out van de pagina.
- Knopgrootte – Selecteer de grootte van de knop (Klein, Gemiddeld of Groot).
- Ruimte boven knop – Pas de verticale afstand boven de knop aan (aangegeven in percentage).
- Knopstijl – Kies de algemene stijl van de knop, bijvoorbeeld Standaard of Aangepast.
- Knop kleur - Stel de kleurstijl van de knop in. Opties zijn onder andere Standaard, Omkeren of Aangepast.
- Knoptekst – Pas de tekstkleur aan die op de knop wordt weergegeven.
- Knopachtergrond – Selecteer een achtergrondkleur voor de knop.
- Knopuitlijning – Kies de uitlijning van de knop (links, midden of rechts).
- Knopbreedte – Pas aan hoe breed de knop wordt weergegeven. Opties zijn onder andere Standaard, Groot, Extra Groot of Volledige Breedte.
Koptekstknoppen
Met deze instellingen bepaalt u hoe de knoppen er uitzien en waar ze zich bevinden, naast de kop van de sectie.
- Knopgrootte – Selecteer de algehele grootte van de knoppen (Klein, Gemiddeld of Groot).
- Ruimte tussen knoppen – Pas de afstand tussen meerdere knoppen aan (gemeten in vw).
- Ruimte boven knoppen – Stel de verticale afstand boven de knoppen in (gemeten in percentage).
- Knopbreedte – Kies hoe breed de knoppen moeten worden weergegeven. Opties zijn onder andere Standaard, Groot, Extra Groot en Volledige Breedte.
- Tekstlinkgrootte – Geef de lettergrootte op van tekstkoppelingen die aan knoppen zijn gekoppeld (gemeten in px).
- Afbeeldingsknopgrootte – Pas de grootte van op afbeeldingen gebaseerde knoppen aan (gemeten in px).
Koptekst sociale pictogrammen
Geef pictogrammen voor sociaal delen weer in het formulier en pas deze aan.
- Icoongrootte – Pas de grootte van de sociale pictogrammen aan (gemeten in px).
- Icoontype – Kies de stijl van de pictogrammen, bijvoorbeeld Klassiek, Effen of Omtrek.
- Icoonkleur – Selecteer de kleur voor de pictogrammen. Opties zijn onder andere Linktekst, Aangepast of Merkkleur (de originele kleur van het sociale platform).
- Achtergrondkleur van het pictogram – Stel een aangepaste achtergrondkleur in voor de pictogrammen om de zichtbaarheid en stijl te verbeteren.
Contactformulierinstellingen
- Specificeer een interne naam voor het formulier om het te helpen identificeren binnen Pixpa Studio. Deze naam is niet zichtbaar voor websitebezoekers.
Post indieningsactie
- U kunt definiëren Post indieningsactie (1) ofwel door a Succesbericht (2) of De gebruiker omleiden naar een opgegeven URL.
- U kunt ook elk willekeurig script toevoegen in de Post Submit Succes HTML (3) doos.
Formulier omleiden naar een andere pagina
Het omleiden van gebruikers naar een specifieke pagina nadat ze een formulier hebben ingediend, kan de algehele gebruikerservaring verbeteren en heeft verschillende doelen, zoals het vermijden van dubbele inzendingen, analyse en tracking, het vasthouden van gebruikers op de website voor een langere periode, enz.
Omleiding kan eenvoudig worden gemaakt met behulp van de Post indieningsactie optie op het tabblad Instellingen.
- U kunt een omleiding binnen uw website maken vanaf Website Content (1) optie. Het kan een pagina, galerij, blog, e-commerce galerij, map, enz. zijn. U moet de naam van het element in het veld invoeren zoals weergegeven in de onderstaande schermafbeelding en u krijgt suggesties die ermee verband houden.
- Gebruik External Link (2) optie om omleiding buiten uw website te creëren. U moet de URL invoeren in het veld waarnaar u wilt dat de gebruikers worden omgeleid na het indienen van het formulier.
Meer informatie over hoe u Linkbuilder gebruikt.
Formuliergegevens exporteren
- Formuliergegevens exporteren (4) als CSV-bestand. Ontdek.
- Opslaan (5) de veranderingen.
Ingediende formuliergegevens
Ingezonden formuliergegevens in een contactformulier omvatten de informatie die een gebruiker in de formuliervelden invoert wanneer hij deze indient.
- Alle formuliergegevens worden opgeslagen en zijn toegankelijk via het Formulierinzendingen pagina van de studio. Ontdek.
- Alle verzonden gegevens via het contactformulier worden ook doorgestuurd naar het e-mailadres dat is opgegeven in de contactformulierinstellingen. Jouw e-mailadres van het account wordt als standaard genomen.
Controleer ook: E-mailadres van account wijzigen.
E-mailberichten
Vanaf hier kunt u het e-mailonderwerp aanpassen voor de meldingen die u als website-eigenaar ontvangt na een succesvolle indiening van een formulier. Daarnaast kunt u de succes-e-mail personaliseren die naar gebruikers of klanten wordt verzonden nadat ze het formulier hebben ingediend. Deze functie kan worden gebruikt voor branding, marketing en het effectief uitvoeren van campagnes.
- E-mail aan website-eigenaar: Schakel e-mailmeldingen voor formulierinzendingen in of uit. Indien ingeschakeld, worden meldingen verzonden naar de opgegeven e-mailadressen.
- Onderwerp: Pas de onderwerpregel van de e-mail aan. Gebruik de {WEBSITE} Variabele om de websitenaam dynamisch in het onderwerp op te nemen. Dit is handig wanneer u meerdere websites heeft.
- E-mail: Geef maximaal 5 e-mailadressen op die u een melding wilt sturen wanneer het formulier wordt verzonden.
- Geef het Onderwerp van de e-mail met het contactformulier. U kunt ook {WEBSITE} variabele om de naam van de website op te nemen.
E-mail naar klant
- U kunt inschakelen E-mail naar klant (1) om een e-mail te sturen over het succes van het indienen van het formulier.
- Geef het Onderwerp (2) van de post.
- Specificeer de inhoud in de e-mail van Succesbericht (3).
- E-mail naar de klant is een premiumfunctie die alleen beschikbaar is op Professioneel en Geavanceerd plannen. Ontdek.
- Pas de e-mailinhoud zorgvuldig aan om een consistente en professionele communicatie-ervaring met uw klanten te garanderen.
Live voorbeeld
Hier is een live pop-up contactformulier:
Hier is een live inline contactformulier:
Om spammers op het formulier te verminderen, is de Google captcha-beveiliging automatisch ingeschakeld op uw formulier.