Contact form following Ghost's instructions

I’m following this tutorial on how to apply a contact form to a ghost website.

I understand the process of setting up a custom template, and copying the page.hbs code into the new custom-page-with-form.hbs file. I also understand how to add the form code in between the tags. However, Step 3, styling the form… it doesn’t give any indication of where the css should be placed in the template file.

Should it be placed in the custom-page-with-form.hbs file? or added as a code injection in the header section of the page settings screen after the custom template has been selected?

Hey @Beric,

The most straightforward way would be placing the CSS in Code injection > Site Header field. Make sure you’ve placed the styles between <style> tag like:

<style>
    .contact-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0.2em 1em;
    }
    ...
</style>

Or if you’ve already setup the development environment (e.g. for Casper), you can place the styles in a separate file (contact.css for example) and import it in assets/css/screen.css like this.

I appreciate your response greatly minimaluminium. The issue with the documentation is that it doesn’t make it clear that the css should be wrapped in tags. Maybe that’s an obvious noob mistake on my part.

Having said that, I created the custom template and copied the page.hbs code over to it so I can select the custom templete in page settings. I’ve applied the HTML in the / html box and the css in style tags in code injection header.

The form looks fine in the editor and then when I preview the page the form is all over the place. Are there any links you recommend to get a simple contact form installed on Ghost Casper? I’ve tried formspree to no avail.

<style> tag is only required when you enter the CSS in Code injection, because the code gets injected inside the <head> of the document. You don’t need that in other situations (e.g. in a css file).

It could be helpful if you could share your site URL, so I can inspect the issue on your site.