{"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-03-16T12:12:07","modified_gmt":"2026-03-16T12:12:07","slug":"6463265-hostinger-website-builder-how-to-add-and-manage-contact-forms","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6463265-hostinger-website-builder-how-to-add-and-manage-contact-forms\/","title":{"rendered":"Hostinger Website Builder: How to Add and Manage Contact Forms"},"content":{"rendered":"

With Hostinger Website Builder<\/b>, you can easily add a contact form to your site!<\/p>

\n<\/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<\/p>

To add a contact form element, expand the Add element <\/b>panel <\/b>on the left. Find the Contact form<\/b> element and drag and drop it anywhere on your page:<\/p>

\n<\/p>

<\/div>

\n<\/p>

To add a contact form section, click on Add section <\/b>– you’ll see this button on the horizontal border of any section:<\/p>

\n<\/p>

<\/div>

\n<\/p>

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.<\/p>

\n<\/p>

Editing the Contact Form<\/h2>

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

\n<\/p>

<\/div>

\n<\/p>

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>

\n<\/p>

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>

\n<\/p>

You can view all the forms that people have submitted through your contact form within the builder. Expand the Website settings<\/b> panel on the left and go to Form submissions<\/b>:<\/p>

\n<\/p>

<\/div>

\n<\/p>

Next to the preferred form, click on View list<\/b>:<\/p>

\n<\/p>

<\/div>

\n<\/p>

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:<\/p>

\n<\/p>

<\/div>

\n<\/p>

\n<\/p>

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<\/p>

On Elfsight, you will find a variety of contact form templates. Once you select a template, customize it to your liking:<\/p>

\n<\/p>

<\/div>

\n<\/p>

Once you’re finished creating your widget, save it:<\/p>

\n<\/p>

<\/div>

\n<\/p>

Then, click on Add to website <\/b>and copy the integration code:<\/p>

\n<\/p>

<\/div>

\n<\/p>

Embed the code into your website using the embed code element<\/a><\/b>, and the contact form will be added to your page.<\/p>

\n<\/p>

NOTES<\/b><\/p>