Den? Kontakta oss? formuläret blir för ofta kastat in som en snabb eftertanke snarare än ett element som sätter tonen för kommunikationen. Idag tar vi en titt på flera enkla tekniker som du kan använda för att ta dina kontaktformulär från tråkigt till strålande.
Längs vägen ser vi flera exempel på bra kontaktformulär tillsammans med resurser om hur man återskapar effekten på din egen webbplats.
1: designa den
Du tror att det här säger sig själv, men jag tittade på massor av? Kontakta oss? sidor och blanketter för att förbereda sig för det här inlägget och 90% eller mer av dem använde standardwebbläsarens användargränssnitt (vita, fyrkantiga hörn, tråkiga). Det här är inte nödvändigtvis en dålig sak, men om du letar efter ett sätt att krydda din kontaktsida är formulärfälten i sig ett bra ställe att börja. Försök ändra fälten på fälten för att bättre matcha din webbplats, avrunda hörnen eller lägga till slag som exemplen ovan. En liten bit av styling går långt för att ge dina formulär ett specialbyggt utseende.
Användbar resurs:
Om du behöver hjälp, kolla in det här inlägget av 40 CSS Web Form Style Tutorials för webbutvecklare.
2: Ge det fokus
Besök webbplatsen ovan och börja fylla i kontaktformuläret. Som du gör så dimmerar webbplatsen så att kontaktformuläret är det enda fokuset på din uppmärksamhet. Detta är ett vackert sätt att se till att användare inte börjar kontakta dig bara för att bli distraherad av annat innehåll. Det är också ett bra sätt att få dina besökare att säga? Ooooh.?
Användbar resurs:
Sluta med att bygga Internet för att lära dig att dimma innehållet med jQuery.
3: Gör det fånigt
Om du verkligen vill uppmuntra användare att kontakta dig, gör miljön runt kontaktformuläret vänligt och inbjudande. Detta gör att ditt företag verkar mer tillmötesgående och kommer omedvetet att göra dina besökare förväntade sig ett vänligt svar (var noga med att leverera en!). Exemplen ovan använder ljusa färger och dumma illustrationer för att uppnå denna uppgift, men gärna bli kreativ med typografi, ikoner eller något annat du kan tänka dig för att minska spänningen som någon kan känna att närma dig en fråga eller kommentar.
Användbar resurs:
Här är några super billiga, goofiga tecken från Graphic River för att komma igång.
4: Ge den en karta
Om din webbplats är för en? Tegel och murbruk? butik eller någon form av fysisk plats, är det absolut nödvändigt att integrera en karta i din kontaktsida så att potentiella kunder faktiskt kan hitta dig. Detta kan vara så enkelt som en stiliserad illustrerad karta eller så fullt ut som en interaktiv Google Map. Exemplen ovan tar det interaktiva tillvägagångssättet (enligt min mening, det bättre sättet att gå), och det andra integrerar även anpassade färdriktningar, som framgår tydligt på toppen av kartan.
Användbar resurs:
Om du behöver hjälp, kolla in den här gratis Google Map Generator för din hemsida.
5: Gör det smart
För att se vad jag menar med? Smart? Besök de två exemplen ovan. Den första kontrollerar innehållsanvändarna skriver in i fältet för att se till att det är korrekt (dvs. formvalidering). Till exempel, om du skriver? Joe? i fältet E-postadress, berättar formuläret att du anger en giltig e-postadress. Det andra exemplet genomför enkelt formulär som framhäver kreativt. Genom att göra användarens nuvarande fält på ett visst sätt, hjälper du dem att hålla fokus och position i formuläret. Det är en liten användbarhetsknapp som verkligen kan hjälpa till med någon som kan ha problem med att se vilket fält de är i.
Användbara resurser:
Har ingen aning om hur man får dig att formulära smart? Här är några formvalideringsresurser som du kan välja mellan:
- Verkligt lätt formulär validering
- Handledning: Formulering med JavaScript
- Gratis formulärvalideringsskript (Apple Developer Connection)
6: Gå igenom dem
Om det finns specifik information som du behöver från användaren, t.ex. budgetkrav eller intresseområde, räkna inte med användaren inklusive den, även om du gör det tydligt att informationen måste finnas där. Använd istället kryssrutor, radioknappar och dropdowns som ett sätt att se till att de inte lämnar ut det. Dessa verktyg hjälper inte bara användarna att komma ihåg allt som ska inkluderas, men gör i allmänhet kontaktprocessen mycket enklare genom att eliminera mycket av skrivarbetet.
Användbara resurser:
Kolla in den här fullständiga listan med användargränssnitt, uppdelade på webbläsare och operativsystem.
7: animera det
Båda sidorna ovan använder en animerad rullgardinsmeny för deras kontaktformulär. Om du placerar den här menyn direkt på hemsidan blir det mycket lätt för besökare att få tag på dig utan att behöva scrounging för kontaktinformation. Nedrullningsaspekten gör det möjligt att utföra den här uppgiften utan att lägga till röran på din hemsida. Observera att Blue Acorn-menyn faktiskt trycker ner innehållet på sidan medan Fred Mayas bilder över befintligt innehåll. Båda sätten fungerar bra, men jag föredrar Blue Acorn-metoden eftersom det inte hindrar någonting och är lättare att läsa utan insynen.
Användbara resurser:
För att få en liknande effekt på din webbplats, kolla in Noupe's handledning om att skapa Sexy Drop Down Menu w / jQuery & CSS.
8: Tema Det
Mitt standardsvar för alla saker kreativa: Kom precis fram med ett smart tema! Att skapa ett gränssnitt återspeglar någonting som människor redan är bekanta med kan inte bara ge bra designidéer, men kan också öka användbarheten (det kan också minska användbarheten om du inte är försiktig). I exemplet ovan används en iPod touch som gränssnitt för kontaktformuläret. Försök att tänka på något unikt för din! Möjligheter inkluderar allt från en post-it-anteckning till ett visitkort.
9: Gör det Conversational
Exemplet ovan var en av de mest unika idéerna som jag kom över. Typ av kontaktformulär Mad Libs, användaren ges några meningar och bad om att fylla i blankorna.Detta försäkrar att du får informationen som du vill, men presenteras för användaren, är ett mycket vänligare format än vanliga gamla fält med etiketter. Visst är det antagligen mindre användbart eftersom det innebär mer läsning av användarens sida, men det blir en guldstjärna i roligt!
10: Gör det överdimensionerat
Ett enkelt sätt att få en användares uppmärksamhet med allt du utformar är att göra det mycket större än de skulle förvänta sig. Efter att ha använt ett gäng kontaktformulär av normal storlek verkade den ovan på webbplatsen ganska stor. Överraskningen var en trevlig men ändå som jag älskade den överdimensionella känslan av formerna och texten. Jag är inte exakt säker på varför, men av en eller annan anledning känner sig stora, vänliga!
Slutsats
Du borde nu spränga med nya idéer om hur man gör en egen kontaktform en stolthet. Gå vidare och skapa fantastiska kontaktsidor och berätta om dem i kommentarerna nedan. Också vara säker på att låta oss veta vilka av ovanstående exempel var din favorit tillsammans med dina egna bra idéer för hur man förbättrar dem.