Selectors-only mode

Raw mode demo

The form below ships with zero inline styles. Every visual detail you see — the inputs, the indigo prefix chip, the submit button, the focus rings — is driven entirely by this page's own CSS targeting the stable data-rf-* selector contract. This is real, not staged: the embed script runs in raw mode and the page supplies 100% of the visual layer.

Live raw embed and code snippets

Raw embed snippet

Add &mode=raw to the script URL

HTML

<!-- 1. anchor -->
<div
  data-rf-form="GPSGS5ys-6Rm_4xYB57ZKv..."
></div>

<!-- 2. script with &mode=raw -->
<script
  src="...form-embed?token=TOKEN&mode=raw"
></script>

Representative CSS (this page)

/* required: hidden toggle */
[data-rf-hidden] { display: none; }

[data-rf-el="input"] {
  min-height: 48px;
  border: 1.5px solid #E0E3FF;
  border-radius: 6px;
}
/* indigo prefix chip */
[data-rf-el="phone-prefix"] {
  background: #6F7AEA;
  color: #FFFFFF;
}
/* custom focus ring */
[data-rf-el="input"]:focus-visible {
  border-color: #6F7AEA;
  box-shadow: 0 0 0 3px rgba(111,122,234,.25);
}
/* submitting state — dim + indigo pulse */
[data-rf-el="form"][data-rf-state="submitting"]
  [data-rf-el="submit"] {
  opacity: 0.55;
  animation: rf-pulse 1.2s infinite;
}

Live raw form

All styles come from this page's CSS

Live event log

Same event contract as styled mode: rf:ready, rf:submit, rf:success, rf:error — all bubble from the form element.

// waiting for rf:ready…