diff --git a/app/client/src/pages/setup/DataCollectionForm.tsx b/app/client/src/pages/setup/DataCollectionForm.tsx
new file mode 100644
index 0000000000..c7d6f67595
--- /dev/null
+++ b/app/client/src/pages/setup/DataCollectionForm.tsx
@@ -0,0 +1,75 @@
+import React, { memo, useState } from "react";
+import styled from "styled-components";
+import { Toggle } from "design-system";
+import { ControlWrapper } from "components/propertyControls/StyledControls";
+import {
+ AllowToggle,
+ AllowToggleLabel,
+ AllowToggleWrapper,
+ FormBodyWrapper,
+ FormHeaderIndex,
+ FormHeaderLabel,
+ FormHeaderSubtext,
+ FormHeaderWrapper,
+ StyledLink as Link,
+} from "./common";
+import { TELEMETRY_URL } from "constants/ThirdPartyConstants";
+import {
+ createMessage,
+ WELCOME_FORM_DATA_COLLECTION_BODY,
+ WELCOME_FORM_DATA_COLLECTION_HEADER,
+ WELCOME_FORM_DATA_COLLECTION_LABEL_DISABLE,
+ WELCOME_FORM_DATA_COLLECTION_LABEL_ENABLE,
+ WELCOME_FORM_DATA_COLLECTION_LINK,
+} from "@appsmith/constants/messages";
+
+const DataCollectionFormWrapper = styled.div`
+ width: 100%;
+ position: relative;
+ padding-left: ${(props) => props.theme.spaces[17] * 2}px;
+`;
+
+const StyledLink = styled(Link)`
+ display: inline-block;
+ margin-top: 8px;
+`;
+
+export default memo(function DataCollectionForm() {
+ const [allowCollection, setAllowCollection] = useState(true);
+ return (
+
+
+ 2.
+
+ {createMessage(WELCOME_FORM_DATA_COLLECTION_HEADER)}
+
+
+ {createMessage(WELCOME_FORM_DATA_COLLECTION_BODY)}
+
+
+ {createMessage(WELCOME_FORM_DATA_COLLECTION_LINK)}
+
+
+
+
+
+
+
+ setAllowCollection(value)}
+ value={allowCollection}
+ />
+
+
+ {allowCollection
+ ? createMessage(WELCOME_FORM_DATA_COLLECTION_LABEL_ENABLE)
+ : createMessage(WELCOME_FORM_DATA_COLLECTION_LABEL_DISABLE)}
+
+
+
+
+
+ );
+});
diff --git a/app/client/src/pages/setup/SetupForm.tsx b/app/client/src/pages/setup/SetupForm.tsx
index 9efb0a233f..eac3abae6e 100644
--- a/app/client/src/pages/setup/SetupForm.tsx
+++ b/app/client/src/pages/setup/SetupForm.tsx
@@ -1,19 +1,20 @@
-import React, { useRef, useState } from "react";
+import React, { useRef } from "react";
import styled from "styled-components";
import { connect } from "react-redux";
+import DataCollectionForm from "./DataCollectionForm";
import DetailsForm from "./DetailsForm";
import NewsletterForm from "./NewsletterForm";
import AppsmithLogo from "assets/images/appsmith_logo.png";
import {
- WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME,
+ WELCOME_FORM_USECASE_FIELD_NAME,
WELCOME_FORM_EMAIL_FIELD_NAME,
WELCOME_FORM_NAME,
WELCOME_FORM_NAME_FIELD_NAME,
WELCOME_FORM_PASSWORD_FIELD_NAME,
WELCOME_FORM_ROLE_FIELD_NAME,
WELCOME_FORM_ROLE_NAME_FIELD_NAME,
- WELCOME_FORM_USECASE_FIELD_NAME,
WELCOME_FORM_VERIFY_PASSWORD_FIELD_NAME,
+ WELCOME_FORM_CUSTOM_USECASE_FIELD_NAME,
} from "@appsmith/constants/forms";
import {
FormErrors,
@@ -25,6 +26,7 @@ import {
import { isEmail, isStrongPassword } from "utils/formhelpers";
import { AppState } from "@appsmith/reducers";
import { SUPER_USER_SUBMIT_PATH } from "@appsmith/constants/ApiConstants";
+import { useState } from "react";
const PageWrapper = styled.div`
width: 100%;
@@ -207,6 +209,7 @@ function SetupForm(props: SetupFormProps) {
+