[Feature Request] Add a contact form to the contact widget

[MrinalJain17]

A form, to contact the owner could be a nice addition to the contact widget. And although we cannot do this on a static site without a backend, it's possible to use third-party services (like Formspree)

I have modified the contact.html partial to implement this and this is how it looks on my website

The form element that I added in the partial contact.html:

{{ with $.Site.Params.email }}
<li>
    <i class="fa-li fa fa-comments fa-2x" aria-hidden="true"></i>
    <p><em>Let's get in touch. Send me a message:</em><p>
    <form action="https://formspree.io/{{ . }}" method="POST">
        <input class="form-element-input" type="text" name="name" required="required" placeholder="Name"> <br />
        <input class="form-element-input" type="email" name="email" required="required" placeholder="Email"> <br />
        <textarea class="form-element-input" rows="3" name="message" placeholder="Message" required="required"></textarea> <br />
        <input class="form-element-submit" type="submit" value="Send">
        <input type="hidden" name="_subject" value="New mail from Site" />
        <input type="text" name="_gotcha" style="display:none" />
    </form> 
</li>
{{ end }}

For further details, visit the vendor's site

And this is the css for the form:

.form-element-input {
  width: 90%;
  padding: 8px 14px;
  margin: 6px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.form-element-submit {
  width: 90%;
  background-color: #1d2731;
  color: #fff;
  padding: 10px 16px;
  margin: 6px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

I believe that a form like this could be a unique feature to have, and it could be implemented easily by using the underlying features.

[gcushen]

Thanks for the suggestion. An email form feature is on our roadmap.

The downside with Formspree is that the feature is not much different to just provided your email address in the normal way as Formspree by default still requires your email address in the page code, which bots can then harvest as usual. You would currently have to pay them $120/yr just to hide your email address from bots...

So the main advantage of Formspree is just the slight convenience for a visitor not to have to open their email client to contact you.

[MrinalJain17]

I totally agree with you, this form feature could not be categorized as a 'must have' requirement. Although it is good to know that it's development is being planned. 👍

[PierreMarchand20]

FYI it seems that there exists a feature from netlify to do that https://www.netlify.com/docs/form-handling/ may be it can be useful.