Created
February 18, 2024 18:05
-
-
Save srcrip/ee7392477ce933ea5a9a4531a79cceb0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'phoenix_html' | |
| import { Socket } from 'phoenix' | |
| import { LiveSocket } from 'phoenix_live_view' | |
| const hooks = {} | |
| // you can get this from the admin panel | |
| const formId = '<insert here>' | |
| const apiKey = '<insert here>' | |
| const fetchOpts = { | |
| method: 'POST', | |
| headers: { | |
| Accept: 'application/json', | |
| 'Content-Type': 'application/json', | |
| }, | |
| } | |
| hooks.TrackFormVisit = { | |
| mounted() { | |
| // it's technically an undocumented API, but it seems to successfully track visits | |
| fetch(`https://app.convertkit.com/forms/${formId}/visit`, fetchOpts) | |
| let success = false | |
| let message = null | |
| this.el.addEventListener('submit', async (event) => { | |
| event.preventDefault() | |
| const form = event.target | |
| const formFields = form.elements | |
| const nameInput = formFields.name | |
| const emailInput = formFields.email | |
| fetch(this.el.action, { | |
| ...fetchOpts, | |
| body: JSON.stringify({ | |
| api_key: apiKey, | |
| email: emailInput.value, | |
| name: nameInput.value, | |
| }), | |
| }) | |
| .then((response) => response.json()) | |
| .then((json) => { | |
| if (json.error) { | |
| success = false | |
| message = 'Something went wrong, please try again later.' | |
| console.error(json.error) | |
| } else { | |
| error = false | |
| if (json.subscription.state == 'active') { | |
| success = true | |
| message = 'Looks like you are already subscribed, thank you!' | |
| } else { | |
| success = true | |
| message = | |
| 'Success! Please check your email to confirm your subscription.' | |
| } | |
| } | |
| const response = { error: json.error, success, message } | |
| this.pushEvent('subscribe-result', response) | |
| }) | |
| }) | |
| }, | |
| } | |
| let csrfToken = document | |
| .querySelector("meta[name='csrf-token']") | |
| .getAttribute('content') | |
| let liveSocket = new LiveSocket('/live', Socket, { | |
| longPollFallbackMs: 2500, | |
| params: { _csrf_token: csrfToken }, | |
| hooks, | |
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| defmodule ElixirCoursesWeb.HomeLive do | |
| use ElixirCoursesWeb, :live_view | |
| @convert_kit_form_id "convert_kit_form_id_here" | |
| def mount(_params, _session, socket) do | |
| socket = | |
| socket | |
| |> assign(:subscribe_result, nil) | |
| {:ok, socket} | |
| end | |
| def handle_event("subscribe-result", payload, socket) do | |
| socket = | |
| socket | |
| |> assign(:subscribe_result, payload["message"]) | |
| {:noreply, socket} | |
| end | |
| defp newsletter_form(assigns) do | |
| ~H""" | |
| <div :if={@subscribe_result}> | |
| <%= @subscribe_result %> | |
| </div> | |
| <form | |
| :if={@subscribe_result == nil} | |
| action={"https://api.convertkit.com/v3/forms/#{@convert_kit_form_id}/subscribe"} | |
| class="flex flex-wrap gap-4" | |
| id="new-form" | |
| phx-hook="TrackFormVisit" | |
| > | |
| <div class="flex-[1_1_10ch]"> | |
| <label for="name" class="inline-block mb-2 text-sm font-medium leading-none"> | |
| First Name | |
| </label> | |
| <input | |
| type="text" | |
| value={nil} | |
| name="name" | |
| id="name" | |
| required="required" | |
| placeholder="Preferred Name" | |
| class="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 h-10" | |
| data-1p-ignore | |
| data-lpignore | |
| /> | |
| </div> | |
| <div class="flex-[3_1_10ch]"> | |
| <label for="name" class="inline-block mb-2 text-sm font-medium leading-none">Email</label> | |
| <input | |
| type="email" | |
| value={nil} | |
| name="email" | |
| id="email" | |
| required="required" | |
| placeholder="you@example.com" | |
| class="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 h-10" | |
| data-1p-ignore | |
| data-lpignore | |
| /> | |
| </div> | |
| <div class="flex-1 place-self-end"> | |
| <button | |
| class="inline-flex items-center justify-center whitespace-nowrap text-sm font-bold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 text-white bg-blue-500 hover:bg-blue-400/90 h-10 w-full rounded-md px-8" | |
| type="submit" | |
| > | |
| <span class="relative z-10">Become an Elixir Guru</span> | |
| </button> | |
| </div> | |
| </form> | |
| """ | |
| end | |
| end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment