resources/templates/form-example.twig

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Back In Stock Form Example</title>
</head>
<body class="bg-gray-200 h-full">
    <div class="h-full rounded-t-lg overflow-hidden border-t border-l border-r border-gray-400 p-4 px-3 py-10 flex justify-center items-center">
        <div class="w-full max-w-sm">
            <div class="mb-4 flex flex-wrap items-center justify-center">
                <h2 class="flex-1 font-bold text-xl text-gray-700">Product Name</h2>
                <span class="flex-none bg-red-200 rounded-full px-3 py-1 text-xs font-semibold text-red-700">OUT OF STOCK</span>
            </div>
            <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                
                {{ csrfInput() }}

                {# Action #}
                <input type="hidden" name="action" value="craft-commerce-back-in-stock/base/register-interest">

                {# Variant ID #}
			    <input type="hidden" name="variantId" value="{# product.defaultVariant.id #}">

                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label>
                    {# Users email #}
                    <input name="email" id="email" type="email" placeholder="Enter your email address" class="shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline text-sm">
                </div>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Notify Me</button>
            </form>
            <p class="text-center text-gray-500 text-xs">Your email address wont be shared or used for anything other than being notified of this item being re-stocked.</p>
        </div>
    </div>

</body>
</html>