Create a form in Elm

Elm is a functional programming language used to create the front end of websites. In 2012, Evan Czaplicki created Elm. It is capable of managing form interaction. Forms are an essential part of websites and web applications as they allow websites and applications to collect different types of user information. Forms allow users to interact with applications for account registration, feedback submission, etc.
This Answer will go through the process of creating a basic Elm form. The goal is to learn how to gather user data for certain purposes.

User form
User form

The Elm architecture

The architecture of Elm programming is often referred to as the Elm Architecture. It is a pattern for structuring Elm applications and follows the Model-View-Update (MVU).

There are three main components of Elm architecture:

  • Model: It is used to represent the application state. It is a data structure that holds the important information of the application.

  • View: It is used to render the current state of the model. It takes the model as a parameter and returns the HTML representation of the user interface.

  • Update: It is used to update the model. It takes the model’s current state and action to perform and returns the model with an updated state.

Getting started

A few fundamental things needed to be done to set up an application in Elm for form creation and submission:

Import the required modules

In the below code snippet, we import the basic modules, functions, attributes, etc., for form creation in Elm.

module Main exposing (..)
import Browser
import Html exposing (Html, div, input, label, text, button)
import Html.Attributes exposing (placeholder, value, style)
import Html.Events exposing (onClick, onInput)
import Regex

  • Browser: This module is used to create web applications.

  • Html: This module is used to create and manipulate HTML elements and handle different events. It is responsible for building the user interface (UI).

  • Regex: It is used in Elm for pattern matching and manipulating strings.

Define and initialize the Model

In the below code snippet, we’re defining our model.

type alias Model =
    { firstName : String
    , lastName : String
    , email : String
    , address : String
    , submitted : Bool
    , showResetMessage : Bool
    , emailValid : Bool
    , emailActive : Bool
    }
init : Model
init =
    { firstName = ""
    , lastName = ""
    , email = ""
    , address = ""
    , submitted = False
    , showResetMessage = False
    , emailValid = False
    , emailActive = False
    }

  • type alias: It defines the custom data type named Model with five fields where each field is of string type.

  • init: It is a function used to initialize the Model data structure. It will return the Model data structure with its initialized values.

Define the update function

In the below code snippet below, we define the update function which takes two arguments (msg, Model) and returns Model (updated state). It is responsible for updating the Model. It uses a pattern-matching technique to make sure the model is appropriately updated according to the message type that is received.

The update function handles various messages, such as updating the first name, last name, email, and address. It also resets input fields and sets a resets message when the “Reset” button is pressed.

  • case: It is used to examine the msg and match its type accordingly.

  • FNameInput newFName ->: If the msg type is FNameInput then it will update fname to newFName. Similarly, for other cases, it will also update the variables based on msg type.

  • SubmitForm ->: It will submit the data and display the message.

update : Msg -> Model -> Model
update msg model =
    case msg of
        FirstNameInput value ->
            { model | firstName = value }
        LastNameInput value ->
            { model | lastName = value }
        EmailInput value ->
            { model | email = value, emailValid = isEmailValid value, emailActive = True }
        AddressInput value ->
            { model | address = value }
        SubmitForm ->
            if model.emailValid then
                { model | submitted = True, showResetMessage = False, emailActive = False }  -- Reset reset message on submit
            else
                model
        ResetForm ->
            { model | firstName = "", lastName = "", email = "", address = "", submitted = False, showResetMessage = True, emailValid = False, emailActive = False }
update : Msg -> Model -> Model
update msg model =
    case msg of
        FNameInput newFName ->
            { model | fname = newFName }
        LNameInput newLName ->
            { model | lname = newLName }
        EmailInput newEmail ->
            { model | email = newEmail }
        
        AddressInput newAddress ->
            { model | address = newAddress }
        SubmitForm ->
            { model | message = "Form submitted successfully",  fname = "", lname = "", email = "", address = "" }
Update function to render changes

Define the view function

In the below code snippet, we define the view function. It takes the parameter Model and creates an HTML user interface. We can input the data into given fields, and clicking the “Submit” button displays the form submission message, and the “Reset” button is used to reset the form.

  • div []: It is used to create an HTML div element.

  • label []: It is used to label the input field.

  • style: It is used to define inline styles for better visualization.

  • input []: An input field is created with a placeholder relevant to the field. The current value is taken when the user types into this input field; it produces a message.

view : Model -> Html Msg
view model =
    div [ style "width" "300px", style "margin" "0 auto" ]
        [ div [ style "margin-bottom" "10px" ]
            [ label [] [ text "First Name" ]
            , input [ placeholder "Enter your first name", value model.firstName, onInput FirstNameInput, style "width" "100%" ] []
            ]
        , div [ style "margin-bottom" "10px" ]
            [ label [] [ text "Last Name" ]
            , input [ placeholder "Enter your last name", value model.lastName, onInput LastNameInput, style "width" "100%" ] []
            ]
        , div [ style "margin-bottom" "10px" ]
            [ label [] [ text "Email" ]
            , input [ placeholder "Enter your email", value model.email, onInput EmailInput, style "width" "100%" ] []
            , if not model.emailValid && model.email /= "" then
                div [] [ text "Invalid email address" ]
              else
                text ""
            ]
        , div [ style "margin-bottom" "10px" ]
            [ label [] [ text "Address" ]
            , input [ placeholder "Enter your address", value model.address, onInput AddressInput, style "width" "100%" ] []
            ]
        , button [ onClick SubmitForm, style "margin-right" "10px" ] [ text "Submit" ]
        , button [ onClick ResetForm ] [ text "Reset" ]
        , div [ style "margin-top" "10px" ]
            [ if model.showResetMessage then
                text "Form Cleared Successfully"
              else
                if model.submitted then
                    text "Form Submitted Successfully"
                else
                    text ""
            ]
        ]

Complete code

The complete code for the creation and submission of the form is given below in src/Main.elm. We can run the application by pressing the “Run” button. The “elm.json” file represents the dependencies.

{
    "type": "application",
    "source-directories": [
        "src"
    ],
    "elm-version": "0.19.0",
    "dependencies": {
        "direct": {
            "elm/browser": "1.0.1",
            "elm/core": "1.0.2",
            "elm/html": "1.0.0",
            "elm/time": "1.0.0",
            "elm/http": "2.0.0",
            "elm/json": "1.1.3",
            "elm/regex": "1.0.0"
        },
        "indirect": {
            "elm/url": "1.0.0",
            "elm/virtual-dom": "1.0.2",
            "elm/bytes": "1.0.8",
            "elm/file": "1.0.5"
        }
    },
    "test-dependencies": {
        "direct": {},
        "indirect": {}
    }
}
Form creation in Elm

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
YouTubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved