Why forms capture structured data in iOS Swift - Build It to Prove It

Build: Simple Contact Form

This screen lets users enter their name, email, and message. When they tap Submit, the app collects the data in a structured way and shows a confirmation.

Target UI

-------------------------
| Simple Contact Form   |
|-----------------------|
| Name: _______________ |
| Email: ______________|
| Message: ____________ |
|                       |
|       [Submit]         |
-------------------------

Add three text fields: Name, Email, Message

Add a Submit button below the fields

When Submit is tapped, collect the data into a struct

Show an alert confirming the data was captured

Starter Code

iOS Swift

import SwiftUI

struct ContactFormView: View {
    // TODO: Add @State properties for name, email, message

    var body: some View {
        NavigationView {
            Form {
                // TODO: Add TextFields for Name, Email, Message

                // TODO: Add Submit button
            }
            .navigationTitle("Simple Contact Form")
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI

struct ContactData {
    var name: String
    var email: String
    var message: String
}

struct ContactFormView: View {
    @State private var name = ""
    @State private var email = ""
    @State private var message = ""
    @State private var showingAlert = false
    @State private var capturedData: ContactData? = nil

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("Your Info")) {
                    TextField("Name", text: $name)
                        .autocapitalization(.words)
                        .disableAutocorrection(true)
                    TextField("Email", text: $email)
                        .keyboardType(.emailAddress)
                        .autocapitalization(.none)
                        .disableAutocorrection(true)
                }
                Section(header: Text("Message")) {
                    TextField("Message", text: $message)
                }
                Button("Submit") {
                    capturedData = ContactData(name: name, email: email, message: message)
                    showingAlert = true
                }
                .disabled(name.isEmpty || email.isEmpty || message.isEmpty)
            }
            .navigationTitle("Simple Contact Form")
            .alert("Data Captured", isPresented: $showingAlert) {
                Button("OK", role: .cancel) { }
            } message: {
                if let data = capturedData {
                    Text("Name: \(data.name)\nEmail: \(data.email)\nMessage: \(data.message)")
                }
            }
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

This form uses three text fields to collect user input for name, email, and message. Each field is bound to a @State variable to keep track of what the user types.

When the Submit button is tapped, the app creates a ContactData struct instance that holds the entered data in a clear, organized way. This shows how forms capture structured data, making it easy to use or send elsewhere.

An alert then confirms the data was captured by showing the entered values. The Submit button is disabled until all fields have some text, ensuring complete data.

Final Result

Completed Screen

-------------------------
| Simple Contact Form   |
|-----------------------|
| Your Info             |
| Name: John Doe        |
| Email: [e-mail]|
| Message               |
| Hello, this is a test.|
|                       |
|       [Submit]         |
-------------------------

[Alert]
Data Captured
Name: John Doe
Email: [e-mail]
Message: Hello, this is a test.
[OK]

User types their name, email, and message into the fields.

Submit button becomes enabled when all fields have text.

Tapping Submit collects data into a struct and shows an alert with the entered info.

User taps OK to dismiss the alert.

Stretch Goal

Add validation to check if the email entered looks like a real email before enabling Submit.

💡 Hint

Use a simple check for the presence of '@' and '.' characters in the email string.