TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

0

Det er mange enkle måter å legge til skjemaer på ditt Weebly -nettsted. Du kan bruke standard Weebly "Kontaktskjema" -element, koble til skjemaer fra App Center og legge inn skjemakoder fra tredjeparter. Som et opprinnelig element er Weeblys standard "Kontaktskjema" -element enkelt å integrere og administrere mottatte skjemainnleveringer enkelt via dashbordet eller iPhone/ Android -apper. I denne artikkelen vil vi diskutere funksjonene i standard "Kontaktskjema" -element og måtene å tilpasse det. Annet enn kontaktskjema, tilbyr Weebly også to andre skjemaelementer – RSVP -skjema og undersøkelseselement.

Relatert: Hvordan legge til kontaktskjema på WordPress -nettsteder?

"Kontaktskjema" er et av dra -og -slipp -elementene gruppert under "Grunnleggende" gruppe i Weebly nettstedredaktør. Når du har lagt til kontaktskjemaet i innholdsområdet og klikket på det, kan du se elementkolonnen i Weebly -editoren automatisk skifte til skjemafelt. Alle skjemafeltene er klassifisert i følgende tre kategorier:

Skjemafelt:

  • Kort tekstboks
  • Stor tekstboks
  • Alternativer -knapper
  • Nedtrekksboks
  • Kryss av
  • Filopplasting for Pro -bruker
  • Navn, e -post, adresse og telefonnummer

Struktur:

  • Skillevegg og avstandsstykke

Grunnleggende:

  • Tittel, tekst, bilde og innebygd kode

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Dra og slipp felt i Weebly -form

Som vanlige elementer kan du dra hvert felt og legge det til i skjemaet. Hvis du klikker på skjemaelementet, vises tre alternativer Vis oppføringer, skjemalternativer og lagre.

Skjemaalternativer

Klikk på skjemaalternativknappen for å se avanserte skjemalternativer som vises på bildet nedenfor.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Alternativer for kontaktskjema i Weebly

Tilpassingsalternativene som er tilgjengelige er:

  • Skjema navn – Skriv inn navn på skjemaet. Når du har flere skjemaer på nettstedet ditt, kan du enkelt bruke skjemanavnene til å se innsendingene basert på skjemanavnet.
  • Send e -post til – Dette er en e -post -ID der du vil motta et øyeblikkelig varsel når det er skjemainnsending.
  • Bekreftelsesmelding etter innsending – Med bekreftelsesalternativet kan du vise et automatisk svar til brukeren etter å ha sendt skjemaet. Du kan enten angi en tekstbekreftelsesmelding eller koble til hvilken som helst nettside. Tekstmeldingen vises i skjemaområdet etter innsending. Du kan koble til hvilken som helst ekstern webside eller din egen side eller butikkside i linkalternativet som vises etter innsending.
  • Avstand – Brukes til å justere avstanden mellom øvre og nedre marg på skjemaelementet.
  • Send -knapp – Brukes til å justere innsendingsknappen til venstre, midt eller høyre med hensyn til skjemabredden. Du kan også skrive inn hvilken som helst gratis tekst som "Kontakt" i stedet for å sende på knappelementet.

Merk: Generell praksis er å opprette en takkeside på nettstedet ditt med den tilpassede informasjonen du vil vise til brukerne og koble den til skjemaet. Takk siden vil vises når brukeren sender inn skjemaet og gir brukeren flere muligheter til å utforske koblingene på takkesiden.

Tilpassing av feltnivå

Hvis du klikker inne i et av skjemafeltene, vises en popup -boks som gjelder for dette feltet. Du kan endre feltnavnet, gjøre det valgfritt eller nødvendig, legge til instruksjoner for fylling og justere avstanden til feltet i skjemaet. Hvis du oppretter et obligatorisk felt, vises et stjernemerke på toppen av feltnavnet som angir brukeren som er et obligatorisk felt. Hvis du ikke fyller ut de obligatoriske feltene, tillater du ikke at skjemaet sendes inn og viser meldingen "Vennligst korriger de uthevede feltene", og feltet vil bli markert med rød farge.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Instruksjon og obligatorisk felt

Instruksjoner vil hjelpe brukerne med hvordan de skal fylle ut det aktuelle feltet, og hjelpemeldingen vil bli vist når filen er fokusert.

Noen av feltene som "Alternativer -knapper", "Avmerkingsbokser" og "Nedtrekksboks" vil ha flere alternativer som vist på bildet nedenfor. Du kan angi så mange som tilpassede alternativer for brukervalg eller velge det fra listen over forhåndsdefinerte alternativer. De forhåndsdefinerte alternativene har en lang liste med valg som sammenligning, kjønn, amerikanske stater, hvor lenge, hvor ofte, månedene i året, ukedager, etc.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Bruke alternativknapper i Weebly -kontaktskjemaet

Skjemalternativer for pro -bruker

Pro -brukere vil ha følgende tilleggsskjemafunksjoner:

  • Filopplasting – Dette er et profffelt som hjelper brukeren å sende inn et skjema med en opplastet fil. Dette vil være en veldig nyttig funksjon, slik at brukeren kan laste opp flere dokumenter eller skjermdumper som igjen vil hjelpe deg med å gi bedre støtte. 20 MB er den maksimale filstørrelsen som kan lastes opp i et skjema.
  • Legge til skjema i bunntekst – I tillegg til å legge til skjema i nettstedets innholdsområde, kan pro -brukere også legge til et skjema i bunntekstområdet. Kontaktskjema kan legges til i bunnteksten som vises på alle sidene på et nettsted.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Filopplasting i Weebly -skjema

Vise skjemaoppføringer

Skjemaoppføringer kan sees på flere måter, og det nødvendige svaret kan sendes til innsenderen tilsvarende.

  • Klikk på skjemaet for å se "Vis oppføringer" -knappen, og klikk på det som åpner et nytt vindu med alle skjemainnleveringer.
  • Du vil også motta et e -postvarsel når det er skjemainnlevering.
  • Se skjemainnleveringene direkte fra oversikten.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Se kontaktskjemaoppføringer i Weebly Dashboard

Tilpass triks for Weebly -kontaktskjema

Justere størrelsen på kontaktskjemaet

Størrelsen på Weebly -skjemaet kan ikke justeres som standard. For å endre størrelsen, plasser "Spacer" -elementene ved siden av skjemaelementet og juster bredden på skjemaet.

Redusere søppelpostskjemainnleveringer

Et av de største problemene med Weebly -kontaktskjemaet er spam -innsendingene – spammere og roboter sender inn søppelposter og oversvømmer postboksen din. Siden Weebly ikke tilbyr CAPTCHA for kontaktskjema, vil håndtering av søppelpost være en irriterende oppgave for nettstedseiere. Det er to måter å redusere søppelpost uten å endre koden:

  1. Legg til "Avmerkingsbokser" på kontaktskjemaet og gjør det til et obligatorisk felt. Du kan gjøre "Feltetittel" til "Jeg er ikke en robot" og legge til en "Alternativer" som "Jeg er et menneske". Dette tvinger brukerne til å merke av i boksen, og skjemaet kan ikke sendes inn uten å merke det.
  2. På samme måte kan du bruke “Option Buttons" og endre “Field Title” til noe som “CAPTCHA Check” eller “Human Check” og gjøre det til et obligatorisk felt. Legg til et enkelt alternativ som "Jeg er et menneske, ikke en robot" eller hvilken som helst tekst du vil ha. Nå må brukeren velge alternativet for å sende kontaktskjemaet.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Legg til manuell Captcha i Weebly kontaktskjema

I begge alternativene ovenfor vil de automatiske robotene ikke velge avmerkingsboksen eller alternativknappen og dermed stoppe spamoppføringene.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Forhindre spam -innsendinger i Weebly -kontaktskjemaet

Endre bakgrunnsfarge på Weebly -kontaktskjemaet

Mange brukere sendte oss en e -post og spurte om måten å endre bakgrunnsfargen på Weebly -kontaktskjemaet, og her er hvordan du gjør det. Hvert kontaktskjema vil ha et ID #etter publisering av nettstedet. Høyreklikk på kontaktskjemaet på et publisert nettsted og klikk på alternativet "Inspiser" eller "Inspiser element" og finn ut skjemaet #id -nummeret for kontaktskjemaet som vist på bildet nedenfor. Skjemaet #id vil være omtrent "form-1234567890123" og vil være unikt for hvert skjema.

Legg til og tilpasse kontaktskjema på Weebly -nettstedet

Finne kontaktskjema #ID i Weebly

Gå nå til Weebly editor og legg til CSS -koden nedenfor under "Header Code" -delen på siden du har et kontaktskjema på. Ikke glem å erstatte skjemaet #id med ditt eget #id.

<style> #form-632853235871630597 { background-color: beige; padding: 15px 15px 0 15px; border-radius: 10px; border: 1px solid rgba(158, 158, 158, 0.22); } </style>

Hvis du har mer enn ett skjema, kan du tilpasse dem med forskjellige bakgrunnsfarger eller legge til alle ID -er for ID som #ID1, ID2 og ha de samme stilene for alle skjemaene. Hvis du har flere skjemaer, kan du legge til CSS under "Innstillinger> SEO> Overskriftskode " -delen eller under "main.less" -fil.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon