Controller Form

    <.form
  for={@form}
  action={~p"/signature-pad/form"}
  method="post"
  class="flex flex-col gap-space-lg w-full max-w-xl"
>
  <.signature_pad field={@form[:signature]} class="signature-pad w-full max-w-none">
    <:label>Sign here</:label>
    <:clear_trigger>
      <.heroicon name="hero-x-mark" />
    </:clear_trigger>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.signature_pad>
  <.action type="submit" class="button ui-accent">
    Submit
  </.action>
</.form>

  

    def signature_form_page(conn, _params) do
  phoenix_form =
    Phoenix.Component.to_form(%{"signature" => ""}, as: :signature_phoenix, id: "signature-form-phoenix")

  render(conn, :signature_form_page, phoenix_form: phoenix_form)
end

def signature_form_submit(conn, params) do
  if is_map(params["signature_phoenix"]) do
    signature = params["signature_phoenix"]["signature"] || ""

    conn
    |> put_flash(:info, "Submitted: signature saved")
    |> redirect(to: ~p"/signature-pad/form#signature-form-phoenix")
  end
end

  

    <.form
  for={@form}
  action={~p"/signature-pad/form"}
  method="post"
  class="flex flex-col gap-space-lg w-full max-w-xl"
>
  <input type="hidden" name="signature_ecto[_sent]" value="1" />
  <.signature_pad field={@form[:signature]} class="signature-pad w-full max-w-none">
    <:label>Sign here</:label>
    <:clear_trigger>
      <.heroicon name="hero-x-mark" />
    </:clear_trigger>
    <:error :let={msg}>
      <.heroicon name="hero-exclamation-circle" class="icon" />
      {msg}
    </:error>
  </.signature_pad>
  <.action type="submit" class="button ui-accent">
    Submit
  </.action>
</.form>

  

    def signature_form_page(conn, _params) do
  ecto_form =
    %MyApp.Forms.SignatureForm{}
    |> MyApp.Forms.SignatureForm.changeset_validate(%{})
    |> Phoenix.Component.to_form(as: :signature_ecto, id: "signature-form-ecto")

  render(conn, :signature_form_page, ecto_form: ecto_form)
end

def signature_form_submit(conn, params) do
  if is_map(params["signature_ecto"]) do
    case MyApp.Forms.SignatureForm.changeset_validate(%MyApp.Forms.SignatureForm{}, params["signature_ecto"]) do
      %Ecto.Changeset{valid?: true} = changeset ->
        _data = Ecto.Changeset.apply_changes(changeset)

        conn
        |> put_flash(:info, "Submitted: signature saved")
        |> redirect(to: ~p"/signature-pad/form#signature-form-ecto")

      changeset ->
        changeset = Map.put(changeset, :action, :insert)
        ecto_form = Phoenix.Component.to_form(changeset, as: :signature_ecto, id: "signature-form-ecto")
        render(conn, :signature_form_page, ecto_form: ecto_form)
    end
  end
end

  

    defmodule MyApp.Forms.SignatureForm do
  use Ecto.Schema
  import Ecto.Changeset

  embedded_schema do
    field :signature, :string
  end

  def changeset(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:signature])
    |> validate_required([:signature])
  end

  def changeset_validate(form, attrs \\ %{}) do
    form
    |> cast(attrs, [:signature])
    |> validate_required([:signature], message: "can't be blank")
  end
end

  

    <form action={~p"/signature-pad/form"} method="post" class="flex flex-col gap-space-lg w-full max-w-xl">
  <input type="hidden" name="_csrf_token" value={Plug.CSRFProtection.get_csrf_token()} />
  <.signature_pad name="user[signature]" class="signature-pad w-full max-w-none">
    <:label>Sign here</:label>
    <:clear_trigger>
      <.heroicon name="hero-x-mark" />
    </:clear_trigger>
  </.signature_pad>
  <.action type="submit" class="button ui-accent">
    Submit
  </.action>
</form>

  

    def signature_form_submit(conn, %{"user" => %{"signature" => sig}}) do
  conn
  |> put_flash(:info, "Submitted: signature=#{preview_sig(sig)}")
  |> redirect(to: ~p"/signature-pad/form#signature-form-native")
end

defp preview_sig(""), do: "(empty)"
defp preview_sig(sig), do: sig