Is it possible to add a contact form to a site?

support
1

Hi!

My understanding is hugo is static website generator.
Does it have a feature to add a contact form, so that a visitor has send message from the site?

Thanks.

2

@askar Right now, my understanding, is that Hugo does not handle forms at this time. However, it is possible to add forms to static sites that send the content to a service that handles the submitted content. An example of these services is FormKeep & Formspree.

You could also develop your own API application to handle the form requests, which could store them, send them to you via email, etc.

It is worth noting that this feature coming to Hugo not entirely out of the question, as it has been discussed before.

Hope that helps!

1 Like
3

Thanks. For example, can you please point out?

4

I used formspree.io in some of my themes. It’s like sending a normal form with POST, where the fields have known names (like subject, message…). Over all, the setup is very easy. Your visitors can send up to a thousand emails each month which should be enough for smaller sites like a blog or portfolio.

And regarding your question to the API: I would do it like formspree.io. Setup simple script (PHP, Python, whatever language you like) that reads the incoming POST-Request, validates the input to prevent malicious code and sends it finally via email to you. This last step depends on the standard library of your prefered language. Otherwise you could use one of the plenty libraries out there.

2 Likes
5

If you wanted to build it in Sinatra, a little Ruby web library, it would look something like:

require 'sinatra'

post '/contact_form' do
  email = params[:email]
  body =  params[:body]
  # store in database or send email
end

This is a little bit of pseudo code, but what you would do is setup your HTML form on your Hugo site to send a POST request to that endpoint. Whatever input params you have in the form will be sent as params in the request.

The HTML form may look like:

<form action="http://foo.com/contact_form" method="post">
  <input name="email" value="test@example.com">
  <input name="body" value="Just saying hello!">
  <button>Submit</button>
</form>

Using a self-hosted application to handle this is a bit more work than using existing services, but it offers more flexibility.

2 Likes
6

I’m new here. Been using Hugo for the past few hours. Really enjoying it.

Regarding the FORMS question. I have embedded a Google Form, and it looks to be working okay.

Would that be an option for most users?

7

For anyone else searching, Zapier is a good alternative. You can write a standard HTML form, change the action attribute to a Zapier webhook url, and let Zapier process the form data from there (send email, add to mailing list, add to your CRM, etc)

6 Likes
8

I am testing a combination of MailChimp integrated with MailMunch right now. I have done a subscription optin popover form. It was easy and fast to set up.

9

I have now built a popover opt-in e-mail subscription form with cookie support and mobile device detection. It’s perfect to use with Zapier hooks and MailChimp for example. It is integrated in my theme: https://github.com/appernetic/hugo-bootstrap-premium

1 Like
11

Hi,

I could get the Zapier hook working properly, however i’m redirected to a new page showing the result, it only displays the string below:

{“status”: “success”, “attempt”: “5766ccb5-e397-43cf-b49f-c8bcf39e6420”, “id”: “a38f11b8-0df4-4ed3-ab63-aea5749875e4”, “request_id”: “6y6P45skJKmWVMgj”}

The zap sends the email properly, but I’d like to stay on the static page, and if possible show a success message. Is there a way to achieve this without significant JavaScript coding?

12

I’ll reply to myself because it took me a while, but I found a solution, so it’s definitely possible to display a success message without leaving the page using a bit of JavaScript with jQuery.

For those of you interested, here’s the code I used. This is done using the creative theme and the javascript addition it used, jqBootstrapValidation.js - it probably needs to be tweaked to work everywhere but it can point you in the right direction. I use the Zapier webhooks to turn the data into an email for myself.

/*When clicking on Full hide fail/success boxes */
$('#name').focus(function() {
    $('#success').html('');
});

$(function() {

    $("input,textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, e) {
    	    e.preventDefault();
    	
    	    var submitButton = $('input[type=submit]', $form);
    	    $.ajax({
    	      type: 'POST',
    	      url: $form.prop('action'),
    	      accept: {
    	        javascript: 'application/javascript'
    	      },
    	      data: $form.serialize(),
    	      beforeSend: function() {
				submitButton.prop('value', '{{ with .Site.Params.contact.wait }}{{ . }}{{ end }}');
				submitButton.prop('disabled', 'disabled');
    	      }
    	    }).done(function(data) {
				submitButton.prop('value', '{{ with .Site.Params.contact.success }}{{ . }}{{ end }}');
    			submitButton.prop('disabled', false);
    	    });
        },

        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});
1 Like
13

I used parse to setup a contact form on a previous static site.

14

I used Parse before Facebook discontinued it. I remember that the cloud code was a bit limiting. For my next project I will try Horizon, mostly because I don’t like mongoDB.

15

Yes, you need to use javascript to deal with the logic and the page flow. I built my, solution in Angular because you get a more structured MVC type of mini application, where you can reason about the code, exactly knowing what it does and easily extend it. Use what you can best, Jquery, Angular, React…

1 Like
16

On my site classandobjects.com which is build using Hugo, I am currently using formspree but I have been facing email verification issues, I have to re-verify my email and I cannot be sure when the submission will stop coming. I have also looked into formkeep which is kinda costly. As a project I am trying to make Formester.com which will bring the best of both the world.

I am here to get genuine feedback from people about what features do they really miss and would like to see in the app? I will be more than glad to have your support.

Thanks

2 Likes
18

After registered in website, formester.com, how to send the contact from to slack by formester?

I can’t find the related document.

19

This is pretty good. Can you send me the code? :slight_smile:

20

Hi Bill, Formester has Slack integrations via Zapier. I know the docs are not readt right now, but we are working on them. I’ve contacted you via an email which has instruction on how to do this. Let me know if you need anything.

1 Like
21

Hi, I did this one year ago, so I’ll have to dig into my files to find exactly what I did. I don’t have time to do this right now but I’ll try to post a short tutorial of what I did to implement the contact form.

Today the form is sent to a Zapier webhook, and is then posted in a Slack channel so our team can handle incoming requests properly. You can see its final implementation on https://www.ideasonstage.com (it’s at the bottom of most pages).

1 Like
22

Personally I’m using Google Form and it works great !

http://www.ledesertenville.com.s3-website.eu-west-2.amazonaws.com/creations/lettres-vives/
(down the page)

1 Like