Connect External Forms to Formulific

Your first step is to generate a unique endpoint in Formulific. This secure URL will receive data from your external HTML form.

1. Log into your Formulific account.
2. Navigate to the "My Forms" section from the sidebar.
3. Click "New External Connection".
4. Configure your endpoint:
   • Name: A descriptive name (e.g., "Main Site Contact Form").
5. Click "Generate Connection Link". Once created, Formulific provides a unique Submission URL:
   Endpoint URL Copy

   https://formulific.com/f/your_unique_endpoint_id/submit

   Replace placeholders with your actual endpoint ID.

6. Keep this URL saved; you'll need it for your HTML form.

Now, update your existing HTML form to point to the Formulific Submission URL.

Core HTML Adjustments

1. Form action Attribute: Change your <form> tag's action attribute to your Formulific Submission URL.
2. Form method Attribute: Ensure the method is set to "POST".
3. Input Field name Attributes: Every field (<input>, <textarea>, <select>) you want to capture must have a unique name attribute.

Basic HTML Example

If your Submission URL is https://formulific.com/f/abcdef123456/submit, your form code (using Tailwind CSS for styling fields as an example):

<!-- Your website's HTML form -->
<form action="https://formulific.com/f/abcdef123456/submit" method="POST">
  <div class="my-4"> <!-- Example: Added some margin for spacing -->
    <label for="contact-name" class="block text-sm font-medium text-gray-700">Your Name:</label>
    <input type="text" id="contact-name" name="fullName" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
  </div>
  <div class="my-4">
    <label for="contact-email" class="block text-sm font-medium text-gray-700">Your Email:</label>
    <input type="email" id="contact-email" name="emailAddress" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
  </div>
  <div class="my-4">
    <label for="contact-message" class="block text-sm font-medium text-gray-700">Message:</label>
    <textarea id="contact-message" name="inquiryMessage" rows="4" required class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
  </div>
  <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
    Send Message
  </button>
</form>

This form will send fullName, emailAddress, and inquiryMessage to Formulific.

After configuring your form, thorough testing is essential.

1. Deploy your updated HTML page to your web server or local test environment.
2. Open the page in a browser and fill out the form with sample data.
3. Submit the form.
4. Verify the following:
   • Submission in Formulific: Log into Formulific. Your test submission should appear under the "Submissions" area for the linked internal form.

If you encounter issues, here are some common problems and solutions:

• Submissions Not Appearing:
  • Double-check the action URL in your HTML form. It must exactly match the Submission URL from Formulific.
  • Verify all input fields have name attributes.
  • Check if the External Form Endpoint is "active" in Formulific.
• "Endpoint not found or inactive" Error:
  • The endpoint_id in your form's action URL is incorrect, or the endpoint is disabled/deleted. Verify the Submission URL in your Formulific "External Forms" settings.