search

LekoArts / gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
https://themes.lekoarts.de
MIT License
1.87k stars 545 forks source link

[gatsby-theme-minimal-blog]How do I got about adding a contact form (just like the about section in this theme)? #545

Closed rajatgupta3 closed 3 years ago

rajatgupta3 commented 3 years ago

I am a beginner to React and Gatsby.

Firstly, I tried to make a contact folder in pages and added an index.mdx. However, it was not able to render the form. It seems I need to create a contact.js file in the pages but when I did so it did not work.

I was trying to follow this: https://www.gatsbyjs.com/docs/building-a-contact-form/

mfahmirukman commented 3 years ago

this will help you on what "Shadowing" mechanism is on Gatsby https://www.gatsbyjs.com/docs/recipes/pages-layouts/

LekoArts commented 3 years ago

Hey, thanks for the question!

Like with the "About" section you should create a MDX file inside the content/pages directory: https://github.com/LekoArts/gatsby-starter-minimal-blog/tree/master/content/pages

You then can (like in the about page) write/add content you like, including React components. Of course, you can also create a file src/pages/contact.js but then you'll need to import components from the theme to keep the same aesthetics.

So create a file at content/pages/contact/index.mdx with the contents:

---
title: Contact
slug: "/contact"
---

import ContactForm from "./contact-form"

You can contact me here:

<ContactForm />

You'll need to have a ContactForm component in the same directory for this to work.

rajatgupta3 commented 3 years ago

Hi,

Thank you for taking the time to give a response. Really appreciate it!