How to build a quote request form in Android with Kotlin

This tutorial builds a quote request screen in Jetpack Compose. The customer picks a service and a budget, enters a deadline and a description; you receive a structured email and the customer gets an automatic confirmation.

You need: a free Frontmail account, an Android project with Compose and about twenty minutes.

1. Connect your mailbox and create the templates

1. Email services → Add service: connect your mailbox or provider, Make default, Verify & save.
2. Templates → From gallery → Quote request (category Business) → Use template.
3. From gallery → Auto-reply: thanks for your message → Use template; set defaults for company_name and response_time, then select it in the quote template under Settings → Delivery → Auto-reply template.

The quote template needs name, email, service and details; phone, company, budget and deadline (YYYY-MM-DD) are optional. service and budget accept only the values on the Parameters tab – use the same strings in the app.

2. Allow mobile apps and turn on the CAPTCHA

• Security → Mobile apps → Allow mobile apps → Save.
• Quote template → Settings → Protection → Require CAPTCHA (Turnstile) (Frontmail’s shared mobile widget, no keys needed).

3. Add the SDK

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

Add the INTERNET permission and copy the showTurnstile / resetTurnstile helpers from the Turnstile section of the Android SDK documentation.

4. Build the screen

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

null values (no budget, no valid deadline) are left out of the email. Swap the text field for a Material 3 DatePicker if you prefer – just send the date as YYYY-MM-DD.

5. Test it

Send a request with your own email: you receive the request and, a moment later, the confirmation. Both show up in History with their delivery timeline.

A request plus its confirmation uses two credits. If your credits run out, requests are accepted as HELD and sent automatically after you top up.

Next steps

• Turn on Contact collection in the template settings to keep a list of everyone who asked for a quote.
• Attach files (for example a brief as PDF) with SendOptions(attachments = …) – see the SDK documentation.