Kontaktskjemaet fungerer som et avgjørende verktøy for å lette kommunikasjonen mellom enkeltpersoner eller bedrifter. Det gir en praktisk og organisert måte for brukere å nå ut og uttrykke sine spørsmål. Du kan også ta søknader, kontaktforespørsler og meningsmålinger ved å bruke den.
Du kan enkelt opprette en kontaktside på nettstedet ditt ved å bruke kontaktdelen.
I denne artikkelen:
- Legge til kontaktseksjon på en side
- Innhold i kontaktskjema
- Administrer layout
- Administrere skjemafelt og skjematype
- Typer felt
- Innebygd skjema og popup-skjema
- Innstillinger for knappestil
- Stil kontaktskjema
- Kontaktskjemainnstillinger
- Omdiriger skjemaet til en annen side
- Eksporter skjemadata
- Innsendte skjemadata
- E-postvarsler
- Live Eksempel
Legge til kontaktseksjon på en side
- På siden din, Klikk på blått + ikon for å legge til en ny seksjon på siden din.
- Du vil nå se Seksjonskategorier på venstre side.
- Velg Skjemaer (1) kategori og klikk på Kontakt fane (2) hvor du kan velge mellom forskjellige oppsett av Kontakt (3) seksjon.
- Velg et hvilket som helst seksjonsoppsett og klikk på det for å legge det til på siden din.
Innhold i kontaktskjema
Dette er en viktig del av skjemaet siden du laster opp eller endrer bildet, gir tittel og beskrivelse her slik at brukerne får en ide om formålet med selve skjemaet. Ved å omhyggelig lage en kortfattet, beskrivende tittel og informativ, overbevisende beskrivelse, kan du forbedre kommunikasjonen og etablere sterke forbindelser med nettstedets besøkende.
- Du kan Last opp or Delete (1) bildet som skal vises i skjemaet.
- Redigere Tittel (2) i skjemaet.
- Redigere Tekniske beskrivelser (3) i skjemaet.
- Definer Seksjonsoverskrift (4) som vises på toppen av skjemaet.
Administrer layout
- Når du legger til skjemaet på siden, må et oppsett velges. Du kan Endre layout etter å ha lagt til skjemaet også.
Hvis du endrer oppsettet, brukes standardstilen til skjemaet.
Administrere skjemafelt og skjematype
Under Administrer skjemafelt, kan du spesifisere feltene du vil at de besøkende skal fylle ut.
- Klikk på + Legg til felt (1)-knappen for å legge til flere felt i skjemaet.
- Rediger, dupliser eller slett (2) et felt som allerede er lagt til.
- Dra og slipp (3) feltet for å endre rekkefølgen i skjemaet.
E-postfeltet er obligatorisk på skjemaet og kan ikke slettes.
Når du klikker på + Legg til felt-knappen, åpnes en popup hvor du kan velge elementene du vil vise i skjemaet.
Typer felt
Det er flere felttyper som du kan bruke på din nettsides kontaktskjema for å samle inn mer og nyttig data fra brukere på en kategorisert og profesjonell måte. Disse feltene kan enkelt legges til, dupliseres eller kan slettes.
Her er en kort beskrivelse av skjemafeltene.
- Navn: Ta opp navnet på klienten din ved å bruke dette.
- kort tekst: Bruk denne boksen til å fange opp korte tekstdata fra besøkende på nettstedet.
- Lang tekst: Bruk denne boksen til å fange opp lange tekstdata fra besøkende på nettstedet.
- Epost: Ta opp e-posten til klienten din.
- Nr: Bruk denne til å fange opp tall (siffer).
- Dropdown: Du kan legge til alternativer å velge mellom på en rullegardin måte.
- Enkelt utvalg: Legg til dette der brukere bare kan velge ett alternativ fra listen.
- Flere valg: Legg til dette der brukere kan velge flere alternativer fra listen.
- Dato: Legg til en datovelger slik at kundene dine kan velge en dato for enhver begivenhet.
- linje: Legg til linjer i skjemaet. Dette kan brukes til å skille feltene.
- Adresse: Bruk denne til å fange adressen til brukerne.
- Nettsted: Du kan bruke dette til å fange nettsiden til brukeren.
- Phone: Ta opp telefonnummeret ved å bruke dette feltet.
- Tid: Dette vil gi brukerne en mulighet til å velge et tidspunkt.
- separator: Dette kan brukes til å kategorisere skjemafeltene med mulighet for å legge til tittel og undertittel.
- Samtykke: Innhent samtykke fra brukerne som bruker dette på skjemaet.
- Stjerneskala: Tillat brukere å gi stjerner ved å bruke dette. Den kan vise enten 3 eller 5 stjerner.
- Tallskala: Tillat brukere å gi nummervurdering ved å bruke dette. Du kan velge å vise fra 0 til 10 og tilpasse venstre og høyre bildetekst.
- Smileyskala: Tillat brukere å gi smilefjes ved å bruke dette alternativet.
- Mens du legger til enkelte felt, får du muligheten til å velge bredde mellom Hel, Halv og En tredjedel
- Du kan også velge å vise felt ved siden av hverandre ved å velge Halv eller En tredjedel
Innebygd skjema og popup-skjema
Du kan velge å vise skjemaet på siden eller som et popup-vindu lenket til en handlingsfremmende knapp.
Innebygd skjema
Velge Innebygd skjema vil legge ut kontaktskjemaet direkte på siden der det legges til. Skjemaet vil umiddelbart være synlig for besøkende uten at det kreves noen ytterligere handling. Dette er ideelt for situasjoner der du vil holde skjemaet fremtredende og oppmuntre til direkte engasjement, for eksempel på en kontakt- eller forespørselsside.
Popup-skjema
Velge Popup-skjema vil bare vise en knappen på sidenNår en besøkende klikker på knappen, åpnes kontaktskjemaet i et popup-vindu. Dette holder sidedesignet renere og fungerer bra når du vil tilby skjemaet uten å ta opp mye plass. Det brukes ofte til raske henvendelser, innhenting av potensielle kunder eller når du vil minimere distraksjoner på siden.
Innstillinger for knappestil
- Knappetikett – Spesifiser synlig tekst på knappen din. Dette er hva brukerne vil se og klikke på.
- Knappestørrelse – Velg størrelsen på knappen (f.eks. Liten, Medium, Stor). Dette justerer margen og skriftstørrelsen slik at den passer til designet ditt.
- Knappestil – Velg knappestilen som skal være standard (sett i Knapper og lenker kategorien i Design-delen), Solid, Outline eller en tekstkobling.
- Misligholde: Følger nettstedets temainnstillinger.
- Fast: En fet, utfylt knapp.
- Outline: Gjennomsiktig bakgrunn med en kantlinje.
- Tekstlink: Enkel, ren tekststil (ingen knappeboks).
- Knappefarge – Tilpass fargeskjemaet til knappen:
- Misligholde: Arver temainnstillingene.
- Inverter: Reverserer tekst-/bakgrunnsfargene på knappen.
- Tilpasset: Lar deg velge spesifikke tekst- og bakgrunnsfarger.
- Button tekst - Hvis du bruker Tilpasset knappfarge, kan du stille inn tekstfarge (etikettfarge) herfra.
- Knappbakgrunn – Også tilgjengelig under Tilpasset, angir dette knappens bakgrunnsfarge. Kombiner dette med tekstfarge for maksimal lesbarhet og stil.
- Knappjustering - Velg Justering av knapp i formen fra venstre, senter eller høyre alternativ.
- Knappbredde – Velg hvor bred knappen skal vises:
- Misligholde: Standardbredde basert på knappinnhold
- Stor / Ekstra stor: Bredere knapper for mer vekt
- Full bredde: Knappen strekker seg over hele beholderbredden
Stil kontaktskjema
Å style et kontaktskjema er et viktig aspekt for å skape en visuelt tiltalende og brukervennlig opplevelse.
Du vil ha flere stilalternativer for delen:
- Form Fields
- Justering
- tekst
- Mellomrom
- overskrift
- Bilder
- Bildekant
- Popup-knapp
- Skjema-knapp
- Overskriftsknapper
- Overskrift sosiale ikoner
Form Fields
Pixpa tillater du til fullt tilpasse de utseende of din skjema felt. Disse styling alternativer søke om til alle inngang felt in din Kontakt Form og gi du større kontroll enn hvordan din skjema utseende og føles on din nettside.
- Form: Velg formen på inndatafeltene dine – for eksempel rektangel, avrundet, pille eller tekst – slik at de matcher nettstedets estetikk.
- Fyll: Aktiver denne veksleknappen for å bruke en bakgrunnsfarge på skjemafeltene dine.
- Base Color: Angi bakgrunnsfargen for feltene når fyllingsalternativet er aktivert.
- Outline: Slå kantlinjen (omrisset) av eller på for hvert felt.
- Konturfarge: Velg fargen på feltets kantlinje når omrisset er aktivert.
- Tekstfarge i felt: Angi fargen på teksten som skrives av brukere i skjemafeltene.
- Høyde: Juster høyden på feltene dine ved å velge mellom: Liten, Medium, Stor eller Ekstra stor.
- etiketter: Velg om skjemafeltetiketter skal vises inni eller utenfor feltet.
- Etikettfarge: Definer fargen på etiketter når de plasseres utenfor feltet.
- Farge på innsiden av etiketten: Angi fargen for etiketter som er plassert inne i feltet (nyttig for etiketter i plassholderstil).
- Avstand mellom felt: Bruk glidebryteren til å angi den vertikale avstanden (i piksler) mellom hvert skjemafelt.
Justering
- Administrer justeringen av skjemainnholdet horisontalt fra Horisontal justering (1).
- Administrer justeringen av skjemainnholdet vertikalt fra Vertikal justering (2).
tekst
- Klikk på Endre tekststil (1)-knappen for å besøke Design seksjon og administrere skriftstørrelser og stiler.
- Spesifiser Tittel (2) skriftstilen til skjemaet.
- Spesifiser Tekniske beskrivelser (3) skriftstilen til skjemaet.
Mellomrom
- Spesifiser bilde~~POS=TRUNC (1) av bildet i skjemaet i prosent.
- Spesifiser Mellomrom mellom bilde og tekst (3) i prosent.
- Spesifiser Mellomrom under tittelen (4) i prosent.
overskrift
- Juster horisontalt seksjonens overskriftstekst. Du kan sette den til Venstre, Senter og Høyre.
- Aktiver/deaktiver divider mellom seksjonsoverskriften og seksjonsinnholdet.
- Sett tykkelse på skilleveggen (i px).
- Spesifiser Skillefarge fra fargevelgeren.
- Velg en Divider stil fra rullegardinmenyen.
- Sett Overskriftsbredde for å definere hvor bred seksjonstittelen skal vises, med start fra minimum 50 %.
- Spesifiser Plass under overskriften innenfor seksjonen (i piksler).
Bilder
- Bildebeskjæring: Velg Imagisk beskjæring for listeelementene. Du kan angi bildene som Firkantet, Sirkel, Horisontal, Portrett og Original.
- Hjørneradius: Velg å ha en felles hjørneradius eller annen hjørneradius for hver side av listeelementene og angi et tall (i px) for Celler radius av listeelementbildene. Vite mer.
- Svevebevegelsesanimasjon: Velg til Animer bildet av seksjonen ved å aktivere veksleknappen. Sjekk denne funksjonen på en live-side.
- Animasjonsstil: Velg en Animasjonsstil for bildet når markøren holder seg over dem.
- Formmaske: Aktiver denne veksleknappen for å bruke en formmaske på bildene i bildelistedelen. Når den er aktivert, vil den valgte formen visuelt klippe bildet inn i den formen.
- Velg form: Velg mellom forskjellige forhåndsdefinerte former for å bruke på bildene dine. Dette lar deg stilisere innholdet ditt kreativt ved å vise bilder i unike former som avrundet, diamant, dråpe, etc.
Bruke hjørneradius feltet, kan du lage forskjellige former for listeelementbilder. Hvis du spesifiserer 500 px her, vil bildene vises i en sirkelform.
- I tilfelle du har valgt delte hjørner, kan du angi forskjellig hjørneradius for hvert hjørne.
Bildekant
- Aktiver / deaktiver kantlinje rundt bildet ved å bytte bryteren.
- Velg å ha en felles grense på alle sider av bildet, eller du kan spesifisere grenser separat for hver side.
- Spesifiser bredde av grensen. Hvis den er satt til 0, vil ikke rammen vises. Du har også muligheten til å angi kantbredden individuelt for hver side av bildet.
- Velg Grensefarge fra fargevelgeren.
- Velg en foretrukket Border Style fra rullegardinmenyen.
- Bestem kantbredde for mobil enheter, justere den med bredden valgt for skrivebordet.
Popup-knapp
Disse stilalternativene er for popup-knappen, der kontaktskjemaet åpnes når du klikker på knappen.
- Knappstørrelse – Velg størrelsen på knappen fra alternativer som liten, medium eller stor.
- Plass over-knapp – Juster den vertikale avstanden over knappen (i prosent).
- Knappestil – Velg stilen på knappen, for eksempel standard eller tilpasset.
- Knappefarge – Velg fargestil for knappen. Alternativene inkluderer Standard, Inverter eller Tilpasset.
- Knappetekst – Tilpass tekstfargen for knappen.
- Bakgrunn for knapp – Velg bakgrunnsfargen for knappen.
Skjema-knapp
Disse innstillingene tillater tilpasning av skjemainnsendingsknappen slik at den samsvarer med sidens design og layout.
- Knappstørrelse – Velg størrelsen på knappen (Liten, Medium eller Stor).
- Plass over-knapp – Juster den vertikale avstanden over knappen (angitt i prosent).
- Knappestil – Velg den generelle stilen for knappen, for eksempel Standard eller Tilpasset.
- Knappefarge – Angi fargestilen for knappen. Alternativene inkluderer Standard, Inverter eller Tilpasset.
- Knappetekst – Tilpass tekstfargen som vises på knappen.
- Bakgrunn for knapp – Velg en bakgrunnsfarge for knappen.
- Knappjustering – Velg justeringen av knappen (venstre, midtstilt eller høyre).
- Knappbredde – Juster hvor bred knappen vises. Alternativene inkluderer Standard, Stor, Ekstra stor eller Full bredde.
Overskriftsknapper
Disse innstillingene kontrollerer utseendet og avstanden til knapper som er plassert sammen med overskriften til seksjonen.
- Knappstørrelse – Velg den totale størrelsen på knappene (Liten, Medium eller Stor).
- Mellomrom mellom knapper – Juster avstanden mellom flere knapper (målt i vw).
- Plass over knapper – Angi den vertikale avstanden over knappene (målt i prosent).
- Knappbredde – Velg hvor brede knappene skal vises. Alternativene inkluderer Standard, Stor, Ekstra stor og Full bredde.
- Størrelse på tekstlenken – Angi skriftstørrelsen på tekstlenker som er tilknyttet knapper (målt i piksler).
- Størrelse på bildeknapp – Juster størrelsen på bildebaserte knapper (målt i piksler).
Overskrift sosiale ikoner
Vis og tilpass ikoner for deling på sosiale medier i skjemaet.
- Ikonstørrelse – Juster størrelsen på sosiale ikoner (målt i piksler).
- Ikontype – Velg stilen på ikonene, for eksempel Klassisk, Heltrukket eller Omriss.
- Ikonfarge – Velg farge for ikonene. Alternativene inkluderer Lenketekst, Tilpasset eller Merkefarge (originalfargen til den sosiale plattformen).
- Bakgrunnsfarge for ikon – Angi en egendefinert bakgrunnsfarge for ikonene for å forbedre synligheten og stilen.
Kontaktskjemainnstillinger
- Spesifiser en internt navn for skjemaet for å identifisere det i Pixpa Studio. Dette navnet er ikke synlig for besøkende på nettstedet.
Handling etter innsending
- Du kan definere Handling etter innsending (1) enten ved å vise en Suksessmelding (2) eller Omdirigerer brukeren til en spesifisert URL.
- Du kan også legge til et hvilket som helst skript i Post Submit Suksess HTML (3) boks.
Omdiriger skjemaet til en annen side
Å omdirigere brukere til en spesifikk side etter at de har sendt inn et skjema kan forbedre den generelle brukeropplevelsen og tjene ulike formål som å unngå dupliserte innsendinger, analyser og sporing, beholde brukere på nettstedet i lengre tid, etc.
Omdirigering kan enkelt opprettes ved hjelp av Handling etter innsending alternativet under fanen Innstillinger.
- Du kan opprette en omdirigering på nettstedet ditt fra Nettstedet Innhold (1) alternativ. Det kan være en side, galleri, blogg, e-handelsgalleri, mappe osv. Du må skrive inn elementets navn i feltet som vist på skjermbildet nedenfor og du vil få forslag knyttet til det.
- Bruk External Link (2) mulighet for å opprette omdirigering utenfor nettstedet ditt. Du må skrive inn nettadressen i feltet der du vil at brukerne skal bli omdirigert etter innsending av skjema.
Lær mer om hvordan du bruker Linkbuilder.
Eksporter skjemadata
- Eksporter skjemadata (4) som en CSV-fil. Les mer.
- Spar (5) endringene.
Innsendte skjemadata
Innsendte skjemadata i et kontaktskjema inkluderer informasjonen som en bruker skriver inn i skjemafeltene når de sender den.
- Alle skjemadata lagres og er tilgjengelige fra Skjemainnleveringer siden til studioet. Les mer.
- Alle innsendte data via kontaktskjemaet vil også bli videresendt til e-post-IDen spesifisert i kontaktskjemainnstillingene. Din kontoens e-postadresse tas som standard.
Sjekk også: Endre e-postadresse for kontoen.
E-postvarsler
Herfra kan du tilpasse e-postemnet for varslene du mottar som nettstedeier etter en vellykket skjemainnsending. I tillegg kan du tilpasse suksess-e-posten som sendes til brukere eller kunder etter at de har sendt inn skjemaet. Denne funksjonen kan utnyttes for merkevarebygging, markedsføring og kjøring av kampanjer effektivt.
- E-post til nettstedseier: Aktiver eller deaktiver e-postvarsler for skjemainnsendinger. Når dette er aktivert, sendes varsler til de angitte e-postadressene.
- emne: Tilpass emnefeltet i e-posten. Bruk {NETTSTED} variabel for å dynamisk inkludere nettstedsnavnet i emnefeltet. Dette er nyttig når du har flere nettsteder.
- E-post: Angi opptil 5 e-postadresser for å motta varsler når skjemaet er sendt inn.
- Spesifiser Emne av e-posten for innsending av kontaktskjema. Du kan også inkludere {NETTSTED} variabel for å inkludere navnet på nettstedet.
E-post til kunde
- Du kan aktivere E-post til kunde (1) for å sende en e-post angående suksessen for innsending av skjema.
- Spesifiser Emne (2) av posten.
- Spesifiser innholdet i e-posten fra Suksessmelding (3).
- E-post til kunde er en premium-funksjon som kun er tilgjengelig på Profesjonell og avansert planer. Les mer.
- Tilpass e-postinnholdet nøye for å sikre en konsistent og profesjonell kommunikasjonsopplevelse med kundene dine.
Live Eksempel
Her er et direkte popup-kontaktskjema:
Her er et direkte inline kontaktskjema:
For å redusere spammere på skjemaet, aktiveres Google captcha-sikkerheten automatisk på skjemaet ditt.