Pineapple Builder

Add Contact Form



First, navigate to the Editor and select the area where you want to add the form.


Navigate to_Editor


Click the blue + button to insert a new element.


Click Blue_Plus_Button


In the menu, navigate to the Forms section. Here, you will find various templates such as:


Forms Section_Menu
  • Waitlists

  • Newsletters

  • Contact forms


For this tutorial, select the Contact Form template.


Select Contact_Form


This will add a simple form to your page, capturing the customer’s name, email, and message. To customize the form:

  1. Click on the form and hit the Edit button.

  2. In the right panel, adjust the settings:

    • Change field names.

    • Edit placeholder text.

    • Modify the success message displayed after form submission.

  3. Configure the form’s style, including padding and layout, to match your website's design.

After making your adjustments:

  • Save your changes by clicking the Save Draft button if you’re not ready to publish.

  • Preview the draft version to ensure everything works correctly.

    Save Draft


When you’re satisfied with the form:

  1. Publish your page by clicking the Publish Page button.

  2. Note that it may take a few moments for the page to become available.

  3. Test the form by opening up the updated page in a new window and submitting an entry.

Upon form submission:

  • Both you and your customer will receive a confirmation email.

  • You can respond directly to their inquiry.


With this new contact form, you can start capturing customer inquiries quickly and efficiently.

Pineapple Builder - AI Website Builder Create Docs