Så här skapar du ett WordPress-formulär med en datumväljare (enkelt sätt)

Vill du skapa ett WordPress-formulär med en datumväljare?

Ett fält för datumväljare är ett bekvämt sätt att genomföra datumrelaterad information i dina WordPress-formulär. Du kanske till exempel behöver veta dina användares födelsedatum, eller så vill du att de enkelt ska kunna schemalägga en tid för dina tjänster via dina formulär.

I den här artikeln visar vi dig hur du enkelt kan skapa ett WordPress-formulär med en datumväljare.

Varför skapa ett WordPress-formulär med en datumväljare?

Ett datumväljarfält i ett WordPress-formulär är användbart när du vill att användare ska mata in datum. Vanliga exempel inkluderar:

• Registreringsformulär som ber användare att enter sina födelsedatum.
• Orderformulär för att välja datum och tid för delivery av en order.
• Hyresobjektsformulär för att välja ett hämtnings- eller inlämningsdatum för ett hyresobjekt.
• Callback request forms to allow users to let you know when they want to be contacted about your products or services.
• Leave request-formulär för att allow anställda att enter start- och slutdatum för sin ledighet.
• Mötes- eller bokningsformulär för webbplatser för boende eller tjänster.

Ett input field för datum är ett mycket enklare sätt för användare att inserta datum jämfört med att skriva ut dem manuellt. Det säkerställer att datumformatet förblir konsekvent i alla formulär, vilket minskar antalet error och förbättrar användarupplevelsen.

Med detta sagt, låt oss se hur du enkelt skapar ett WordPress-formulär med en datumväljare. Du kan använda dessa länkar för att navigera genom den här artikeln:

Step 1: Installera WPForms tillägg och välj en template

Det första steget är att installera WPForms. Det är det bästa Contact Form-pluginet för WordPress på marknaden som gör det superenkelt att skapa alla sorters formulär på din WordPress site, inklusive formulär med datumväljarfält.

Om du vill ha mer detaljerade instruktioner kan du läsa vår Step-by-Step guide om hur du installerar ett tillägg till WordPress.

Du kan se vår kompletta WPForms review för mer detaljer.

Efter aktivering, heada över till WPForms ” Add New page från din WordPress dashboard.

Då kommer du till sidan ”Select a Template”.

Innan du väljer en template är det en bra idé att namnge ditt WordPress-formulär så att du enkelt kan identifiera det senare.

Om du rullar ner ser du en massa förgjorda formulärmallar som är tillgängliga här, varav många redan har datumintervallfältet inkluderat.

För exemplets skull använder vi mallen Simple Contact Form och addar sedan datumfältet till den. Men du får gärna välja en template som passar dig bäst.

När du har gjort ditt val klickar du bara på knappen ”Use Template”.

Step-by-Step 2: Add Date Picker Field till ditt WordPress-formulär

Nu kommer du att komma till WPForms form builder. You will notice the field options in the left column and a form preview on the right side of the screen.

Som standard har mallen Simple Contact Form endast fältet för namn, email address och comments add to formuläret.

I demonstrationssyfte visar vi hur du addar ett datumfält till ditt WordPress-formulär. Men om din template redan har det, kan du hoppa över till edit-delen av detta steg.

Vad du behöver göra är att rulla ner till Fancy Fields section i den vänstra columnen, där du kommer att se fältet ”Date / Time”.

Det är bara att drag and drop det fältet till den plats där you vill ha det i ditt formulär. I den här tutorialen har vi placerat det precis under Email-fältet.

När du har gjort det klickar du på fältet ”Date/ Time” för att editera det. Då öppnas tabben ”Field Options” på vänster sida av din vy.

Härifrån kan du ändra etiketten för fältet, som har ”Datum / tid” som standard. Vi kommer att använda ”Alternativ tid för anrop” för vårt fält.

Du kan också ändra fältets format med hjälp av dropdown-menyn Format. Alternativen är Datum och tid, Datum eller Endast tid. Detta kan vara användbart om du bara vill använda ett datumfält utan tidsfält för att samla in användarnas födelsedatum.

Utöver det kan du fylla i texten description för att ge mer information om vad användaren behöver enter i fältet.

Slutligen kan du kontrollera boxen ”Required” om du vill göra detta till ett obligatoriskt fält. Det innebär att användaren måste välja ett datum och en tid innan han eller hon kan submita formuläret.

När du har gjort det klickar du bara på knappen ”Save” högst upp för att lagra dina formulärinställningar.

Step-by-Step 3: Konfigurera de avancerade alternativen för datum- och tidväljaren

Som standard kommer fältet för val av datumintervall i ditt WordPress-formulär att vara en kalender med en dropdown-meny för tid bredvid.

Det aktuella datumet kommer att väljas, men användaren kan ändra det för att välja ett annat datum. Datumets format är månad/dag/år.

I dropdown-rutan för tid är 12-timmarsklockan med 30-minutersintervall standard.

Användarna kan sedan välja en tidsperiod som passar dem bäst.

I vissa fall kanske du vill ändra inställningarna för datumväljaren. Till exempel kanske ditt land följer formaten dag/månad/år eller 24 timmar för datum och tid i stället för standardformaten.

För att göra detta måste du byta till tabben ”Advanced” högst upp i panelen på vänster sida.

Här kan du justera storleken på datumväljarfältet. Sedan, i Date section, kan du ändra datumintervallet från en kalender till en dropdown-meny för datum.

Att byta datumkalenderväljaren till en dropdown-meny för datum är en bra idé om formuläret har limit på utrymme och kalendern ser ganska liten ut.

Så här gillar vi dropdown-menyn för datum:

Under det kan du ändra datumformatet från månad/dag/år (1/31/2024) till dag/månad/år (31/1/2024) eller månad dag, år (31 januari 2024).

Om du väljer kalenderdatumväljaren kan du också insert placeholder-text i fältet ”Date”. Du kan fylla i den med ditt datumformat för att låta användarna veta vilket format du använder så att de inte blir förvirrade.

Dessutom kan du aktivera ”Limit Days”-knappen för att justera det datumintervall som kan väljas. Detta är användbart om you bara runar dina tjänster under veckodagarna.

Du kan också gratis inaktivera tidigare datum för att förhindra att tidigare datum väljs.

Därefter går vi ner till ”Time” section för att ändra tidsväljaren.

Här kan du ändra intervallet till 15 minuter eller 1 timme i stället för 30 minuter. Det är också bra att skriva in placeholder-text här för att visa vilket format du använder.

Tidsväljaren har som standard en 12-timmarsklocka, men du kan byta till en 24-timmarsklocka om du föredrar det.

Du kan också gratis aktivera inställningen ”Limit Hours” för att ange start- och sluttider för dina tjänster. På så sätt kan användarna inte boka tid utanför dina öppettider.

Utöver det kan du enter ett CSS-klassnamn för datumintervallfältet. Det här är en avancerad och valfri funktion, men du kan använda den för att åsidosätta formulärets stil med hjälp av kod senare.

Sist men ej minst kan du dölja formulärfältets etikett och/eller underetikett om det behövs.

När du är nöjd med din new blankett kan du spara den genom att clicka på knappen ”Save” högst upp till höger på vyn.

Step-by-Step 4: Embed WordPress-formuläret på din website

Nu är du redo att add new formuläret med datumväljaren till din WordPress website. För att göra detta klickar du bara på knappen ”Embed” högst upp i form buildern.

En popup visas där du uppmanas att välja en befintlig sida att lägga till formuläret till eller skapa en ny sida för formuläret from scratch. Båda alternativen använder block editor, så stegen är ganska lika.

Add the WPForms Block to an Existing or New Page (WPForms-blocket till en befintlig eller ny page)

Om du vill infoga formuläret i en befintlig page klickar du på knappen ”Select Existing Page”. Därefter väljer du en av de pages som du redan har på din blogg eller website i WordPress och klickar på ”Let’s Go!

Om du vill add formuläret till en ny page klickar du bara på knappen ”Create New Page”.

Ge sedan din new page ett namn och click ”Let’s Go!”.

Båda dessa metoder kommer att ta dig till block editor, där du kommer att se några instruktioner om hur du lägger till WPForms-blocket.

Klicka först på knappen ”+” add block.

Skriv sedan ”WPForms” i blockets search-fält.

Dra och släpp blocket där det passar bäst på page.

Allt du behöver göra nu är att clicka på dropdown menyn.

Sedan väljer du det formulär som du just skapade.

I Block-inställningarnas sidebar kan du customize formulärfältets, etikettens och knappens stilar så att de ser snyggare ut med ditt WordPress-tema.

You can change each element’s size, border radius, and colors.

You can now click the ’Update’ or ’Publicera’ button to make the form live on your website.

Det ska se ut ungefär så här på din WordPress website:

Om du vill infoga formulärwidgeten i ett post i stället för en page kan du skapa ett new post eller öppna ett befintligt i block editor.

Följ sedan bara samma steg för att lägga till WPForms-blocket på en page som i den här metoden.

Add WPForms Block till ett Widget-Ready Area

Om du använder ett klassiskt WordPress theme, kanske du vill displayed your form in a widget-ready header, footer, or sidebar area. Detta kan vara en bra idé om your formulär är ganska kort och inte tar upp för mycket utrymme.

Note: Om du använder ett block theme kommer den här metoden inte att fungera för din website.

För att göra detta, gå bara till Appearance ” Widgets från WordPress admin area. Navigera sedan till ditt önskade widget-klara område och klicka på den vita ”+” add block-knappen inuti den. Efter det kan du searcha efter WPForms block.

Om du ser två alternativ kan du välja vilket som helst eftersom båda gör samma sak.

Gilla den tidigare metoden och välj det formulär som du skapade tidigare. I sidebaren Block settings kan du konfigurera designen så att den passar bättre in i ditt WordPress theme.

När du är nöjd med editen klickar du bara på knappen ”Update”.

Så där ja!

Så här ser vårt formulär ut längst ner i ett blogginlägg i WordPress:

Embed ditt WordPress-formulär med en shortcode

Om WPForms block eller widget inte fungerar, kan du också add to your WordPress formulär med hjälp av en shortcode.

I popupen ”Embed in a Page” klickar du helt enkelt på länken ”use a shortcode”. Du kommer då att se en shortcode som du kan copy and paste till en page, post eller widget-ready area.

Mer information om hur du använder shortcodes finns i vår artikel om hur du lägger till en shortcode i WordPress.

Ultimata tips för att optimera ditt WordPress-formulär

Nu när du vet hur du addar ett datumfält till dina formulär, låt oss nu covera de bästa tipsen för att ta dina formulär till nästa nivå:

• Skicka bekräftelsemail till dem somskickar in formuläret – På så sätt får användarna en notification om att du utan problem har tagit emot deras bidrag och de glömmer inte vilket datum eller vilken tid de har valt.
• Godkänn onlinebetalningar i dina formulär – WPForms stöder populära betalningslösningar som gillar Stripe, PayPal, Square och Authorize.net. You can collect one-time or recurring payments, and there are no additional transaction fees.
• Make your longer forms conversational – If you have an event or user registration form that needs to genomför lots of information, then making it conversational can increase the form completion rate.
• Förhindra skräppost i kontaktformuläret – Du kan aktivera WPForms inbyggda antispamskydd och kontrollboxen reCAPTCHA för att filtrera skräppost i formuläret.
• Följ vår lista över bästa praxis för design av kontaktformulär – Den här guiden kan vägleda dig genom att designa det bästa WordPress-formuläret för att konvertera vanliga besökare till leads eller customers.
• Läsa vår expertguide om att skapa interaktiva formulär – Jared Atchison, medgrundare av WPForms, ger you tips om hur man gör formulär mer engagerande, från att använda villkorlig logik till att lägga till rich media content.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett WordPress-formulär med en datumväljare. Du kanske också vill kontrollera vår artikel om hur man skapar ett formulär med flera sidor i WordPress och vår ultimata lista över de bästa tilläggen för undersökningar i WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.