Come creare un modulo di richiesta preventivo su Android con Kotlin

In questo tutorial crei in Jetpack Compose una schermata di richiesta preventivo. Il cliente sceglie un servizio e un budget, inserisce una scadenza e una descrizione; tu ricevi un’email strutturata e il cliente una conferma automatica.

Ti serve: un account Frontmail gratuito, un progetto Android con Compose e una ventina di minuti.

1. Collega la tua casella e crea i modelli

1. Servizi email → Aggiungi servizio: collega la tua casella o il tuo provider, Imposta come predefinito, Verifica e salva.
2. Modelli → Dalla galleria → Richiesta di preventivo (categoria Business) → Usa modello.
3. Dalla galleria → Risposta automatica: grazie per il messaggio → Usa modello; imposta i valori predefiniti di company_name e response_time, poi selezionalo nel modello di preventivo in Impostazioni → Consegna → Modello di risposta automatica.

Il modello di preventivo richiede name, email, service e details; phone, company, budget e deadline (YYYY-MM-DD) sono facoltativi. service e budget accettano solo i valori della scheda Parametri. L’esempio di codice usa i valori del modello inglese; se crei il modello in italiano, i valori sono Sito web, E-commerce, App mobile, Consulenza, Altro e Meno di 5.000 €, 5.000–20.000 €, 20.000–50.000 €, Oltre 50.000 €. L’app deve inviare esattamente quelle stringhe.

2. Consenti le app mobile e attiva il CAPTCHA

• Sicurezza → App mobile → Consenti app mobile → Salva.
• Modello di preventivo → Impostazioni → Protezione → Richiedi CAPTCHA (Turnstile) (il widget mobile condiviso di Frontmail, non servono chiavi).

3. Aggiungi l’SDK

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

Aggiungi il permesso INTERNET e copia gli helper showTurnstile / resetTurnstile dalla sezione Turnstile della documentazione dell’SDK Android.

4. Crea la schermata

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)
    }
}

I valori null (nessun budget, nessuna scadenza valida) vengono esclusi dall’email. Se preferisci, sostituisci il campo di testo con un DatePicker di Material 3: basta inviare la data come YYYY-MM-DD.

5. Provalo

Invia una richiesta con la tua email: ricevi la richiesta e, un attimo dopo, la conferma. Entrambe compaiono in Cronologia con la loro timeline di consegna.

Una richiesta con la sua conferma consuma due crediti. Se finisci i crediti, le richieste vengono accettate come HELD e inviate automaticamente dopo la ricarica.

Prossimi passi

• Attiva la Raccolta contatti nelle impostazioni del modello per tenere un elenco di tutti quelli che hanno chiesto un preventivo.
• Allega file (per esempio un brief in PDF) con SendOptions(attachments = …): trovi i dettagli nella documentazione dell’SDK.