How to Make a Contact Form in Gatsby | Headless WordPress Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 พ.ย. 2024

ความคิดเห็น • 49

  • @TheLegendaryShow
    @TheLegendaryShow 5 ปีที่แล้ว +4

    Really appreciate your contribution. Really help me to get the real idea about Gatsby mutation.
    Thanks

    • @chutezin4816
      @chutezin4816 4 ปีที่แล้ว

      Same thing here, I've been struggling with forms and gatsby for days until I decided to see your video, awesome work, appreciate your help!

  • @good3n
    @good3n 3 ปีที่แล้ว

    This is a really interesting workaround.

  • @manasiroy9510
    @manasiroy9510 2 ปีที่แล้ว +1

    Hi, The video tutorial is just awesome, one question I have. Can you please help me - function.php where need to put, I mean which folder of Gatsby js? May I just put it in the main directory of src? Please reply sir I really need the answer.

    • @najmantube
      @najmantube 2 ปีที่แล้ว +1

      The file name is called 'functions.php', i.e. 'functions' is plural. It doesn't go in Gatsby. It is located in your activated theme folder in WordPress: wp-content\themes\[name-of-theme-you-are-using]. Be careful: you shouldn't overwrite the existing content of functions.php. Rather, you should put the add_action('graphql_register_types', function () { [... rest of code...]} }); at the bottom of the existing functions.php file. BEWARE: if your theme is not a custom theme created by you, updating the theme will cause the code to be lost. Check out how to create a child theme on the Wordpress Codex: developer.wordpress.org/themes/advanced-topics/child-themes/. Once you've created your child theme you can store the specific code there:

    • @rodsilva6927
      @rodsilva6927 2 ปีที่แล้ว

      @@najmantube hello bro, i cant understand that. we are using gatsby, so, what is the theme that i should use in wordpress?? this dont have sense for me

  • @devjejo9219
    @devjejo9219 4 ปีที่แล้ว +1

    Thanks for this! Learned a lot.. Can you make a video regarding user registration and log in using Gatsby and WordPress?

  • @PATELPRIYAL1
    @PATELPRIYAL1 3 ปีที่แล้ว

    Great Tutorial. Can we implement this with Form wizard?

  • @whoisasey
    @whoisasey 3 ปีที่แล้ว

    yeah boi!!! thank you so much for this video!

  • @ZEESHANJUNAID2222
    @ZEESHANJUNAID2222 4 ปีที่แล้ว +1

    If anyone facing issue when running gatsby build.
    You should use fetch.
    Steps using same example:
    1) In your ApolloClient file import fetch from isomorphic-fetch
    import fetch from 'isomorphic-fetch'
    2) Pass fetch to client
    export const client = new ApolloClient({
    uri: 'site.com/graphql' ,
    fetch
    });
    Also don't forget to run the code in gatsby-ssr.js. This will do the job
    export {wrapRootElement} from './gatsby-browser';

  • @sebfrank8061
    @sebfrank8061 5 ปีที่แล้ว

    Great tutorial! What would be the best approach to include the repeater fields? Thank you!

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว +1

      You would use update_sub_field instead of update_field. It has a small example here: www.advancedcustomfields.com/resources/update_sub_field/

    • @sebfrank8061
      @sebfrank8061 5 ปีที่แล้ว

      ​@@WPCasts Tried that but it didn't updated the field in the back-end, maybe something that I missed... but thank you

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว

      Make sure that is in the "have_rows" loop. If that doesn't work, it might be a problem somewhere else.

  • @TomHermans
    @TomHermans 5 ปีที่แล้ว

    Great video. Gonna try this soon

  • @АняКравец-д2б
    @АняКравец-д2б 3 ปีที่แล้ว

    super video! thank you! but I get an error and the data from the "massege" field is written to all other fields. the error looks like this -
    ""type": "DUPLICATE_TYPE",
    "message": "You cannot register duplicate Types to the Schema. The Type 'Template_New' already exists in the Schema. Make sure to give new Types a unique name.",
    "type_name": "Template_New","
    something with plugins, has already reinstalled them. help me please!!

  • @aleferrari8473
    @aleferrari8473 4 ปีที่แล้ว

    Great tutorial! Thank you! There is a way to get notifications through email when a new form is submitted? Will be great! 😁

    • @letsgetcoffee4194
      @letsgetcoffee4194 4 ปีที่แล้ว

      You would need to add wp_mail function after the wp_insert_post if successful

  • @jahangirahmad9490
    @jahangirahmad9490 2 ปีที่แล้ว

    Error in web server but in my local host working properly. Data not submitting web server

  • @najmantube
    @najmantube 2 ปีที่แล้ว

    I couldn't install 'react-apollo'. Error message says my version of React is too high. And it looks like 'react-apollo' hasn't been touched for a couple of years. Anyone else run into this problem? Any ideas for a solution (apart from installing a lower version of React into Gatsby which cannot be a good idea!)?

  • @szy0syz
    @szy0syz 5 ปีที่แล้ว +1

    Great video!
    But should use `gatsby-plugin-apollo`, otherwise it will be wrong in 'gatsby build'

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว +1

      Thanks for this Jerry!

    • @szy0syz
      @szy0syz 5 ปีที่แล้ว

      @@WPCasts Thank you very much for this video, I am using it for development, I will always support you.

    • @aleksandarmaksimovic2644
      @aleksandarmaksimovic2644 4 ปีที่แล้ว

      You can use apollo, but you need to install isomorphic-fetch and use it in client.js

  • @PokerUyNet
    @PokerUyNet 5 ปีที่แล้ว +1

    Great video! Very helpful. Do you can share the code please? Thank you so much! 😁

    • @WPCasts
      @WPCasts  5 ปีที่แล้ว +1

      Working on a blog post that will have all the snippets. :)

    • @samb.4260
      @samb.4260 4 ปีที่แล้ว

      @@WPCasts Please! It's really a pain to go through the code to see if you made a spelling mistake

  • @tholhathshameem6010
    @tholhathshameem6010 3 ปีที่แล้ว

    But mutation is not working with wordpress basic auth... otherwise working fine

  • @jackkhalifa97
    @jackkhalifa97 4 ปีที่แล้ว

    How did you setup your dev environment ?

  • @betoarpi
    @betoarpi 4 ปีที่แล้ว

    Great video, thanks for the easy explanation. I am building a form but I am getting a status of 400. I checked the fields and everything seems to be fine. If I try to create the mutation query in my local graphiql I get this error message: "Schema is not configured for mutations." Do you have any idea why is this happening? am I missing a configuration?

    • @betoarpi
      @betoarpi 4 ปีที่แล้ว

      Nevermind. After a break, I realized I was using Gatsby's graphiql uri instead of my WP's installation. It's been a long week 😅

    • @rodsilva6927
      @rodsilva6927 2 ปีที่แล้ว

      hello bro, i get the same issue. How do you solve that?

  • @emilianogaston
    @emilianogaston 4 ปีที่แล้ว

    very helpfull :)

  • @albertovaldes9820
    @albertovaldes9820 4 ปีที่แล้ว

    How can I use wp_update_post?

  • @Channel-kg6pv
    @Channel-kg6pv 4 ปีที่แล้ว

    i dont understand where function.php should be ? wp-includes/function.php ?

    • @nbbhaskar3294
      @nbbhaskar3294 4 ปีที่แล้ว +2

      it goes like this wp-content/themes/{active-theme}/functions.php, here active-theme is your current theme.

  • @ChadReitsma
    @ChadReitsma 4 ปีที่แล้ว +1

    recaptcha?

  • @PepeTostado
    @PepeTostado 4 ปีที่แล้ว

    how can i send the data to an email?

    • @WPCasts
      @WPCasts  4 ปีที่แล้ว

      WordPress has a PHP mail function called `wp_mail()`. Here is a link to the docs: developer.wordpress.org/reference/functions/wp_mail/

  • @albertovaldes9820
    @albertovaldes9820 4 ปีที่แล้ว

    help please throw me the following error,
    {
    "errors": [
    {
    "message": "Internal server error",
    "category": "internal",
    "locations": [
    {
    "line": 3,
    "column": 3
    }
    ],
    "path": [
    "createSubmission"
    ]
    }
    ],
    "data": {
    "__typename": "RootMutation",
    "createSubmission": null
    }
    }