{"id":888,"date":"2022-08-11T11:42:14","date_gmt":"2022-08-11T11:42:14","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/08\/11\/6463265-hostinger-website-builder-how-to-add-and-manage-contact-forms\/"},"modified":"2026-08-27T07:43:37","modified_gmt":"2026-08-27T07:43:37","slug":"6463265-hostinger-ai-builder-manual-mode-how-to-add-and-manage-contact-forms","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6463265-hostinger-ai-builder-manual-mode-how-to-add-and-manage-contact-forms\/","title":{"rendered":"Hostinger AI Builder: How to add and manage contact forms in manual mode"},"content":{"rendered":"

Add a contact form to your Hostinger AI Builder manual mode website using a contact form element, section, or third-party widget.<\/p>

Adding a contact form<\/h2>

To add contact forms to your website, you can use contact form elements and\/or contact form sections.<\/p>

    \n
  1. Expand the Add element <\/b>panel <\/b>on the left.<\/li>\n
  2. Find the Contact form<\/b> element and drag and drop it anywhere on your page:
    \n\"\"<\/li>\n<\/ol>

    To add a contact form section:<\/p>

      \n
    1. Click on Add section <\/b>– you’ll see this button on the horizontal border of any section:
      \n\"Hostinger<\/li>\n
    2. From the menu on the left, choose Contact form<\/b>. Select the preferred section template on the right and click on it – a contact form section will be inserted into your page.<\/li>\n<\/ol>

      Editing the Contact Form<\/h2>

      Click on the contact form element to see more options (edit, duplicate, change visibility, delete, resize, etc.):<\/p>

      \"Website<\/div>

      Click on Edit form<\/b> to open its settings:<\/p>

      \n\n\n\n\n\n\n\n
      \n

      General<\/b><\/p>\n<\/td>\n

      		\n
        \n
      • \n

        Rename the form <\/b>– if you have multiple forms on your site, form submissions are listed separately for each form<\/p>\n<\/li>\n

      • \n

        Specify an email address for receiving notifications<\/b> about newly submitted forms<\/p>\n<\/li>\n

      • \n

        View form submissions<\/b><\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

      \n

      Fields<\/b><\/p>\n<\/td>\n

      		\n
        \n
      • \n

        Customize<\/b> fields: add, edit, sort, remove<\/p>\n<\/li>\n

      • \n

        Specify required <\/b>fields<\/p>\n<\/li>\n

      • \n

        Supported<\/b> field<\/b> types<\/b>:<\/p>\n

          \n
        • \n

          Short answer<\/p>\n<\/li>\n

        • \n

          Paragraph<\/p>\n<\/li>\n

        • \n

          Single choice<\/p>\n<\/li>\n

        • \n

          Multiple choice<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

      \n

      Button<\/b><\/p>\n<\/td>\n

      		\n
        \n
      • \n

        Rename<\/b> the “Submit” button<\/p>\n<\/li>\n

      • \n

        Change the button position <\/b>(alignment)<\/p>\n<\/li>\n

      • \n

        Specify what happens after submitting the form<\/b>:<\/p>\n

          \n
        • \n

          Show a thank-you message<\/p>\n<\/li>\n

        • \n

          Redirect the user to a particular page within your website<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

      \n

      Style<\/b><\/p>\n<\/td>\n

      		\n

      Change the style<\/b> of the following (select from the dropdown<\/b>):<\/p>\n

        \n
      • \n

        Button<\/p>\n<\/li>\n

      • \n

        Form fields<\/p>\n<\/li>\n

      • \n

        Background<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

      \n

      Animation<\/b><\/p>\n<\/td>\n

      		\n

      How to Add Animations<\/a><\/b><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>

      Viewing form submissions<\/h2>

      Once your website visitor submits a contact form, you’ll automatically get a notification to the email address that’s linked to your Hostinger account.<\/p>

      You can view all the forms that people have submitted through your contact form within the builder.<\/p>

        \n
      1. Expand the Ellipsis more<\/b> on the left and go to Form submissions<\/b>:
        \n\"\"<\/li>\n
      2. Next to the preferred form, click on View<\/b>:
        \n\"\"<\/li>\n
      3. Here, you’ll find all submissions of a particular form. You can easily export selected forms to a .CSV file and delete the unnecessary ones:
        \n\"\"<\/li>\n<\/ol>

        Embedding a Third-Party Contact Form<\/h2>

        If you’ve tried our contact form element but need more features for it, Elfsight<\/a> <\/b>is one of many platforms that offer various embeddable widgets, as well as the Contact Form widget<\/a><\/b>.<\/p>

          \n
        1. On Elfsight, you will find a variety of contact form templates.<\/li>\n
        2. Once you select a template, customize it to your liking:
          \n<\/li>\n
        3. Once you’re finished creating your widget, save it:
          \n<\/li>\n
        4. Then, click on Add to website <\/b>and copy the integration code:
          \n<\/li>\n
        5. Embed the code into your website using the embed code element<\/a><\/b>, and the contact form will be added to your page.<\/li>\n<\/ol>

          Your contact form is now live, ready to receive and manage submissions from your visitors.<\/p>

          NOTES<\/b><\/p>

            \n
          • \n

            If you decide to use an Elfsight widget, you will be asked to select an Elfsight plan<\/p>\n<\/li>\n

          • \n

            Using a third-party integration, you won’t be able to view form submissions within the AI builder<\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

            Add and customize a contact form in Hostinger AI Builder manual mode.<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-888","post","type-post","status-publish","format-standard","hentry","category-ai-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/6463265-hostinger-website-builder-how-to-add-and-manage-contact-forms\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/6463265-hostinger-creador-de-sitios-web-como-agregar-un-formulario-de-contacto\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/6463265-hostinger-createur-de-site-web-comment-ajouter-et-gerer-des-formulaires-de-contact\/","default":0},{"locale":"lt-LT","link":"https:\/\/www.hostinger.com\/lt\/support\/6463265-hostinger-svetainiu-kurimo-irankis-kontaktu-forma\/","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/support\/6463265-hostinger-criador-de-sites-como-adicionar-e-gerenciar-um-formulario-de-contato\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=888"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/888\/revisions"}],"predecessor-version":[{"id":17182,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/888\/revisions\/17182"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}