diff --git a/.changeset/wise-geckos-punch.md b/.changeset/wise-geckos-punch.md
new file mode 100644
index 000000000..01e24c3d3
--- /dev/null
+++ b/.changeset/wise-geckos-punch.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-formspree': minor
+---
+
+Updates the configuration of the formspree integration to the block itself, instead of in the manifest
diff --git a/integrations/formspree/gitbook-manifest.yaml b/integrations/formspree/gitbook-manifest.yaml
index 0ec4f7769..6f60d00ae 100644
--- a/integrations/formspree/gitbook-manifest.yaml
+++ b/integrations/formspree/gitbook-manifest.yaml
@@ -6,8 +6,11 @@ description: A simple Formspree integration to collect user signups directly in
 summary: |
     # Overview
     The GitBook Formspree integration allows you to specify a form ID from your Formspree account to collect user signups.
+
     # Configure
     You can install the integration on a single space by clicking the integrations button in sub-navigation panel. If you prefer to install the Formspree integration on multiple on all spaces you can enable this through organization settings. From here you can specify different Formspree IDs for different spaces.
+
+    You can customize the integration's form fields directly from the block itself. Press the Action menu with the block selected to see the available customization options.
 icon: ./assets/formspree-icon.png
 previewImages:
     - ./assets/formspree-banner.png
@@ -30,19 +33,4 @@ configurations:
                 type: string
                 title: Formspree endpoint
                 description: The endpoint your formspree lives at.
-            email:
-                type: boolean
-                title: Email
-                description: An email field for your form
-                default: true
-            name:
-                type: boolean
-                title: Name
-                description: A name field for your form
-                default: false
-            message:
-                type: boolean
-                title: Message
-                description: A message field for your form
-                default: false
 secrets: {}
diff --git a/integrations/formspree/package.json b/integrations/formspree/package.json
index a2930f35d..388e98080 100644
--- a/integrations/formspree/package.json
+++ b/integrations/formspree/package.json
@@ -1,6 +1,7 @@
 {
     "name": "@gitbook/integration-formspree",
     "private": true,
+    "version": "1.0.0",
     "scripts": {
         "lint": "eslint ./**/*.ts*",
         "typecheck": "tsc --noEmit",
diff --git a/integrations/formspree/src/index.tsx b/integrations/formspree/src/index.tsx
index 340f6f902..8d872737e 100644
--- a/integrations/formspree/src/index.tsx
+++ b/integrations/formspree/src/index.tsx
@@ -1,6 +1,6 @@
 import { createIntegration, createComponent } from '@gitbook/runtime';
 
-import { handleSubmit } from './utils';
+import { saveSpaceConfiguration, handleSubmit } from './utils';
 
 type FormspreeContext = {
     environment: {
@@ -10,6 +10,9 @@ type FormspreeContext = {
                 email: string;
                 name: string;
                 message: string;
+                emailVisible?: boolean;
+                nameVisible?: boolean;
+                messageVisible?: boolean;
             };
         };
     };
@@ -21,11 +24,17 @@ type FormspreeAction = {
 
 const formspreeBlock = createComponent({
     componentId: 'formspree',
-    initialState: {
-        email: '',
-        name: '',
-        message: '',
-        formSubmitted: false,
+    initialState: (props: any) => {
+        console.log('PROPS on create component: ', props);
+        return {
+            email: '',
+            name: '',
+            message: '',
+            emailVisible: props.spaceInstallation?.configuration?.emailVisible || true,
+            nameVisible: props.spaceInstallation?.configuration?.nameVisibile || false,
+            messageVisible: props.spaceInstallation?.configuration?.messageVisible || false,
+            formSubmitted: false,
+        };
     },
     action: async (element, action: FormspreeAction, context: FormspreeContext) => {
         switch (action.action) {
@@ -38,58 +47,106 @@ const formspreeBlock = createComponent({
                 return {
                     state: {
                         formSubmitted: true,
+                        ...element.state,
                     },
                 };
+            case 'toggleEmail': {
+                const emailToggle =
+                    !context.environment.spaceInstallation.configuration.emailVisible;
+                await saveSpaceConfiguration(context, {
+                    ...element.state,
+                    emailVisible: emailToggle,
+                });
+                return element;
+            }
+            case 'toggleName': {
+                const nameToggle = !context.environment.spaceInstallation.configuration.nameVisible;
+                await saveSpaceConfiguration(context, {
+                    ...element.state,
+                    nameVisible: nameToggle,
+                });
+                return element;
+            }
+            case 'toggleMessage': {
+                const messageToggle =
+                    !context.environment.spaceInstallation.configuration.messageVisible;
+                await saveSpaceConfiguration(context, {
+                    ...element.state,
+                    messageVisible: messageToggle,
+                });
+                return element;
+            }
         }
     },
     render: async (element, context: FormspreeContext) => {
+        const spaceInstallationConfigration = context.environment.spaceInstallation.configuration;
+
+        console.log('Rendering State: ', element.state);
+        console.log('Rendering Configuration: ', spaceInstallationConfigration);
         return (
-            <block>
+            <block
+            // controls={[
+            //     {
+            //         label: 'Toggle Email',
+            //         onPress: {
+            //             action: 'toggleEmail',
+            //         },
+            //     },
+            //     {
+            //         label: 'Toggle Name',
+            //         onPress: {
+            //             action: 'toggleName',
+            //         },
+            //     },
+            //     {
+            //         label: 'Toggle Messsage',
+            //         onPress: {
+            //             action: 'toggleMessage',
+            //         },
+            //     },
+            // ]}
+            >
                 <hstack>
                     {/* Email */}
-                    {context.environment.spaceInstallation?.configuration.email ? (
-                        <box grow={1}>
-                            <input
-                                label="Email"
-                                element={<textinput state="email" placeholder="Your email" />}
-                            />
-                        </box>
-                    ) : null}
+                    <box grow={1}>
+                        <input
+                            label="Email"
+                            element={<textinput state="email" placeholder="Your email" />}
+                        />
+                    </box>
 
                     {/* Name */}
-                    {context.environment.spaceInstallation?.configuration.name ? (
-                        <box grow={1}>
-                            <input
-                                label="Name"
-                                element={<textinput state="name" placeholder="Your name" />}
-                            />
-                        </box>
-                    ) : null}
+                    <box grow={1}>
+                        <input
+                            label="Name"
+                            element={<textinput state="name" placeholder="Your name" />}
+                        />
+                    </box>
                 </hstack>
 
                 <vstack>
                     {/* Message */}
-                    {context.environment.spaceInstallation?.configuration.message ? (
-                        <box grow={2}>
-                            <input
-                                label="Message"
-                                element={
-                                    <textinput
-                                        state="message"
-                                        placeholder="Your message"
-                                        multiline={true}
-                                    />
-                                }
-                            />
-                        </box>
-                    ) : null}
+                    <box grow={2}>
+                        <input
+                            label="Message"
+                            element={
+                                <textinput
+                                    state="message"
+                                    placeholder="Your message"
+                                    multiline={true}
+                                />
+                            }
+                        />
+                    </box>
                 </vstack>
 
-                <button
-                    label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
-                    onPress={{ action: 'submit' }}
-                    disabled={element.state.formSubmitted}
-                />
+                <box grow={2}>
+                    <button
+                        label={element.state.formSubmitted ? 'Submitted' : 'Submit'}
+                        onPress={{ action: 'submit' }}
+                        disabled={element.state.formSubmitted}
+                    />
+                </box>
             </block>
         );
     },
diff --git a/integrations/formspree/src/utils.ts b/integrations/formspree/src/utils.ts
index a846d50c9..ed5456b72 100644
--- a/integrations/formspree/src/utils.ts
+++ b/integrations/formspree/src/utils.ts
@@ -34,3 +34,28 @@ export async function removeEmptyValues(object) {
     }
     return object;
 }
+
+/**
+ * Save the space configuration for the current space installation.
+ */
+export async function saveSpaceConfiguration(context, state) {
+    const { api, environment } = context;
+    const spaceInstallation = environment.spaceInstallation;
+
+    console.log('state trying to be saved: ', state);
+
+    // Save the space installation configuration
+    const { data } = await api.integrations.updateIntegrationSpaceInstallation(
+        spaceInstallation.integration,
+        spaceInstallation.installation,
+        spaceInstallation.space,
+        {
+            configuration: {
+                ...spaceInstallation.configuration,
+                ...state,
+            },
+        }
+    );
+
+    console.log('Just saved data: ', data.configuration);
+}