Thread Discussion

Are we able to retrieve the form information in the editor here?

This is the object I get when I log the result of the <https://github.hubspot.com/cms-react/field-types/type-aliases/type-alias.FormFieldType.html|For...

i would also like to know how to do this too

<@U08F6001V55> I think what I've figured out is that there isn't a way to fetch form fields in the React component directly (or through GraphQL). You ...

i was wondering if that hublDataTemplate might've been a way to access it but idk for sure

<@U08F6001V55> Right now I'm researching how to use the `form_id` I get from the object, and retrieve the full form info using the <https://developers...

yeah that'd amazing!

i actually just built a module with a custom form using material ui components. for now, i ended up using a repeater group with text fields to handle ...

MUI is great, I've really enjoyed using it in the past! I'm doing something similar building the form with an internal React component library. I thi...

I'd be interested in how you went about this <@U066BM0FLH0> -

hey <@U066BM0FLH0>! any luck on the form fields generating a custom form and handling submission with the api?

<@U08F6001V55> <@U04B3M0M18E> Here's an overview of how I was able to do this. Unfortunately I can't share the repo because I'm working in a private c...

oh! yup, i was deff stuck at step 4. so getServerSideProps is the way to victory!

Step 2: This is what my form field looks like ```import { FormField, ModuleFields } from '@hubspot/cms-components/fields'; export const fields =...

*Step 4:* Recommend watching this <https://www.youtube.com/watch?v=N0arXQOyfXo&ab_channel=HubSpotDevelopers|whole video> by <@UAYBXDG4U> to get help w...

oh wow! this is way involved than dealing with simple text field :smile:

is this pattern testable in local env. too?

this might also be the way to handle CTAs, menus, etc.

I'm not sure—I don't actually use local env much because I haven't found a way to do that well without having to set default values in all my fields.

So yeah, it's super involved. If anyone reading this doesn't have experience with APIs or feel super comfy handling forms on your own, I recommend jus...

<@U08F6001V55> Do you actually need to create the form from scratch with React fields, or do you think you could get away with just using the HubSpot ...

If you just need the embedded form, it's super simple

In your module ```import { Form as HubSpotEmbedForm } from '@hubspot/cms-components'; // Put this inside your component // "form" corresponds to wha...

well i'd like to integrate it with react since im building from a figma comp. im kinda goin for creating a branded look that's seamless from the websi...

Ok, yeah that's what I needed to do as well

HutSpotEmbedForm? wow, that's a thing?

This definitely seems way more involved than the embed. I was hoping I could just reference the JS `HubSpotForms.create` or that embed.

<@U04B3M0M18E> Totally doable to just create the embedded form! Recommend that unless you need something super custom.

<@U08F6001V55> Feel free to try to get through Step 4, and hit me up if you have any questions!

yeah, i have a fancy form lol. it's inside a card and submitting the form does the little card flip with a loady spinner and success message

Yeah. That seems like an easier route. Makes one appreciate the complexity that goes into managing forms

<@U066BM0FLH0> couple questions. 1) im not sure what data type is returned from getSecret() but i have a hunch it's a string? i checked the file on th...

<@U08F6001V55> Here are some links on adding a secret: • <https://developers.hubspot.com/docs/guides/cms/tools/hubspot-cli/cli-v7#add-a-secret> • <htt...

ha! i literally _just_ set up my private app

still working through it. i feel like there's gotta be some way to pull the api key w/o hard coding it into the react code tho

<@U08F6001V55> Here are the private app docs (just in case someone else see this and needs it): <https://developers.hubspot.com/docs/guides/apps/priva...

<@U08F6001V55> You should get your api key from the private app set-up, and then add it as a secret using the first link I shared up there. Then you ...

<@U066BM0FLH0> ok sooooo i am trying to add the `secretNames` array in `cms-assets.json` file but im not sure if i can just put it anywhere in the jso...

Try putting it inside your project, because the project you upload needs to have access to it to inject into your code. Mine is at `applications/my-ap...

```{ "label": "my-app", "outputPath": "", "secretNames": ["FORM_API_KEY"] }```

yep mine is like that too, same tier in the file same directory in the proj

oh, i wonder if i need to deploy the change back to hubspot before it actually works?

im just testing locally lol

I'm not sure how to make it work locally—I don't typically test locally. I haven't been able to set that up well.

oh yeah i just use the hs-cms-dev-server

they even updated the UI so it looks prettier now and nice little overview of all the react modules in one page

<@U066BM0FLH0> for step 7, did you add support for server-side validation before it's passed over to the hubspot endpoint?

with this react setup, im wondering how that might be handled

I’m using simple HTML native validation right now, but I’ll have to build something more robust eventually.