How to Make a Contact Form?

Themes
1

Hello. I want to add a contact form to my site. Is there a simple way I can do this?

2

An option is to use one of the integrations listed here: Ghost integrations – official apps, plugins & tools

I’ve had good success with Official Ghost + Formspree Integration

1 Like
3

i love u RyanF, thank u :slight_smile:

1 Like
4

I use Google Forms, it’s free and simple. One downside is that it doesn’t offer many customization options.

1 Like
6

Nice site man. What are your average Adsense earnings? :smiley:

1 Like
7

Thanks!

Not enough! I make more with the affiliate programs associated with the companies in my niche. Almost everyone uses an adblocker nowadays, and I don’t blame them.

9

It is very difficult to make a profit in these times. I hope I can be as successful as you, my friend. I wish you success!

1 Like
10

Thank you, @RyanF for sharing this! I followed the instructions and set up a Formspree account to use on my Ghost site. Everything’s going swimmingly so far; just one question:

If a user logs into my Ghost site, that means they have already inputted an email address. In fact, in Handlebars (serverside), I’m even able to access the @member helper object and get attributes like @member.email and @member.name.

How do I propagate this member info to my form so a logged-in user doesn’t need to enter it again on the form?

eg. Right now my form looks like:

image
image748Ă—760 31.9 KB

How do I pre-populate the Email Address field? ie. I know this won’t work because Handlebars is rendered server-side, but some way to access the @member object client-side? A la:

image
image888Ă—412 14.6 KB

TIA! :pray:

PS. This is kinda non-sequitur, but just my 2c: in the Ghost documentation, I think it’d be helpful if you guys aggregated all helpers on one page. Originally, I was looking at Ghost Handlebars Themes - Functional Helpers and hadn’t realized that @member was even available because that info is on this separate page:

image
image793Ă—468 37.1 KB

11

You’re going to need a piece of javascript in the theme, not in code injection. Something like

<script>
const memberEmail = "{{@member.email}}"
</script>

and then you can access memberEmail in any javascript that runs after that (whether in the form page or in the theme) that sets the value of that field to memberEmail… something like this (also in a script tag)

document.getElementById("yourFormID").getElementsByName('email').value = memberEmail

This assumes that you’ve given that form some sort of id (add id=“yourFormID” to the html).

2 Likes
12

This worked! Thank you, @Cathy_Sarisky! :pray:

My HTML final code ended up looking like this:

In theme:

    <script>
        const memberEmail = "{{@member.email}}";
        const memberName = "{{@member.name}}";
        const memberUuid = "{{@member.uuid}}";
    </script>

In HTML card on page:

<form
  action="https://formspree.io/f/blahblahblah"
  method="POST"
>
  <label>
    Your name:
    <input id="userName" type="text" name="userName">
  </label>
  <label>
    Your email:
    <input id="userEmail" type="email" name="userEmail">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  	<input id="userUuid" type="hidden" name="userUuid">
  <button type="submit">Send</button>
</form>

<script>
	document.getElementById("userName").value = memberName;
    document.getElementById("userEmail").value = memberEmail;
    document.getElementById("userUuid").value = memberUuid;
</script>

(The only reason I decided to also pass memberUuid is I plan to use it as a way of verifying that some bad actor didn’t spoof another user’s email and/or name.)

Out of curiosity, is there a reason you would use:

	document.getElementById("yourFormID").getElementsByName('email').value = memberEmail;

over

	document.getElementById("userEmail").value = memberEmail;

?

Just curious. Thanks again!

13

I was just working around the fact that you didn’t have ids in your form fields. Adding them makes lots of sense. :)

1 Like
14

Good call :pray: I’ve added the @member object to the big list of helpers

1 Like