Adding a contact form to a PG website

Beginners
1

Hi,
I’ve been trying to find instructions/tutorials to help me add a contact form to my static PG website which is hosted on Netlify. I just want visitors to my website to be able to complete and submit a form containing their contact details and a message and for me to receive this into my email inbox. All the information that I’ve found online about Pinegrow forms makes reference to configuration when working with Wordpress, which I don’t want to use.
Thanks in advance for your help.

Thanks

2

Welcome to Pinegrow :slight_smile:

This would be a typical form submit.

To have those details sent to you via email, you would require a SMTP server in your solution. I could be wrong, but I don’t think Netlify provides this service oob, but looks like they let you integrate your email providers - Netlify Email Integration | Netlify Docs.

If you want a no-cost simple solution where you just want to gather your user’s submission (not necessarily via email), then I would suggest using a simple google spreadsheet, create a gscript, and this gives you an endpoint to which your page can post user’s form submission.

I recently published this workflow here that could be helpful in your case. But, I’m planning to redo this video as I changed the menus in the Pinegrow plugin I’m using in this video.

2 Likes
3

Hi there,

Adding a contact form to your static Pinegrow website hosted on Netlify is definitely doable! Since you’re not using WordPress, you’ll want to set up a form that can handle submissions directly. Here’s a straightforward approach to get you started:

  1. Create the HTML Form: First, create the basic structure of your contact form in Pinegrow. Here’s a simple example:
<form id="contact-form" action="https://your-netlify-form-endpoint" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>
    
    <button type="submit">Send Message</button>
</form>
  1. Set Up Netlify Forms: Netlify provides a built-in form handling feature. To enable this, you need to configure your form in the HTML by adding a few attributes. Modify your form like this:
<form id="contact-form" name="contact" method="POST" data-netlify="true">
    <!-- form fields here -->
</form>
  1. Deploy Your Site: Once your form is set up with the necessary attributes, deploy your site to Netlify. Make sure the form is part of your deployed site.
  2. Check Form Submissions: After deployment, you can access form submissions in your Netlify dashboard under the “Forms” section. You can also set up notifications to receive the form submissions in your email. Go to your site’s settings in Netlify, and under “Build & Deploy,” look for “Notifications” to configure email alerts.
  3. Testing: Don’t forget to test the form on your live site to ensure everything is functioning as expected. Fill it out and submit it to verify that you receive the email.

This method allows you to handle form submissions without needing a backend or WordPress. For additional customizations or styling, you can use CSS to enhance the form’s appearance.

I hope this helps you set up your contact form successfully!

2 Likes
4

Hi @TechAkayy
Thanks again for your help!

I’ll check out the Netlify links you’ve provided and have a look at your YouTube video too.

5

Hi @Anam,

Thank you very much for your suggestions. I really appreciate your help.

I’ll see if I can implement this on my website, using Netlify forms.

6

Hi Bruce
most simple html forms will be hacked within days by Russians messing a round.
However, there are ways to stop them.

Most servers support PHP and by using a file name like this contactme.php and processform.php you can take advantage of the php encryption facility.
Basically, it encrypts a hidden password into the form and decrypts it processing file.

Here’s an example The Complete Norfolk Pubs Guide 2024

I can send you the code if you like - it should drop in.

Alternatively, you can divert users from unwanted countries to a 404 page.

I’ve been working on forms for 30 years now - they can be a menace.

Send me a message using the example above and I can send you code both simple and secure.

1 Like
7

For anybody who’s interested, I found an excellent way of adding customisable forms to my Pinegrow website at https://usebasin.com There’s even some interesting additional features like geolocation and country blocking. Whilst you can add a Netlify form to your website, if you use their hosting, the maximum number of form submissions on both the free/starter and Pro plans is 100 per month, $19 payable if you exceed this.

1 Like