Hostinger AI Builder: How to create a contact form in agentic mode

Create a contact form with email notifications and database storage in Hostinger AI Builder agentic mode.

Updated 2 weeks ago

Create a functional contact form for your Hostinger AI Builder agentic mode website with automatic email notifications and database storage, so visitors can reach out to you directly. Forms automatically store submissions in a dedicated data collection and send email notifications to your preferred address, handled entirely within the Hostinger AI Builder interface without requiring external email services.

Step 1 – Prompt AI Builder to create the contact form

To set up the form, you must use the AI chat interface to define the fields and the notification behavior.

  1. Open the Hostinger AI Builder.
  2. Enter a prompt that specifies the required fields, the data collection name, and your notification email. For example:
    Add a contact form to my website with the following fields: full name, email address, and message. Store each submission in a data collection called Contact Submissions. Send an email notification to my.email@example.com every time the form is submitted, including the sender’s name, email address, and message.
  3. Replace the placeholder email with the actual address where you wish to receive alerts.
Use specific prompts to include additional fields like phone numbers or subject lines.

Step 2 – Test the form in preview mode

Before making your site live, verify that the data is being captured and notifications are working.

  1. Click Preview in the editor.
    Preview tab and contact form with Send a Message heading highlighted

  2. Fill out the contact form as a visitor would and submit it.
    Contact form with Send Message button highlighted at bottom

  3. Click the Data toggle at the top of the editor.
  4. Open the Contact Submissions collection in the left panel.
    Data tab with contact_submissions collection selected in a database dashboard

  5. Confirm the test entry appears under the Test data section.
  6. Check your email inbox for the notification.

Step 3 – Publish the website

Once testing is successful, publish the project to enable live submissions.

  1. Click Publish in the editor.
  2. Real visitor submissions will now appear in the Live data section of the Data tab.
    Live data selected with contact_submissions collection row highlighted in a database table
  3. Email notifications will trigger for every new submission.

You have now successfully integrated a contact system into your Hostinger AI Builder site. Your visitors can reach you easily, and you can manage all interactions directly from your dashboard. For more advanced marketing features, you can always use your forms with Hostinger Reach.

This guide applies to Hostinger AI Builder projects using the integrated backend. If your project was created before the integrated backend was introduced, it may be using Supabase as an external backend instead. In that case, please refer to the Supabase integration guide for the relevant setup and troubleshooting steps.