Kontaktformuläret fungerar som ett avgörande verktyg för att underlätta kommunikationen mellan individer eller företag. Det ger ett bekvämt och organiserat sätt för användare att nå ut och uttrycka sina frågor. Du kan också ta ansökningar, kontaktfrågor och opinionsundersökningar med den.
Du kan enkelt skapa en kontaktsida på din webbplats med hjälp av kontaktsektionen.
I den här artikeln:
-
- Lägga till kontaktsektion på en sida
- Hantera kontaktformulär
- Innehållet i kontaktformuläret
- Hantera formulärfält
- Typer av fält
- Inline-formulär och popup-formulär
- Hantera layout
- Stil kontaktformulär
- Inställningar för kontaktformulär
- Omdirigera formuläret till en annan sida
- Exportera formulärdata
- e-postmeddelanden
- Inlämnade formulärdata
- Levande exempel
Lägga till kontaktsektion på en sida
- På din sida, Klicka på blå + ikon för att lägga till ett nytt avsnitt på din sida.
- Du kommer nu att se Sektionskategorier på vänstra sidan.
- Välj Blanketter (1) kategori och klicka på Kontakt flik (2) där du kan välja mellan olika layouter av Kontakt (3) avsnitt.
- Välj valfri sektionslayout och klicka på den för att lägga till den på din sida.
Hantera kontaktformulär
- Klicka på Redigera innehåll (1) -knapp.
- Du kommer att ha möjlighet att hantera Innehåll (2), Layout (3), Stil (4), Inställningar (5), och e-postmeddelanden (6).
- Träffa Spara (7) för att tillämpa ändringarna i formuläret.
Innehållet i kontaktformuläret
Detta är en viktig del av formuläret eftersom du laddar upp eller ändrar bilden, ger rubrik och beskrivning här så att användarna får en uppfattning om syftet med själva formuläret. Genom att noggrant skapa en kortfattad, beskrivande titel och informativ, övertygande beskrivning kan du förbättra kommunikationen och skapa starka kontakter med din webbplats besökare.
Hantera formulärfält
Under Hantera formulärfält kan du ange de fält som du vill att besökarna ska fylla i detta formulär.
- Klicka på Lägg till nytt fält (1) för att lägga till fler fält i ditt formulär.
- Redigera eller ta bort (2) ett redan tillagt fält.
- Dra och släpp (3) fälten för att ändra deras ordning i formuläret.
- Ställ in Etikett för knappen Uppmaning till handling (4) för formuläret.
E-postfält är obligatoriskt i formuläret och kan inte raderas.
När du klickar på + Lägg till fält knappen öppnas ett popup-fönster där du kan välja dina formulärfält.
- Fånga namn av din klient.
- Fånga all liten information genom Kort text fält.
- Fånga all utarbetad information/meddelande genom Lång text fält.
- Fånga e-mail av din klient.
- Fånga någon numerisk information från din kund.
- Lägg till tjänster att välja mellan i en falla ner sätt.
- Enkelval: Lägg till ett radioval för dina tjänster.
- Flerval: Lägg till ett kryssrutafält för flera val.
- Lägg till Datumväljare så att dina kunder kan välja ett datum för alla evenemang.
- Lägg till linje mellan formulärfälten.
- Fånga adress av din klient.
- Fånga webbplats av din klient.
- Fånga telefon antal av din klient.
- Lägg till tid fältet så att dina kunder kan ange tidpunkten för evenemanget själva.
- Lägg till separator mellan formulärfälten.
- Ocuco-landskapet samtyckesfält alternativet kan användas för att ta tillstånd för nyhetsbrev, acceptera integritet och användarvillkor.
- Ta kundrecensioner med hjälp av stjärna skala, nummerskalaoch smiley skala.
- När du lägger till vissa fält får du möjlighet att välja bredd mellan Hel, Halv och En tredjedel
- Du kan också välja att visa fält sida vid sida genom att välja Halv eller En tredjedel
Formulärstil
- Visa formulär som popup – Aktivera detta för att öppna formuläret i ett popup-fönster genom att klicka på knappen för uppmaning till handling.
- Etikett för uppmaningsknapp – Ställ in Etikett för knappen Uppmaning till handling för formuläret.
- Rubrik-popup – Ange formuläret Rubrik, om någon.
- Ladda upp eller ta bort (1) formulärbilden för formuläret.
- Lägg till Titel Lagringoch Beskrivning (3) för formuläret. Kontrollera innan du lägger till beskrivningen detta artikel.
Headline
- Headline – Ange Avsnittsrubrik (1) för avsnittet Betalningsformulär.
- Knapp och ikoner – Läs mer om Knappar och ikoner (2).
Hantera layouten
- Klicka på Redigera innehåll (1) -knapp.
- Välj Layout (2) flik.
- Välj Layouten för din sektion (3) och Spara (4) ändringarna.
Om du ändrar layouten tillämpas standardutformningen av formuläret.
Stil kontaktformulär
Att utforma ett kontaktformulär är en viktig aspekt för att skapa en visuellt tilltalande och användarvänlig upplevelse.
Du kommer att ha flera stilalternativ för avsnittet:
- Form fält
- Justering
- text
- Förband
- Headline
- Bilder
- Bildkant
- Popup-knapp
- Formulärknapp
- Rubrikknappar
- Rubrik sociala ikoner
Form fält
Pixpa tillåter dig till fullständigt skräddarsy d utseende of ditt formen fält. Dessa styling alternativ tillämpa till Alla Produkter ingång fält in ditt Kontakt Form och ge dig större kontroll över hur ditt formen utseende och känns on ditt webbsajt.
- Form: Välj formen på dina inmatningsfält – till exempel rektangel, rundad, piller eller text – så att de matchar din webbplats estetik.
- Fylla: Aktivera den här växlingsknappen för att använda en bakgrundsfärg för dina formulärfält.
- Basfärg: Ställ in bakgrundsfärgen för fälten när ifyllningsalternativet är aktiverat.
- Disposition: Aktivera eller inaktivera kantlinjen (konturen) för varje fält.
- Konturfärg: Välj färgen på fältets kantlinje när konturen är aktiverad.
- Fälttextfärg: Ange färgen på texten som skrivs av användare i formulärfälten.
- Höjd: Justera höjden på dina fält genom att välja mellan: Liten, Mellan, Stor eller Extra stor.
- Returfrakt och etiketter: Välj om formulärfältsetiketter ska visas inuti eller utanför fältet.
- Etikettfärg: Definiera färgen på etiketter när de placeras utanför fältet.
- Etikett inuti färg: Ange färgen för etiketter som placeras inuti fältet (användbart för etiketter i platshållarstil).
- Avstånd mellan fält: Använd skjutreglaget för att ställa in det vertikala avståndet (i pixlar) mellan varje formulärfält.
Justering
- Hantera justeringen av formulärinnehållet horisontellt från Horisontell linjering (1).
- Hantera justeringen av formulärinnehållet vertikalt från Vertikal inriktning (2).
text
- Klicka på Ändra textstil (1)-knappen för att besöka Design avsnitt och hantera dina teckenstorlekar och stilar.
- ange Titel (2) formulärets teckensnitt.
- ange BESKRIVNING (3) formulärets teckensnitt.
Förband
- ange bild~~POS=TRUNC (1) av bilden i formuläret i procent.
- ange Mellanrum mellan bild och text (3) i procent.
- ange Mellanslag under rubriken (4) i procent.
Headline
- Justera horisontellt avsnittsrubrikens text. Du kan ställa in den på vänster, mitten och höger.
- Aktivera/inaktivera divider mellan avsnittsrubrik och avsnittsinnehåll.
- Ställ in avdelarens tjocklek (i px).
- ange Avdelningsfärg från färgväljaren.
- Välj ett Divider stil från rullgardinsmenyn.
- Ställ in Rubrikbredd för att definiera hur bred sektionsrubriken ska visas, med början från minst 50 %.
- ange Utrymme under rubriken inom sektionen (i px).
Bilder
- Bildskärning: Välj Image Crop för listobjekten. Du kan ställa in bilderna som fyrkantig, cirkel, horisontell, stående och original.
- Hörnradie: Välj att ha en gemensam hörnradie eller annan hörnradie för varje sida av listobjekten och ange ett nummer (i px) för Celler radie av listobjektets bilder. Veta mer.
- Hover-animering: Välj att Animera sektionens bild vid muspekning genom att aktivera växlingsknappen. Kontrollera den här funktionen på en livesida.
- Animeringsstil: Välj en Animation stil för bilden när markören svävar över dem.
- Formmask: Aktivera den här reglaget för att tillämpa en formmask på bilderna i avsnittet Bildlista. När den är aktiverad kommer den valda formen att visuellt klippa in bilden i det formuläret.
- Välj form: Välj bland olika fördefinierade former att tillämpa på dina bilder. Detta låter dig stilisera ditt innehåll på ett kreativt sätt genom att visa bilder i unika former som rundad, diamant, droppe, etc.
Använda hörnradie kan du skapa olika former av listobjektbilder. Om du anger 500 px här, kommer bilderna att visas i en cirkelform.
- Om du har valt delade hörn kan du ställa in olika hörnradie för varje hörn.
Bildkant
- Aktivera/inaktivera kantlinje runt bilden genom att växla reglaget.
- Välj att ha en gemensam gräns på alla sidor av bilden eller så kan du ange gränser separat för varje sida.
- ange bredd av gränsen. Om den är inställd på 0, kommer gränsen inte att visas. Du har också möjlighet att ställa in rambredden individuellt för varje sida av bilden.
- Välj Gräns färg från färgväljaren.
- Välj en föredragen Gränsstil från rullgardinsmenyn.
- Bestäm kantbredd för mobil enheter, justera den med den bredd som valts för skrivbordet.
Popup-knapp
Dessa stilalternativ gäller för popup-knappen, där kontaktformuläret öppnas när man klickar på knappen.
- Knappstorlek - Välj storlek på knappen från alternativ som liten, medel eller stor.
- Knappen Utrymme ovanför – Justera det vertikala avståndet ovanför knappen (i procent).
- Knappstil – Välj knappens stil, till exempel standard eller anpassad.
- Knappfärg – Välj färgstil för knappen. Alternativen inkluderar Standard, Invertera eller Anpassad.
- Knapptext – Anpassa textfärgen för knappen.
- Knappbakgrund – Välj bakgrundsfärg för knappen.
Formulärknapp
Dessa inställningar gör det möjligt att anpassa knappen för formulärinlämning så att den matchar sidans design och layout.
- Knappstorlek - Välj storlek på knappen (Liten, Mellan eller Stor).
- Knappen Utrymme ovanför – Justera det vertikala avståndet ovanför knappen (anges i procent).
- Knappstil – Välj knappens övergripande stil, till exempel Standard eller Anpassad.
- Knappfärg – Ställ in knappens färgstil. Alternativen inkluderar Standard, Invertera eller Anpassad.
- Knapptext – Anpassa textfärgen som visas på knappen.
- Knappbakgrund – Välj en bakgrundsfärg för knappen.
- Knappjustering – Välj knappens justering (vänster, mitten eller höger).
- Knappbredd – Justera hur bred knappen visas. Alternativen inkluderar Standard, Stor, Extra stor eller Full bredd.
Rubrikknappar
Dessa inställningar styr utseendet och avståndet för knappar som placeras bredvid sektionens rubrik.
- Knappstorlek - Välj knapparnas totala storlek (Liten, Mellan eller Stor).
- Mellanrum mellan knappar – Justera avståndet mellan flera knappar (mätt i vw).
- Utrymme ovanför knappar – Ställ in det vertikala avståndet ovanför knapparna (mätt i procent).
- Knappbredd – Välj hur breda knapparna ska visas. Alternativen inkluderar Standard, Stor, Extra stor och Full bredd.
- Textlänkstorlek – Ange teckenstorleken för textlänkar som är associerade med knappar (mätt i px).
- Bildknappstorlek – Justera storleken på bildbaserade knappar (mätt i px).
Rubrik sociala ikoner
Visa och anpassa ikoner för social delning i formuläret.
- Ikonstorlek – Justera storleken på de sociala ikonerna (mätt i px).
- Ikontyp – Välj stil för ikonerna, till exempel Klassisk, Heldragen eller Konturerad.
- Ikonfärg – Välj färg för ikonerna. Alternativen inkluderar Länktext, Anpassad eller Varumärkesfärg (den sociala plattformens ursprungliga färg).
- Bakgrundsfärg för ikoner – Ange en anpassad bakgrundsfärg för ikonerna för att förbättra synligheten och stilen.
Inställningar för kontaktformulär
- Klicka på Redigera innehåll (1) -knapp.
- Anpassa formulärinställningarna från Inställningar (2) flik och Spara (3) dina ändringar.
Form Namn
- Ange ett namn till identifiera kontaktformuläret i Pixpa Studio. Detta namn är inte synligt för webbplatsbesökare.
Åtgärd efter inlämning
Som en åtgärd efter inlämning kan du välja att Visa framgångsmeddelande (1) eller Omdirigera till URL (2).
I fall att Visa framgångsmeddelande (1):
- ange Framgångsmeddelande (2) som visas efter att användaren har skickat in formuläret.
- Du kan också lägga till valfritt skript i framgång efter betalning HTML (3) låda.
- I fall att Redirect till URL, kan du ange valfri intern/extern sida genom att klicka på inställningsikonen (⚙️). Veta mer.
Omdirigera formuläret till en annan sida
Att omdirigera användare till en specifik sida efter att de har skickat ett formulär kan förbättra den övergripande användarupplevelsen och tjänar olika syften som att undvika dubbla inlämningar, analyser och spårning, behålla användare på webbplatsen under en längre tid, etc.
Omdirigering kan enkelt skapas med hjälp av Åtgärd efter inlämning alternativet under fliken Inställningar.
- Du kan skapa en omdirigering på din webbplats från Webbplatsens innehåll (1) alternativ. Det kan vara en sida, galleri, blogg, e-handelsgalleri, mapp etc. Du måste ange elementets namn i fältet som visas på skärmdumpen nedan så får du förslag som rör det.
- Använda Extern länk (2) möjlighet att skapa omdirigering utanför din webbplats. Du måste ange URL:en i fältet dit du vill att användarna ska omdirigeras efter att formuläret skickats in.
Läs mer om hur man använder Linkbuilder.
Synkronisera och exportera formulärdata
- Skicka formulärdata till Make.com. Läs mer.
- Skicka formulärdata till Zapier.com. Läs mer.
- Exportera formulärdata som en CSV-fil. Läs mer.
e-postmeddelanden
Härifrån kan du anpassa e-postämnet för de meddelanden du får som webbplatsägare när formuläret har skickats in. Dessutom kan du anpassa det framgångsrika e-postmeddelandet som skickas till användare eller kunder efter att de har skickat formuläret. Den här funktionen kan utnyttjas för varumärkesbyggande, marknadsföring och kampanjer effektivt.
- E-post till webbplatsägaren: Aktivera eller inaktivera e-postmeddelanden för formulärinlämningar. När detta är aktiverat skickas meddelanden till de angivna e-postadresserna.
- Ämne: Anpassa e-postmeddelandets ämnesrad. Använd {WEBSITE} variabel för att dynamiskt inkludera webbplatsens namn i ämnesraden. Detta är användbart när du har flera webbplatser.
- E-post: Ange upp till 3 e-postadresser för att få meddelanden när formuläret skickas in.
- ange Ämne av kontaktformulärets e-postmeddelande. Du kan också inkludera {WEBSITE} variabel för att inkludera webbplatsens namn.
Maila till kund
- Du kan aktivera Maila till kund (1) för att skicka ett e-postmeddelande angående framgången av formuläret.
- ange Ämne (2) av posten.
- Ange innehållet i e-postmeddelandet från Framgångsmeddelande (3).
- E-post till kund är en premiumfunktion som endast är tillgänglig på Professionell och avancerad planer. Läs mer.
- Anpassa e-postinnehållet noggrant för att säkerställa en konsekvent och professionell kommunikationsupplevelse med dina kunder.
Inlämnade formulärdata
Inlämnad formulärdata i ett kontaktformulär inkluderar den information som en användare anger i formulärfälten när de skickar in den.
- All formulärdata lagras och är tillgänglig från Formulärinsändningar sidan av studion. Läs mer.
- Alla inlämnade data via kontaktformuläret kommer också att vidarebefordras till det e-post-ID som anges i kontaktformulärets inställningar. Din kontots e-postadress tas som standard.
Kontrollera även: Ändra kontots e-postadress.
Levande exempel
Här är ett live popup-kontaktformulär:
Här är ett direktanslutet kontaktformulär:
För att minska spammare på formuläret aktiveras Google captcha-säkerheten automatiskt på ditt formulär.