[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] How do I use the VTEX facebook pixel app? Provide documentation and configuration details.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/vtex-io-deprecated-apps)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/updates/release-notes)

VTEX IO Apps

[Basic components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/basic-components)

---

[Store Components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/store-components)

---

[Advanced components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/advanced-components)

---

[B2B components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/b2b-components)

---

[B2B Suite](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.b2b-suite)

---

[Functional Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/functional-apps)

---

[Layout Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/layout-apps)

---

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/pixel-apps)

[Alexa Certify](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.alexa-certify-code)

[Audara](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.audara)

[Bluecore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.bluecore)

[Blueknow app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.blueknow)

[BTG360](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.btg360)

[Cookiebot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.cookiebot)

[Cookie Script](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.cookie-script)

[CyberSource Fingerprint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.cybersource-fingerprint)

[Elfsight](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.elfsight)

[Facebook pixel](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.facebook-pixel)

[Facebook Domain Verification](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.facebook-domain-verification)

[Google Adwords](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.google-adwords)

[Google Customer Reviews](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.google-customer-reviews)

[Hotjar](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.hotjar)

[Idea CRM](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.ideacrm)

[Iubenda](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.iubenda)

[JivoChat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.jivochat)

[Kelkoo app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.kelkoo)

[LogRocket](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.logrocket)

[Lucky Orange](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.lucky-orange)

[Search Console](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.google-search-console)

[Shareasale](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.shareasale)

[smarthint](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.smarthint)

[Suiteshare](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.suite-share)

[Tawk.to](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.tawk-to)

[Trustpilot](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.trustpilot)

[Zendesk Chat](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.zendesk-chat)

[Zopim](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.zopim)

---

[My Account - StoreV2 version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.my-account)

---

[VTEX IO deprecated apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/vtex-io-deprecated-apps)

---

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/vtex-io-apps)

[Pixel Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/guides/pixel-apps)

Facebook pixel

Official extension

Version: 2.2.3

Latest version: 2.2.3

VTEX Facebook Pixel first-party app allows you to connect your store to the Facebook ad services. You will be able to create ads and manage campaigns in real time through a Facebook "Ads Manager" account.

## Intalling Facebook pixel app

1. Open the [VTEX App Store](https://read.calvincode.net/reader?url=https://apps.vtex.com/vtex-facebook-pixel/p) and install this app on your store, or run the following command on the VTEX IO CLI:

`1

vtex install vtex.facebook-pixel@2.x

`

1. Now, open the app settings on your [store's Admin](https://read.calvincode.net/reader?url=https://your-store-name.myvtex.com/admin/apps).
2. Click on facebook pixel app, and fill in the Facebook Pixel id.

[Elfsight« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.elfsight)[Facebook Domain VerificationNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.facebook-domain-verification)

See also

[VTEX App StoreVTEX IO Apps](https://read.calvincode.net/reader?url=https://apps.vtex.com/)

ON THIS PAGE

[Intalling Facebook pixel app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/apps/vtex.facebook-pixel/docs/apps/vtex.facebook-pixel%23intalling-facebook-pixel-app)

Was this helpful?

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides vtex io documentation manifest in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-getting-started)

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-builders)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-peerdependencies)

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/updates/release-notes)

App Development

[What is VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-what-is-vtex-io)

---

[What is a VTEX App](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-what-is-a-vtex-app)

---

[Governance and shared security in VTEX IO apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/governance-and-shared-security-in-vtex-io-apps)

---

[Code samples and templates](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/code-samples)

---

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-getting-started)

---

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest)

[Billing Options](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-billing-options)

[Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-builders)

[Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-dependencies)

[Peer Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-peerdependencies)

---

[VTEX IO CLI](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference)

---

[Workspace](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-workspace)

---

Managing apps

---

Development guides

---

[Node apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/app-development-guides)

---

[GraphQL in VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/graphql-in-vtex-io)

---

[Policies and permissions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-policies)

---

[A/B tests](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/ab-tests)

---

[Deployment](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-making-your-new-app-version-publicly-available)

---

[VTEX App Store](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-app-store)

---

[Edition Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/managing-edition-apps)

---

[Frequently asked questions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-frequently-asked-questions)

---

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/app-development)

Project structure

[Manifest](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest)

Manifest

Learn more about the manifest file, a crucial document containing metadata that defines and shapes the core attributes and functionalities of a VTEX IO app.

Every [VTEX IO app](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-a-vtex-app) must have a `manifest.json` file in its root folder. This file serves as the initial point of communication with [VTEX IO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-what-is-vtex-io) and holds important metadata about an app, such as its name, version, vendor, description, and dependencies.

## Fields

Check the following snippet, which shows a manifest example and its supported fields.

Click each field to learn more.

manifest.json

`1

{

2

["name"](#name): "app-name",

3

["vendor"](#vendor): "vtex",

4

["version"](#version): "1.0.0",

5

["title"](#title): "App Name",

6

["description"](#description): "Brief description of your app.",

7

["builders"](#builders): {

8

 "react": "3.x"

9

 },

10

["scripts"](#scripts): {

11

 "postreleasy": "vtex publish --verbose"

12

 },

13

["dependencies"](#dependencies): {

14

 "vtex.styleguide": "9.x"

15

 },

16

["peerDependencies"](#peerdependencies): {

17

 "vtex.store": "2.x"

18

 },

19

["policies"](#policies): [...],

20

["settingsSchema"](#settingsschema): {...},

21

["credentialType"](#credentialtype): {...}

22

}

`

For a real example of a `manifest.json` file, check out [this file](https://read.calvincode.net/reader?url=https://github.com/vtex-apps/store-theme/blob/master/manifest.json).

## `name`

The app name. It should concisely express the app's purpose.

App names are in [kebab case](https://read.calvincode.net/reader?url=https://en.wiktionary.org/wiki/kebab%5Fcase). Basically, they must consist of lowercase letters separated by hyphens. Special characters, such as `*` and `@`, and numbers at the beginning of the name are not recommended.

[Fields](#fields) 🔼

## `vendor`

The app owner, i.e., the VTEX account responsible for the app development, maintenance, and distribution.

If the app is to be sold on the VTEX App Store, the vendor will profit from its installation. Therefore, remember the following: an app must have only one vendor. Even if the app is installed on multiple accounts, you should not change the app's `vendor` value for each account.

[Fields](#fields) 🔼

## `version`

The app version, following [Semantic Versioning 2.0.0](https://read.calvincode.net/reader?url=https://semver.org/).

> For more information, see [Understanding app versioning](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-releasing-a-new-app-version%23understanding-app-versioning).

[Fields](#fields) 🔼

## `title`

The app distribution name. This name is the one used in the Apps section of the Admin and in the VTEX App Store.

[Fields](#fields) 🔼

## `description`

A brief description explaining the app's purpose.

[Fields](#fields) 🔼

## `builders`

The list of builders used by the app. A builder is an abstraction for configuring other IO services, such as `node`, `dotnet`, `react`. It acts as an API service, which processes and interprets a directory from the app. Hence, you can use as many builders as you want in a single app.

For example, if you want to **develop React components** in an app, you should use the builder `react@3.x` and declare it in the manifest:

`1

"builders": {

2

 "react": "3.x"

3

}

`

And create a `react` folder inside the app, adding the component files. Each builder has its own set of rules and validation processes.

> For more information, see [Builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-builders).

[Fields](#fields) 🔼

## `scripts`

The list of scripts the app runs.

[Fields](#fields) 🔼

## `dependencies`

The list of other VTEX IO apps that the app relies on to properly work.

The most recurrent use of VTEX IO apps as dependencies is for:

* Using VTEX Store Framework blocks.
* Importing React components from another app.
* Importing Typescript types from a GraphQL service app.
* Using GraphQL or REST definitions declared in another app.
* Implementing a GraphQL schema from another app.

> For more information, see [Dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-dependencies/).

[Fields](#fields) 🔼

## `peerDependencies`

The list of other apps that the app relies on to properly work. However, unlike regular dependencies, peer dependencies are not automatically installed in an account. Hence, these are mostly used in cases where an app relies on paid apps or a specific version of an app.

> For more information, see [peerdependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-peerdependencies/).

[Fields](#fields) 🔼

## `policies`

The list of policies that grant permissions to the app, in case it needs access to external services or specific data from other sources, such as external APIs.

> For more information, see [Policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-policies/).

[Fields](#fields) 🔼

## `settingsSchema`

The layout settings of the app displayed in the VTEX Admin.

Using [JSON Schema](https://read.calvincode.net/reader?url=https://json-schema.org/), you can accept multiple fields with multiple data types. The VTEX Platform manages the persistence of information, and you may fetch the current configuration in your app code.

For example, in the `vtex.wordpress-integration` app, the following `settingsSchema`:

`1

"settingsSchema": {

2

 "title": "Wordpress Integration",

3

 "type": "object",

4

 "properties": {

5

 "endpoint": {

6

 "title": "Wordpress URL",

7

 "description": "Enter the URL of your Wordpress installation in the form http://www.example.com/",

8

 "type": "string"

9

 },

10

 "titleTag": {

11

 "title": "Title tag for blog homepage",

12

 "description": "Will also be appended to inner blog pages",

13

 "type": "string"

14

 },

15

 "blogRoute": {

16

 "title": "URL path for blog homepage",

17

 "description": "Example: if 'foo' is entered here, blog homepage will be at http://www.yoursite.com/foo . Make sure routes in your store-theme match this setting. If left blank, default is 'blog'",

18

 "type": "string"

19

 }

20

 }

21

 }

`

This will generate the following form once that app is installed:

![{"base64":"  ","img":{"width":1952,"height":1384,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":144705,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-manifest-0.png"}}](https://read.calvincode.net/reader?url=https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-io-documentation-manifest-0.png)

[Fields](#fields) 🔼

> For more information, see [Creating an interface for your app settings](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-creating-an-interface-for-your-app-settings).

## \[DEPRECATED\] `credentialType`

The credential type. When set as `relative`, an app request can only be performed if the app and the role who called it have the required permissions. When set as `absolute`, a request from the app can be performed if the app has the necessary permissions.

[Fields](#fields) 🔼

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-manifest.md)

[Master Data CRUD« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest//docs/guides/create-master-data-crud-app)[Billing OptionsNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest//docs/guides/vtex-io-documentation-billing-options)

Contributors

2

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F112641072%3Fv%3D4%26w=64%26q=75)](https://github.com/barbara-celi)

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F60782333%3Fv%3D4%26w=64%26q=75)](https://github.com/carolinamenezes)

ON THIS PAGE

[Fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23fields)

[name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23name)

[vendor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23vendor)

[version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23version)

[title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23title)

[description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23description)

[builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23builders)

[scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23scripts)

[dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23dependencies)

[peerDependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23peerdependencies)

[policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23policies)

[settingsSchema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23settingsschema)

[\[DEPRECATED\] credentialType](https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest#deprecated-credentialtype)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/guides/vtex-io/Reference/concepts/vtex-io-documentation-manifest.md)

Copy page

On this page

ON THIS PAGE

[Fields](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23fields)

[name](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23name)

[vendor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23vendor)

[version](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23version)

[title](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23title)

[description](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23description)

[builders](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23builders)

[scripts](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23scripts)

[dependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23dependencies)

[peerDependencies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23peerdependencies)

[policies](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23policies)

[settingsSchema](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest%23settingsschema)

[\[DEPRECATED\] credentialType](https://developers.vtex.com/docs/guides/vtex-io-documentation-manifest/docs/guides/vtex-io-documentation-manifest#deprecated-credentialtype)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)


[System] You are a VTEX documentation expert. You provide accurate, detailed information about VTEX platform, APIs, apps, and Store Framework development.

[User] Provide a guide on guides faststore api extensions use cases adding a contact form to a landing page in VTEX.

[Assistant]
Documentation

[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)

[GuidesLearn how to use our APIs and extend the VTEX platform.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides)

[API ReferenceExplore detailed information about our endpoints.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/api-reference)

[App DevelopmentLearn how to build cloud-based apps and integrations.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/app-development)

[Storefront DevelopmentExpress your brand identity creating unique storefronts.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/storefront-development)

[VTEX IO AppsFind pre-built solutions to grow your business.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/vtex-io-apps)

[TroubleshootingFind practical solutions to common development issues.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/troubleshooting)

[Release NotesStay up to date with our latest releases and bug fixes.](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-overview)

[Extending API schemas](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-extending-api-schema)

[Extending queries using fragments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-extending-queries-using-fragments)

[Consuming FastStore API extension with custom components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-consuming-api-extensions)

[Best practices for using API extensions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-best-practices)

[API extensions - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-overview)

[Adding a contact form to the landing page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page)

[Adding available installment information in PDP](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-installment-information-in-the-product-details-page)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/storefront-best-practices)

---

[Guides](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides)

[API Reference](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/api-reference)

[App Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/app-development)

[Storefront Development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/storefront-development)

[VTEX IO Apps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/vtex-io-apps)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/troubleshooting)

---

[Release Notes](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/updates/release-notes)

Storefront Development

[Getting started with storefront solutions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/getting-started-with-storefront-solutions)

---

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore)

[FastStore versions and support levels](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/getting-started-faststore-versions-and-support-levels)

[Getting Started](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/getting-started-overview)

[FastStore WebOps](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/webops-dashboard)

[Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/headless-cms-overview)

[Developer tools and references](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/developer-tools-overview)

[Styling](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/styling-overview)

[UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/components-index)

[Implementing storefront features](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/storefront-features-overview)

[FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/faststore-api-overview)

[FastStore SDK](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/sdk-overview)

[Developing and overriding UI components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/developing-and-overriding-components-overview)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-overview)

[Extending API schemas](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-extending-api-schema)

[Extending queries using fragments](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-extending-queries-using-fragments)

[Consuming FastStore API extension with custom components](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-consuming-api-extensions)

[Best practices for using API extensions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-best-practices)

[API extensions - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-overview)

[Adding a contact form to the landing page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page)

[Adding available installment information in PDP](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-installment-information-in-the-product-details-page)

[Managing URLs with redirects and rewrite paths](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/routing-managing-urls-with-redirects-and-rewrite-paths)

[Managing performance](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/managing-performance-overview)

[SEO](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/seo-overview)

[Going live](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/go-live-overview)

[Troubleshooting](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/troubleshooting-overview)

---

[Store Framework](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/store-framework)

---

(Legacy) CMS Portal

---

[Storefront best practices](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/storefront-best-practices)

---

[Storefront development](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/storefront-development)

[FastStore](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore)

[Extending the FastStore API](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-overview)

[API extensions - Use cases](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-overview)

Adding a contact form to a landing page

This guide describes how to handle data from a Contact Us form and send it to a third-party API. To illustrate this, we will create a Contact Us page with a Contact form.

> For detailed instructions on API extensions, see the [API extensions](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-overview) guide.

## Context

* You want to create a Contact Us page so shoppers can contact your store.
* You want to add a form so shoppers can send their requests or feedback.
* To handle the data submitted through this contact form, you need to [extend the FastStore API with third-party API schemas](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-extending-api-schema%23extending-faststore-api-with-third-party-api-schemas) to handle the data that comes from the form.

## Implementation

### Creating GraphQL files

First, you need to set up the necessary GraphQL files to handle data submissions.

1. In your store repository, go to the `src` folder. If you don’t have it, create a new `graphql` folder.
2. Inside `graphql`, create the `thirdParty` folder.
3. In the `thirdParty` folder, create two subfolders:
   * `resolvers`
   * `typeDefs`
4. Create an `index.ts` file inside the `resolvers` folder to set up the base structure for your resolver functions.

> For more details about code implementation, see the [thirdParty](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/tree/main/src/graphql/thirdParty) folder available in the [playground.store](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store) repository.

### Defining the types

Next, define the GraphQL types for your contact form in a file called `contactForm.graphql` inside the `thirdParty` folder. This file will contain type definitions for your GraphQL schema.

1. In the `graphql/thirdParty/resolvers` folder, create a `contactForm.ts` file to handle the resolver logic for your contact form.
2. In the `graphql/thirdParty/typeDefs` folder, create a `contactForm.graphql` file and add the following schema definitions.
* `ContactFormResponse`: Defines the structure of the response from the API, with a mandatory message field.
* `ContactFormInput`: Specifies the input fields required for the contact form.
* `Mutation`: Declares a mutation for submitting the contact form data.

### Creating the resolvers

Now, let's create the resolver function to process the form submission.

In the `contactForm.ts` file, add the following code. This file imports the `contactFormResolver` and combines it with other potential resolvers into a single object.

#### Consolidating the resolvers

In the `graphql/thirdParty/resolvers` folder, create an `index.ts` file to consolidate the resolvers:

### Creating a new section

Create a new section to receive the Contact Form data.

1. In the `src/components` folder, create the `ContactForm` folder.
2. In the `ContactForm` folder, create the following files:
   * `ContactForm.tsx`: The main component file.
   * `contant-form.module.scss`: The stylesheet for the component.
3. Add the following code to the `ContactForm.tsx`.
* This component renders a contact form with name, email, subject, and message fields.
* The `onSubmit` function handles form submission, sends the data to the server, and clears the form fields upon success.

### Creating a stylesheet for the section

In the `contact-form.module.scss` file, add the following code. The stylesheet applies specific styles to the Contact Form component, including layout and spacing adjustments.

> For more information about code implementation, see the [ContactForm](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store/tree/main/src/components/ContactForm) folder available in the [playground.store](https://read.calvincode.net/reader?url=https://github.com/vtex-sites/playground.store) repository.

### Synchronizing the changes with the Headless CMS

Add the section to Headless CMS by following the instructions available in [Syncing components with Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/overrides-syncing-components-with-the-headless-cms).

The following schema was used as an example.

> For more information about code implementation, see the `sections.json` file available in the playground.store repository.

`1

src

2

┗ 📂 graphql

3

 ┗ 📂thirdParty

4

 ┣ 📂 resolvers

5

 ┗ 📄index.ts

6

 ┗ 📂 typeDefs

`

### Creating a new landing page

Let’s create a new landing page for the Contact Us page to add the new Contact Form section. For this part, we will follow the [Creating a new page tutorial](https://read.calvincode.net/reader?url=https://help.vtex.com/en/tutorial/managing-pages--3DO6rBhZ1p3zndnFu5BgRt%23creating-a-new-page).

1. Go to the VTEX Admin and access Storefront > Headless CMS.
2. Click `Create document` and select `Landing Page`.
3. In the `Sections` tab, click add (`+`) and choose the `ContactForm` section.
4. Go to the `Settings` tab and add the following path in the **Path** field: `/contact-us.`
5. Click `Save`.

## Results

Once you have [set your development mode](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/building-sections/overrides/sending-components-to-the-headless-cms%23previewing-changes-in-the-development-mode) to see the changes locally, access the `https://localhost:3000/contact-us` and you will see the new landing page with the Contact Us form. Check the storefront example below:

![{"base64":"  ","img":{"width":1999,"height":1003,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":91243,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/api-extension-example-one___ceffcf6726b7316bbe61eaf4c013e069.png"}}](https://read.calvincode.net/reader?url=https://vtexhelp.vtexassets.com/assets/docs/src/api-extension-example-one___ceffcf6726b7316bbe61eaf4c013e069.png)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

Was this helpful?

Yes

No

[Suggest Edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/api-extensions/api-extensions-use-cases/adding-a-contact-form-to-a-landing-page.mdx)

[API extensions - Use cases« Previous](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-overview)[Adding available installment information in PDPNext »](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-installment-information-in-the-product-details-page)

Contributors

1

[![Photo of the contributor](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/_next/image?url=https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F67270558%3Fv%3D4%26w=64%26q=75)](https://github.com/mariana-caetano)

ON THIS PAGE

[Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23context)

[Implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23implementation)

[Creating GraphQL files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-graphql-files)[Defining the types](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23defining-the-types)[Creating the resolvers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-the-resolvers)[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-a-new-section)[Creating a stylesheet for the section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-a-stylesheet-for-the-section)[Synchronizing the changes with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23synchronizing-the-changes-with-the-headless-cms)[Creating a new landing page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-a-new-landing-page)

[Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23results)

Was this helpful?

 Send feedback

[Suggest edits (GitHub)](https://read.calvincode.net/reader?url=https://github.com/vtexdocs/dev-portal-content/edit/main/docs/faststore/docs/api-extensions/api-extensions-use-cases/adding-a-contact-form-to-a-landing-page.mdx)

Copy page

On this page

ON THIS PAGE

[Context](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23context)

[Implementation](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23implementation)

[Creating GraphQL files](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-graphql-files)[Defining the types](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23defining-the-types)[Creating the resolvers](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-the-resolvers)[Creating a new section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-a-new-section)[Creating a stylesheet for the section](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-a-stylesheet-for-the-section)[Synchronizing the changes with the Headless CMS](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23synchronizing-the-changes-with-the-headless-cms)[Creating a new landing page](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23creating-a-new-landing-page)

[Results](https://read.calvincode.net/reader?url=https://developers.vtex.com/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page/docs/guides/faststore/api-extensions-use-cases-adding-a-contact-form-to-a-landing-page%23results)

On this page

[Github](https://read.calvincode.net/reader?url=https://github.com/vtex-apps)[Help Center](https://read.calvincode.net/reader?url=https://help.vtex.com/)[Community](https://read.calvincode.net/reader?url=https://community.vtex.com/?%5Fga=2.198523433.743584735.1647618303-1974737580.1645714642)[Feedback](https://read.calvincode.net/reader?url=https://docs.google.com/forms/d/e/1FAIpQLSfmnotPvPjw-SjiE7lt2Nt3RQgNUe10ixXZmuO2v9enOJReoQ/viewform?entry.1972292648=developers.vtex.com%26entry.1799503232=)