TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

10

Det finns många enkla sätt att lägga till formulär på din Weebly -webbplats. Du kan använda standard Weebly "Kontaktformulär" -element, ansluta formulär från App Center och bädda in formulärkoder från tredje part. Som ett inbyggt element är Weeblys standard "Kontaktformulär" -element enkelt att integrera och hantera de mottagna formulärsändningarna enkelt via instrumentpanelen eller iPhone/ Android -appar. I den här artikeln kommer vi att diskutera funktionerna i standardelementet "Kontaktformulär" och sätten att anpassa det. Förutom kontaktformulär erbjuder Weebly också två andra formulärelement – RSVP -formulär och undersökningselement.

Relaterat: Hur lägger jag till kontaktformulär på WordPress -webbplatser?

"Kontaktformulär" är ett av drag -och -släpp -elementen grupperade under "Grundläggande" -gruppen i Weebly -webbplatsredigeraren. När du har lagt till kontaktformuläret i innehållsområdet och klickat på det kan du se elementkolumnen i Weebly -redigeraren automatiskt byta till formulärfält. Alla formulärfält är indelade i följande tre kategorier:

Formfält:

  • Kort textruta
  • Stor textruta
  • Alternativknappar
  • Listruta
  • Kryssrutor
  • Filöverföring för Pro -användare
  • Namn, e -postadress, adress och telefonnummer

Strukturera:

  • Avdelare och distans

Grundläggande:

  • Titel, text, bild och inbäddningskod

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Dra och släpp fält i Weebly -form

Precis som vanliga element kan du dra varje fält och lägga till det i ditt formulär. Genom att klicka på formulärelementet visas tre alternativ Visa poster, formuläralternativ och spara.

Formalternativ

Klicka på knappen formuläralternativ för att se avancerade formuläralternativ som visas på bilden nedan.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Alternativ för Weebly -kontaktformulär

De tillgängliga anpassningsalternativen är:

  • Formulärnamn – Ange namn på formuläret. När du har flera formulär på din webbplats kan du enkelt använda formulärnamnen för att visa inlagor baserade på formulärnamnet.
  • Skicka e -post till – Detta är ett e -post -id där du kommer att få en omedelbar varning när det finns formulärinlämning.
  • Bekräftelsemeddelande efter inlämning – Med bekräftelsesalternativet kan du visa ett automatiskt svar för användaren efter att du skickat in formuläret. Du kan antingen ange ett textbekräftelsemeddelande eller länka någon webbsida. Textmeddelandet visas inom formulärområdet efter inlämning. Du kan ansluta alla externa webbsidor eller din egen webbplats eller butiksida i länkalternativet som kommer att visas efter inlämning.
  • Avstånd – Används för att justera avståndet mellan övre och nedre marginaler för formelementet.
  • Skicka -knapp – Används för att justera skicka -knappen till vänster, mitt eller höger med avseende på din blankettbredd. Du kan också ange valfri fritext som "Kontakt" istället för att skicka på knappelementet.

Obs! Allmän praxis är att skapa en tacksida på din webbplats med den anpassade informationen du vill visa för användarna och länka den till formuläret. Tack -sidan visas när användaren skickar in formuläret och ger användaren mer möjlighet att utforska länkarna på tack -sidan.

Anpassning av fältnivå

Om du klickar in i något av formulärfältet visas en popup -ruta som gäller för det fältet. Du kan ändra fältnamnet, göra det valfritt eller krävs, lägga till instruktioner för fyllning och justera avståndet mellan fältet i formuläret. Att göra ett obligatoriskt fält visar ett stjärnmärke ovanpå fältnamnet som anger användaren som är ett obligatoriskt fält. Underlåtenhet att fylla i de obligatoriska fälten tillåter inte att formuläret skickas in och visar meddelandet "Rätt de markerade fälten" och fältet kommer att markeras med röd färg.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Instruktion och obligatoriskt fält

Instruktioner hjälper användarna hur de ska fylla i just det fältet och hjälpmeddelandet kommer att visas när filen är fokuserad.

Några av fälten som "Alternativknappar", "Kryssrutor" och "Rullgardinsmeny" kommer att ha ytterligare alternativ som visas på bilden nedan. Du kan ange så många som anpassade alternativ för användarval eller välja det från listan med fördefinierade alternativ. De fördefinierade alternativen har en lång lista med alternativ som jämförelse, kön, amerikanska stater, hur lång tid, hur ofta, månaders året, veckodagar, etc.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Använda alternativknappar i Weebly -kontaktformulär

Formalternativ för pro -användare

Pro -användare kommer att ha följande ytterligare formulärfunktioner:

  • Filöverföring – Detta är ett proffsfält som hjälper användaren att skicka in ett formulär med en uppladdad fil. Detta kommer att vara en mycket användbar funktion så att användaren kan ladda upp ytterligare dokument eller skärmdumpar som i sin tur hjälper dig att ge ett bättre stöd. 20 MB är den maximala filstorleken som kan laddas upp i ett formulär.
  • Lägga till formulär i sidfot – Förutom att lägga till formulär i webbplatsens innehållsområde kan pro -användare också lägga till ett formulär i sidfoten. Kontaktformulär kan läggas till i sidfoten som kommer att visas på alla sidor på en webbplats.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Filöverföring i Weebly -formulär

Visa formulärposter

Formulärposter kan ses på flera sätt och det önskade svaret kan skickas till insändaren i enlighet därmed.

  • Klicka på formuläret för att se “Visa poster" -knappen, klicka på vilket öppnar ett nytt fönster med alla formulärinsändningar.
  • Du kommer också att få en varning via e -post när det finns ett formulär.
  • Visa blanketterna direkt från instrumentpanelen.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Visa kontaktformulärsposter i Weebly Dashboard

Anpassa trick för Weebly -kontaktformulär

Justera storleken på kontaktformuläret

Storleken på Weebly -formuläret kan inte justeras som standard. För att ändra storlek, placera “Spacer” -elementen bredvid formulärelementet och justera formens bredd.

Minska inlämningen av skräppostformulär

Ett av de största problemen med Weebly -kontaktformuläret är skräpposten – spammare och bots skickar skräppostposter och översvämmar din postlåda. Eftersom Weebly inte erbjuder CAPTCHA för kontaktformulär kommer hantering av skräppost att vara en irriterande uppgift för webbplatsägare. Det finns två sätt att minska skräpposten utan att ändra koden:

  1. Lägg till "Kryssrutor" på kontaktformuläret och gör det till ett obligatoriskt fält. Du kan göra "Fältetitel" till "Jag är inte en robot" och lägga till en "Alternativartiklar" som "Jag är en människa". Detta kommer att tvinga användare att markera rutan och formuläret kan inte skickas in utan att markera det.
  2. Använd på samma sätt "Alternativknappar" och ändra "Fältets titel" till något som "CAPTCHA Check" eller "Human Check" och gör det till ett obligatoriskt fält. Lägg till ett enda alternativ som "Jag är en människa, inte en robot" eller vilken text du vill. Nu måste användaren använda alternativet för att skicka kontaktformuläret.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Lägg till manuell Captcha i Weebly -kontaktformuläret

I båda alternativen ovan kommer de automatiska robotarna inte att markera kryssrutan eller alternativknappen och stoppar därmed skräppostposterna.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Förhindra skräppost i Weebly -kontaktformulär

Ändra bakgrundsfärg på Weebly -kontaktformuläret

Många användare mailade oss och bad om sättet att ändra bakgrundsfärgen på Weebly -kontaktformuläret och här är hur man gör det. Varje kontaktformulär kommer att ha ett formulär #id efter publicering av webbplatsen. Högerklicka på kontaktformuläret på en publicerad webbplats och klicka på alternativet "Inspektera" eller "Inspektera element" och ta reda på formuläret #id -nummer för ditt kontaktformulär som visas på bilden nedan. Formuläret #id kommer att vara ungefär "form-1234567890123" och kommer att vara unikt för varje formulär.

Lägg till och anpassa kontaktformulär på Weebly -webbplatsen

Hitta kontaktformulär #ID i Weebly

Gå nu till Weebly -redigeraren och lägg till nedanstående CSS -kod under avsnittet "Rubrikkod" på sidan där du har ett kontaktformulär. Glöm inte att ersätta formuläret #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>

Om du har mer än ett formulär kan du anpassa dem med olika bakgrundsfärger eller lägga till alla formulär #ID som #ID1, ID2 och ha samma stilar för alla formulär. Om du har fler formulär lägger du till CSS under avsnittet "Inställningar> SEO> Rubrikkod " eller under "main.less" -fil.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer