Website Enquiry Form Generator

Generate a responsive, ready-to-use lead capture form for your site.

1. Form Submission & Configuration

Define where the form data will be sent and what the user sees.

Submission Endpoint URL *:

This is where the form data is POSTed.

Form Title:

Button Text:

Success Message:

2. Customize Appearance

Primary Accent Color (Hex):

Input Field Style:

3. Generated Code & Preview

Copy the full code below and paste it into your website.

Generated HTML Form Code:

Live Preview:

${title}

`; **;** // ADDED SEMICOLON TO ENSURE CLEAN CLOSURE OF THE TEMPLATE LITERAL ASSIGNMENT // Update generator UI generatedHtmlDisplay.value = generatedHtml.trim(); // Create a temporary container to isolate the preview's styling from the generator's styling previewContainer.innerHTML = generatedHtml.trim(); previewContainer.style.backgroundColor = '#f3f4f6'; // Ensure the background is visible } // --- Utility Functions --- /** * Handles copying the code to the clipboard. */ function copyCode() { const code = generatedHtmlDisplay.value.trim(); if (!code) { copyStatusMessage.textContent = 'Nothing to copy yet. Generate the form first.'; copyStatusMessage.classList.remove('text-green-400'); copyStatusMessage.classList.add('text-red-400'); clearStatusMessage(); return; } try { // Use the deprecated execCommand for maximum compatibility in this environment const tempInput = document.createElement('textarea'); tempInput.value = code; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); copyStatusMessage.textContent = 'Form code copied to clipboard!'; copyStatusMessage.classList.remove('text-red-400'); copyStatusMessage.classList.add('text-green-400'); clearStatusMessage(); } catch (err) { console.error('Copy failed:', err); copyStatusMessage.textContent = 'Copy failed. Please manually select and copy the text.'; copyStatusMessage.classList.remove('text-green-400'); copyStatusMessage.classList.add('text-red-400'); clearStatusMessage(); } } function clearStatusMessage() { setTimeout(() => { copyStatusMessage.textContent = ''; copyStatusMessage.classList.remove('text-red-400', 'text-green-400'); }, 3000); } // --- Initialization --- // Attach event listener for the copy button copyCodeButton.addEventListener('click', copyCode); // Generate the default form code on load generateFormCode(); // Re-generate on any input change submissionUrlInput.addEventListener('input', generateFormCode); formTitleInput.addEventListener('input', generateFormCode); buttonTextInput.addEventListener('input', generateFormCode); successMessageInput.addEventListener('input', generateFormCode); primaryColorInput.addEventListener('input', generateFormCode); fieldStyleInput.addEventListener('change', generateFormCode);