Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Visst är det frustrerande när användare skickar in formulär med datum i olika format? Vi har drivit många webbplatser med bokningsformulär, evenemangsregistreringar och schemaläggare för möten, så vi vet precis hur det känns.

Vissa besökare skriver ”01/03/2025”, andra skriver ”1 mars 2025” och snart får du ägna timmar åt att sortera bland förvirrande inlagor.

Vi har funnit att lägga till en korrekt datumväljare till dina WordPress-formulär eliminerar dessa huvudvärk helt och hållet. Istället för att låta användarna skriva in datum manuellt, ger en datumväljare ett enkelt kalendergränssnitt som håller allt konsekvent och felfritt.

Så låt oss gå igenom hur du skapar ett WordPress-formulär med en professionell datumväljare som dina besökare kommer att älska att använda.

How to Create a WordPress Form With a Date Picker

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

Efter att ha hanterat tusentals onlineformulär i WordPress har vi märkt att datumrelaterade formulärfält ofta är där saker och ting går fel. Faktum är att felaktiga datumformat är en av de främsta anledningarna till att vi ser formulärinlämningar misslyckas eller skapar förvirring.

Ett fält för datumväljare löser dessa vanliga problem och förbättrar användarupplevelsen. Vi har sett att det fungerar effektivt för:

  • 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.

Och det bästa av allt? En datumväljare säkerställer enhetlighet i alla inlagor. Nu slipper du fundera på om 03/04/2024 betyder 4 mars eller 3 april, ett problem som vi har stött på alldeles för ofta vid manuell datainmatning.

Med detta sagt, låt oss se hur du enkelt kan skapa ett WordPress-formulär med en datumväljare. Här är de steg vi kommer att täcka, och du kan använda snabblänkarna nedan för att navigera genom dem:

Steg 1: Installera WPForms-plugin-programmet

Vi har testat dussintals formulär- och datumväljarplugins genom åren, inklusive populära alternativ som Ninja Forms och Gravity Forms.

Men för att lägga till datumväljare har vi funnit WPForms vara den mest användarvänliga lösningen, särskilt för nybörjare som vill skapa professionellt utseende formulär utan att röra någon kod.

Förutom en datumväljare levereras WPForms med premiumfunktioner som villkorlig logik för att visa eller dölja fält baserat på användarens val och smarta kalkylatorer för att automatiskt hantera prisuppskattningar.

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

Först måste du installera WPForms på din webbplats. Om du vill ha detaljerade instruktioner kan du läsa vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Obs/observera: För den här guiden måste du använda en premium-version av WPForms, eftersom det är där datumväljarfältet är tillgängligt. Med det sagt, om du använder vår WPForms coupon, kan du få 50% rabatt på det vanliga priset.

Steg 2: Välj en formulärmall

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

Clicking Add New in WPForms inside the WordPress admin panel

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.

Naming a new form in WPForms

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”.

Clicking the Use Template button in WPForms

Proffstips: Om du driver en webbplats för boende och vill att användarna ska ange specifika datum för sin vistelse, kan du använda mallen Hotellbokningsformulär. Den innehåller två WordPress-fält för datumväljare: ett för ankomstdatumet och ett för avresedatumet.

Steg 3: Lägg till fält för datumväljare i 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.

Dragging and dropping the Date Time field to the form builder in WPForms

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.

Configuring the General settings of a form in WPForms

Steg 4: Konfigurera inställningarna 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.

The default Date Time picker calendar in WPForms

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.

The default time dropdown picker in WPForms

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.

Choosing the Date Dropdown type in WPForms

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:

An example of WPForms' date dropdown menu

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.

Configuring the date picker's advanced settings in WPForms

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.

The Limit Days and Disable Past Dates settings for the Date Time field in WPForms

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.

Configuring the advanced settings of the time picker field in WPForms

Steg 5: Bädda in WordPress-formuläret på din webbplats

Nu är du redo att lägga till ditt nya formulär med datumväljare på din WordPress webbplats. För att göra detta klickar du bara på knappen ”Bädda in” högst upp i formulärbyggaren.

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.

The Embed popup in WPForms

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!

Choosing an existing page to add a WPForms form to

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!”.

Creating a new page to insert the WPForms form into

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.

Clicking the add block button in the block editor to insert the WPForms block

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

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

Searching for the WPForms block in the block editor

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

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

Select a WPForms form to insert in the block editor

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.

The WPForms block settings sidebar in the block editor

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:

An example of a contact form with a date picker made with WPForms

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.

Adding the WPForms block in a widget-ready area

Gillar du den tidigare metoden markerar du helt enkelt formuläret som du skapade tidigare. I sidopanelen Block settings kan du konfigurera designen så att den passar bättre till din WordPress tema.

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

The WPForms widget settings sidebar

Så där ja!

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

An example of a WPForms form widget with a date picker field

Embed ditt WordPress-formulär med en shortcode

Om WPForms-blocket eller widget inte fungerar kan du också lägga till din WordPress-formulär med hjälp av en krótki kod.

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.

Clicking the use a shortcode link in the WPForms embed popup

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 lägger till en datumväljare i WordPress-formulär, låt oss gå igenom 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ärWPForms 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äretDu kan aktivera WPForms inbyggda antispamskydd och kontrollboxen reCAPTCHA för att filtrera skräppost i formuläret.
  • Skapa flerspråkiga formulär – Nå ut till olika målgrupper och öka webbplatsens tillgänglighet med formulär som visas på flera språk.
  • Följ vår lista över bästa praxis för design av kontaktformulärDen 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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4 kommentarerLeave a Reply

  1. Dennis Muthomi

    Hello, could there be a way to disable specific dates, like holidays, in the date picker field.
    It would be really useful for businesses that don’t operate on certain days.
    THANKS

    • WPBeginner Support

      The plugin’s support can help you set up excluding specific holidays that you want to include.

      Admin

  2. Alessandra Del Puglia

    hi, how can i do to disable certain days of the week?
    Thanks

    • WPBeginner Support

      Reach out to WPForms’ support for the current methods of limiting the days of the week :)

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.