Přeskočit na obsah

Jak udělat poptávkový formulář v iOS ve SwiftUI

Poptávkový formulář ve SwiftUI s výběrem služby a rozpočtu a termínem, který vám každou poptávku pošle e-mailem a zákazníkovi automaticky potvrdí přijetí – bez backendu.

Aktualizováno:

Video je v angličtině; text níže obsahuje celý návod.

V tomto návodu postavíte poptávkový formulář ve SwiftUI s nativními pickery: služba, rozpočet a termín, k tomu popis. Vy dostanete strukturovaný e-mail, zákazník automatické potvrzení.

Budete potřebovat: bezplatný účet Frontmail, projekt v Xcode se SwiftUI a zhruba dvacet minut.

1. Připojte schránku a vytvořte šablony

  1. E-mailové služby → Přidat službu: připojte svou schránku nebo poskytovatele, Nastavit jako výchozí, Ověřit a uložit.
  2. Šablony → Z galerie → Poptávka (kategorie Byznys) → Použít šablonu.
  3. Z galerie → Automatická odpověď: díky za zprávu → Použít šablonu; nastavte výchozí hodnoty company_name a response_time a pak ji v šabloně poptávky vyberte v Nastavení → Doručování → Šablona automatické odpovědi.

Šablona poptávky potřebuje name, email, service a details; phone, company, budget a deadline (YYYY-MM-DD) jsou nepovinné. service a budget přijímají jen hodnoty ze záložky Parametry – v aplikaci použijte stejné řetězce. Příklad kódu používá hodnoty anglické šablony; česká šablona má Web, E-shop, Mobilní aplikace, Konzultace, Jiné a Do 100 tis. Kč, 100–500 tis. Kč, 500 tis. – 1 mil. Kč, Nad 1 mil. Kč. Aplikace musí posílat přesně hodnoty ze záložky Parametry.

2. Povolte mobilní aplikace a zapněte CAPTCHA

  • Zabezpečení → Mobilní aplikace → Povolit mobilní aplikace → Uložit.
  • Šablona poptávky → Nastavení → Ochrana → Vyžadovat CAPTCHA (Turnstile) – sdílený mobilní widget Frontmailu, žádné klíče nepotřebujete.

3. Přidejte balíček

File → Add Package Dependencies… → https://github.com/frontmail-dev/frontmail-swift → přidejte Frontmail do svého targetu a z části o Turnstile v dokumentaci iOS SDK si zkopírujte TurnstileView.

4. Postavte formulář

import SwiftUI
import Frontmail

let frontmail = try! Frontmail(publicKey: "pk_…")

let services = ["Website", "E-shop", "Mobile app", "Consulting", "Other"]
let budgets = ["Under $5k", "$5k–20k", "$20k–50k", "Over $50k"]

struct QuoteRequest: Encodable {
    let name: String
    let email: String
    let service: String
    let budget: String?   // nil is left out of the email
    let deadline: String? // YYYY-MM-DD
    let details: String
}

struct QuoteView: View {
    @State private var name = ""
    @State private var email = ""
    @State private var service = services[0]
    @State private var budget = ""
    @State private var hasDeadline = false
    @State private var deadline = Date()
    @State private var details = ""
    @State private var widget: Turnstile.Widget?
    @State private var token: String?
    @State private var resetID = 0
    @State private var info = ""

    var body: some View {
        Form {
            Section {
                TextField("Name", text: $name)
                TextField("Email", text: $email)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
            }
            Section {
                Picker("What do you need?", selection: $service) {
                    ForEach(services, id: \.self) { Text($0) }
                }
                Picker("Budget", selection: $budget) {
                    Text("Not sure yet").tag("")
                    ForEach(budgets, id: \.self) { Text($0) }
                }
                Toggle("I have a deadline", isOn: $hasDeadline)
                if hasDeadline {
                    DatePicker("Deadline", selection: $deadline, in: Date()..., displayedComponents: .date)
                }
                TextField("Project details", text: $details, axis: .vertical)
                    .lineLimit(4...8)
            }
            if let widget {
                TurnstileView(widget: widget, size: .flexible, resetID: resetID) { event in
                    if case let .token(t) = event { token = t } else { token = nil }
                }
                .frame(height: Turnstile.Size.flexible.recommendedHeight)
            }
            Button("Request a quote") { Task { await send() } }
                .disabled(token == nil)
            Text(info)
        }
        .task { widget = try? await Turnstile.widget(client: frontmail) }
    }

    private func send() async {
        guard let widget, let token else { return }
        defer { self.token = nil; resetID += 1 } // a token works only once
        let request = QuoteRequest(
            name: name,
            email: email,
            service: service,
            budget: budget.isEmpty ? nil : budget,
            deadline: hasDeadline ? deadline.formatted(Date.ISO8601FormatStyle(timeZone: .current).year().month().day()) : nil,
            details: details
        )
        do {
            _ = try await frontmail.send(
                templateID: "tpl_…",
                params: request,
                options: SendOptions(turnstileToken: token, turnstileKey: widget.turnstileKey)
            )
            info = "Thanks! We’ve emailed you a confirmation."
        } catch let error as FrontmailError {
            info = error.message
        } catch {
            info = error.localizedDescription
        }
    }
}

Nepovinné vlastnosti s hodnotou nil se vůbec nezakódují, takže se v e-mailu nikdy neobjeví prázdné řádky.

5. Vyzkoušejte to

Odešlete poptávku se svou adresou jako e-mailem zákazníka: přijde vám poptávka i potvrzení a obojí se objeví v sekci Historie.

Poptávka s potvrzením stojí dva kredity. Když kredity dojdou, poptávky se přijmou jako .held a po dobití odejdou automaticky.

Další kroky

  • Zapněte v nastavení šablony Sběr kontaktů a sestavte si seznam všech, kdo poptávali.
  • Přiložte zadání nebo fotky přes SendOptions(attachments: [.data(…)]) – viz dokumentace SDK.
Všechny návody
  • Video, 42 s

    iOS (Swift)Kontaktní formulář

    Jak udělat kontaktní formulář v iOS ve Swiftu a SwiftUI

    Kontaktní formulář ve SwiftUI, který vám každou zprávu pošle e-mailem přes vaši vlastní schránku – bez backendu a bez SMTP hesla v aplikaci. Používá Swift balíček Frontmail.

  • Video, 42 s

    WebPoptávkový formulář

    Jak udělat poptávkový formulář na web

    Poptávkový formulář se službou, rozpočtem a termínem, který vám do schránky přijde jako přehledný e-mail – a zákazníkovi automaticky pošle potvrzení. Bez backendu, v čistém HTML.

  • Video, 42 s

    FlutterPoptávkový formulář

    Jak ve Flutteru udělat poptávkový formulář

    Poptávkový formulář ve Flutteru s výběrem služby, rozpočtem a termínem, který vám každou poptávku pošle e-mailem a zákazníkovi automaticky potvrdí přijetí – bez backendu.