diff --git a/object/application.go b/object/application.go
index 53037dfa..8915886d 100644
--- a/object/application.go
+++ b/object/application.go
@@ -87,7 +87,7 @@ type Application struct {
 	SamlReplyUrl          string          `xorm:"varchar(100)" json:"samlReplyUrl"`
 	Providers             []*ProviderItem `xorm:"mediumtext" json:"providers"`
 	SigninMethods         []*SigninMethod `xorm:"varchar(2000)" json:"signinMethods"`
-	SignupItems           []*SignupItem   `xorm:"varchar(2000)" json:"signupItems"`
+	SignupItems           []*SignupItem   `xorm:"varchar(3000)" json:"signupItems"`
 	SigninItems           []*SigninItem   `xorm:"mediumtext" json:"signinItems"`
 	GrantTypes            []string        `xorm:"varchar(1000)" json:"grantTypes"`
 	OrganizationObj       *Organization   `xorm:"-" json:"organizationObj"`
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index 13f35917..69e7c98e 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -634,9 +634,43 @@ class SignupPage extends React.Component {
     } else if (signupItem.name === "Agreement") {
       return AgreementModal.renderAgreementFormItem(application, required, tailFormItemLayout, this);
     } else if (signupItem.name.startsWith("Text ")) {
-      return (
-        <div dangerouslySetInnerHTML={{__html: signupItem.label}} />
-      );
+      if (signupItem.type) {
+        if (!signupItem.type || signupItem.type === "Input") {
+          return (
+            <Form.Item
+              name={signupItem.name.toLowerCase().replace(" ", "_")}
+              label={signupItem.label ? signupItem.label : signupItem.name}
+              rules={[
+                {
+                  required: signupItem.required,
+                  message: i18next.t(`signup:Please input your ${signupItem.label}!`),
+                },
+              ]}
+            >
+              <Input placeholder={signupItem.placeholder} />
+            </Form.Item>
+          );
+        } else if (signupItem.type === "Single Choice" || signupItem.type === "Multiple Choices") {
+          return (
+            <Form.Item
+              name={signupItem.name.toLowerCase().replace(" ", "_")}
+              label={signupItem.label ? signupItem.label : signupItem.name}
+              rules={[
+                {
+                  required: signupItem.required,
+                  message: i18next.t(`Please select your ${signupItem.label}!`),
+                },
+              ]}
+            >
+              <Select
+                mode={signupItem.type === "Multiple Choices" ? "multiple" : "single"}
+                placeholder={signupItem.placeholder}
+                options={signupItem.options.map(option => ({label: option, value: option}))}
+              />
+            </Form.Item>
+          );
+        }
+      }
     } else if (signupItem.name === "Signup button") {
       return (
         <Form.Item {...tailFormItemLayout}>