Jak udělat poptávkový formulář v Androidu v Kotlinu

V tomto návodu postavíte obrazovku pro poptávku v Jetpack Compose. Zákazník vybere službu a rozpočet, zadá termín a popis; vy dostanete strukturovaný e-mail a zákazník automatické potvrzení.

Budete potřebovat: bezplatný účet Frontmail, projekt pro Android s Compose 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 SDK

// app/build.gradle.kts
dependencies {
    implementation("dev.frontmail:frontmail:0.1.0")
}

Přidejte oprávnění INTERNET a zkopírujte pomocné funkce showTurnstile / resetTurnstile z části o Turnstile v dokumentaci Android SDK.

4. Postavte obrazovku

import android.webkit.WebView
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView
import dev.frontmail.Frontmail
import dev.frontmail.FrontmailException
import dev.frontmail.SendOptions
import dev.frontmail.Turnstile
import dev.frontmail.TurnstileWidget
import kotlinx.coroutines.launch
import java.time.LocalDate

val frontmail = Frontmail("pk_…")

val services = listOf("Website", "E-shop", "Mobile app", "Consulting", "Other")
val budgets = listOf("Under $5k", "$5k–20k", "$20k–50k", "Over $50k")

@OptIn(ExperimentalLayoutApi::class)
@Composable
fun Choices(options: List<String>, selected: String?, onSelect: (String?) -> Unit) {
    FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
        options.forEach { option ->
            FilterChip(
                selected = option == selected,
                onClick = { onSelect(if (option == selected) null else option) },
                label = { Text(option) },
            )
        }
    }
}

@Composable
fun QuoteScreen() {
    var name by remember { mutableStateOf("") }
    var email by remember { mutableStateOf("") }
    var service by remember { mutableStateOf<String?>(services.first()) }
    var budget by remember { mutableStateOf<String?>(null) }
    var deadline by remember { mutableStateOf("") }
    var details by remember { mutableStateOf("") }
    var widget by remember { mutableStateOf<TurnstileWidget?>(null) }
    var token by remember { mutableStateOf<String?>(null) }
    var webView by remember { mutableStateOf<WebView?>(null) }
    var info by remember { mutableStateOf("") }
    val scope = rememberCoroutineScope()

    LaunchedEffect(Unit) { widget = Turnstile.sharedWidget() }

    Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(12.dp)) {
        OutlinedTextField(name, { name = it }, label = { Text("Name") }, modifier = Modifier.fillMaxWidth())
        OutlinedTextField(email, { email = it }, label = { Text("Email") }, modifier = Modifier.fillMaxWidth())
        Text("What do you need?")
        Choices(services, service) { service = it }
        Text("Budget (optional)")
        Choices(budgets, budget) { budget = it }
        OutlinedTextField(deadline, { deadline = it }, label = { Text("Deadline (YYYY-MM-DD, optional)") }, modifier = Modifier.fillMaxWidth())
        OutlinedTextField(details, { details = it }, label = { Text("Project details") }, minLines = 4, modifier = Modifier.fillMaxWidth())
        widget?.let { w ->
            AndroidView(
                factory = { context ->
                    WebView(context).apply {
                        showTurnstile(w, onToken = { token = it }, onExpire = { token = null })
                        webView = this
                    }
                },
                modifier = Modifier.fillMaxWidth().height(70.dp),
            )
        }
        Button(
            enabled = token != null && service != null,
            onClick = {
                scope.launch {
                    try {
                        frontmail.send(
                            templateId = "tpl_…",
                            params = mapOf(
                                "name" to name,
                                "email" to email,
                                "service" to service,
                                "budget" to budget,
                                "deadline" to runCatching { LocalDate.parse(deadline).toString() }.getOrNull(),
                                "details" to details,
                            ),
                            options = SendOptions(turnstileToken = token, turnstileKey = widget?.turnstileKey),
                        )
                        info = "Thanks! We’ve emailed you a confirmation."
                    } catch (e: FrontmailException) {
                        info = e.message ?: "Sending failed"
                    } finally {
                        token = null // a token works only once
                        webView?.resetTurnstile()
                    }
                }
            },
        ) { Text("Request a quote") }
        Text(info)
    }
}

Hodnoty null (bez rozpočtu, bez platného termínu) se do e-mailu nedostanou. Pokud chcete, vyměňte textové pole za DatePicker z Material 3 – jen datum posílejte jako YYYY-MM-DD.

5. Vyzkoušejte to

Odešlete poptávku se svým e-mailem: přijde vám poptávka a chvíli po ní potvrzení. Obojí se zobrazí v sekci Historie i s časovou osou doručení.

Poptávka i s potvrzením stojí dva kredity. Když vám kredity dojdou, poptávky se přijmou jako HELD a odešlou se automaticky po dobití.

Další kroky

• Zapněte v nastavení šablony Sběr kontaktů a budete mít seznam všech, kdo poptávali.
• Přikládejte soubory (třeba zadání v PDF) přes SendOptions(attachments = …) – viz dokumentace SDK.