How to create a form on Ghost CMS?

Hello. I’m not a programmer at all and I need to start a minimal site to invite volunteers to develop the project on the way.

What I made myself is here http://3.17.133.134. (installed about a week ago the last version of Ghost and everithyng, AWS Ubuntu 16). It’s not secure, I couldn’t make it SSL, but this is just a test virgion of the site and I will only need SSL when migrating to Linode when starting the real site. What I need now is an online form for volunteers to fill in and submit, which is supposed to be on “volunteering” page.

I used a www.jqueryform.com site to configure the form, I downloaded it, and it’s a folder with 8 files (html, css, js, php) that I don’t know what to do with. If it’d be just html, I’d embed it in Ghost as html code, but what can I do with a bunch of files?
Here https://www.jqueryform.com/help/jqueryform-iframe-embed.php it’s discribed “How to use iframe embed JQuery Form to Your Website”. They say
"Let say you upload all the form files under a folder /contact on your website, and you want to embed it to one of your page contact.html. You can put the embed code in your contact.html like this:

<iframe src="/contact/form.html" ... "

I have a local Ghost installed and I tried to create a folder in different directories changing the src path in iframe accordinly and I’ve failed.
As for Ubuntu I don’t know it at all. And I have no idea how to do it there.

Another alturnative is not to use the form generated by jqueryform but use html for radiobuttons and checkboxes just in Ghost page, but I don’t know how to arrange reCapture and email verification. Besides I don’t know how to arrange sending the form to my email address when the visitor cklicks “submit”. So I guess using generated form (jqueryform) would be eaisie for me.

Could anyone explain to me what should I do? Thank you.

1 Like

The way you’re trying to add a form will either be impossible or not worth the effort.

The easier path will be to use a form as a service. I use Formspree on my site and I’ve been happy with it.

Ghost provides instructions on how to integrate the service. Formspree

Basically you create an account, set up a form, and then add the HTML to your Ghost site.

1 Like

Vlad,

I looked into the Jqueryform site and it will not work for your situation. It is for sites that have PHP processor (application logic is written in PHP) or Wordpress(used as a plugin)

Also Ghost itself does not provide ability to do this kind of thing (unless someone with deep NodeJS knowledge would be willing to hack the core files)

The better option would be, as @TheRoyalFig mentioned, use a third party form service. I have not used any form service myself, but I’ve read about Formspree and it looks like a good option. Another option would be Google Forms. For example I just added a form myself to test this out . All you need to do is :

  • Go to Google Forms Personal

  • Create a new form as you wish (You can start from blank or use a template and customize)

  • Once you are done, click the “Send” button on top-right corner

  • Select the tab “<>”

  • You’ll see “Embed HTML” code. This is the code that needs to go into Ghost post. You can capture this by clicking the “Copy” button and then pasting into Ghost

  • Go into the post/page you want to add the form to

  • While editing the post/page, go to a new line. You will see a “+” sign at the left. Click that, and select “HTML” in the popup

  • Paste the copied code from Google Form to here. You should see the same code that starts with “<iframe”

  • Once this is done, save your post. Then view it. You should be able to see the form there

  • Try entering some data in your form and click on “Submit”, this is what your users will do

  • To see the responses you got, you can go to Google Forms, and click on the form. Then click on “Responses” link at the top.

  • If you want email notification to yourself when someone submits the form, you can click on three dots on the top right on the Responses page, and then click on “Get email notifications on new responses”

I hope this helps.

Hello everyone.
Thank you all. I’m going to check your suggestions a bit later and will let you know.
Thank you!
Vlad.

Hello!
Since I’m not experienced in the field it took me more than half of a day to try both ways suggested here. And I want to start with BIG THANKS to both of you. Thank you!
First I started with Formspree resourse. Unfortunatally it turned out to be not free. That would be fine to pay reasonable money for the product that saves your time, but as I understood it in fact they use a subcribtion system (starting from $10 per month), and I don’t know what will be with your form when you stop paying since this is what they say on their site “Use your own frontend code. Submit to our API. We’ll handle the rest”. If I got it correct, your site will send the data to Formspree, then they process it and send you the result. Which means no them - no results, or stop paying - no results. I have no doubt they are more functional in terms of building the forms than Google form (the other option), and it could be a good choice for those, who develop forms a lot, but this is not my case.
As for Google forms fist I was discouraged that there’s no email verification or reCapture in the forms. But when I started checking it, reCapter goes automatically (I did NOTHING for it to work, but it works)! Here’s what I got on my site http://3.17.133.134/test-form/. And there are a couple of places in settings on Google form page where you can check the boxes to activate email field as a must (unfortunatelly it’s not what verification is, yet at least something), and if you check another box “limit to one response” then the form will require to sing in with a google acount before letting you to fill it in. In my case I decided not to use this option just to let the visitors the option to send the form in the future, but I believe that just having email as a must field in combination wih reCapture will protect the form from bots. So Google form does work for me and I’m happy! And I’d like to say special thank to kose_mark for the detailed guide on how to do that and for the very fact that you’d tried it youself first before suggesting it to me as an option. Thank you, sir! It’s done!

1 Like

You’re welcome Vladimir. I’m glad we could help out.

This is a very helpful community. Feel free to post any other questions you may have in the future.
Good luck with your site!