Add basic contact form functionality to Ghost

Ideas
1

I think that Ghost already has the basic components in place to bring in a very simple contact form:

  • subscribers (it already collects emails)
  • subscribers list (can save a message in that list)
  • email (it can send notification emails)

Could just create another function additional to subscribe, such as contact, for example, which would function just like subscribe, but would add another data point: the message. Thus, this contact could just be a subscription in which the subscriber also leaves a message and which gets saved in the subscribers list (no email delivered, at least until the anti-spam feature is not in) in the following form:

  • email
  • message
  • subscription date
  • status

A simple anti-spam feature could be added via the Google ReCaptcha API (should not be that complicated and should most probably satisfy the requirements of 80% of the users) and then the message could be delivered via email as well (with a default “Message from your Ghost site” subject line or something similar).

Just my 2 cents. :slight_smile:

2

I would also love to see that feature added. :slight_smile:

1 Like
3

If you already host your Ghost blog with Docker, it’s not hard to add this tool: GitHub - jlelse/Maily-Form: Forms on any website. It enables you to easily add forms to any website.

Disclaimer: I’m the developer, but developed it for exactly that purpose.

4

In the meantime, for contact forms there are also for example Cognito Forms, Google Forms, Kontactr, etc.

5

its important to have contact function i think its a must for any CMS or blog

2 Likes
6

We’ve got a few ways in which you can integrate a form :slightly_smiling_face:
https://ghost.org/integrations/surveys-forms/

1 Like
7

I have seen those integrations but it would help if its natively built on ghost that can be activated or deactivated according to the need of the site owner instead of having to use all these services that require you to sign up and give your information

1 Like
8

Hey everyone :wave:. We’ve been working on our extensive list of guides and tutorials. We’ve just added a tutorial on how to add a contact form to your Ghost theme:
https://ghost.org/tutorials/adding-a-contact-form/

Hope people file this helpful :v:

3 Likes
9

Hi @DavidDarnes,
I was reading this tutorial to add a contact form.
is it my problem or has the “Template” field been removed from the page creation options? I do not see it.

I solved it by directly adding the form in an html card of the page

Isn’t there a method to send an email directly without using an external service?

10

The template field will only appear if you’ve created a new .hbs file with the prefix of custom- in the name. Adding directly is fine too :slight_smile:, it’s just not as re-usable. There are method but it either requires more self management or modifying the Ghost codebase, or a combination of both

1 Like
11

I wish comments were enabled in these tutorials. I am a beginner with front end web stuff and ghost themes. A couple of comments/questions:

  • Where do I insert the CSS - the screen.css file?
  • The action URL is provided by formspree after you sign up and create a form on their site
  • The tutorial says we are creating a custom post template, but we are editing the page.hbs. Is page.hbs itself a custom post template?
  • Where in the page.hbs file do I insert the {{{block “form-area”}}}? I don’t know the implication of putting it above/below the {{#post}}

Thanks in advance,

12

No need for comments on the tutorials, by posting on the forum you are already in the right place for asking questions!

  • As long as the CSS file is used in the theme then any .css can contain the form styles. Which theme are you customising?
  • As you’ll be using the Formspree as a service then yes you’ll need an account, but they use a standard method of creating action URLs as shown in the tutorial
  • custom-page-with-form.hbs is the custom template, which is inheriting the code from the page.hbs template
  • You can put the contact form block anywhere in the template file, it really depends on where you want the form to appear on the page

Hope this clears things up for you!

13

Should be offered to Ghost pro subscribers. Surprised it isn’t.

14

i use this from Hooshmand.net

easy to use and working well!

15

Now that we have native comments in ghost, it would be interesting to see if we can use that functionality to also build a contact page.

This is what I’m thinking:

  • if we are able to specify to the {{comments}} helper to not list the comments and to only add the input handler to create new comments, and
  • if we are able to create a “private” page (allowed to be viewed only by the admins) in which the {{comments}} helper is used to listing all those comments to be managed,
    then we can create a simple and private contact page ourselves.

There are a few ifs, but I think this is doable and it might be in a ghost type way for a lot of themes out there. What do you think?

2 Likes