@subiz/widget-v4 4.1.218 → 4.1.222

package/compiled_src/form/Form.js

@@ -9,6 +9,7 @@ var _preact = require("preact");
 var _index = _interopRequireDefault(require("../util/index.js"));
 var _block = _interopRequireDefault(require("../chatbox/block.js"));
 var _ratingStars = _interopRequireDefault(require("./rating-stars.js"));
+var _formFields = require("./form-fields.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
@@ -18,7 +19,19 @@ class Form2 extends _common.Com {
     super(props);
     _defineProperty(this, "state", {
       errorFields: {},
-      submiting: false
+      submiting: false,
+      otherSelected: {},
+      otherText: {}
+    });
+    _defineProperty(this, "getRef", name => {
+      if (!this[name]) this[name] = (0, _preact.createRef)();
+      return this[name];
+    });
+    _defineProperty(this, "tr", key => (0, _formFields.translate)(this.props.t, key));
+    _defineProperty(this, "getValue", (key, def) => {
+      let val = _index.default.find(_index.default.get(this.props.submission, 'values'), f => f.key === key) || {};
+      val = val.value || def || '""';
+      return _index.default.parseJSON(val);
     });
     _defineProperty(this, "renderFormComponent", (com, idx) => {
       if (com.type === 'input') return this.renderField(com, idx);
@@ -41,44 +54,92 @@ class Form2 extends _common.Com {
         disabled: this.props.submiting
       }, com.label)));
     });
+    _defineProperty(this, "renderSubmittedValue", com => {
+      let empty = (0, _preact.h)("span", {
+        class: "text-muted text-italic"
+      }, this.props.t('no_info_input'));
+      let val = this.getValue(com.key);
+      if (com.input_type === 'rating') {
+        let cfg = (0, _formFields.getRatingConfig)(com);
+        let idx = _index.default.size(cfg.levels) ? cfg.levels.findIndex(l => (0, _formFields.sameValue)(val, l.value)) : -1;
+        if (idx < 0) return empty;
+        if (cfg.kind === 'face') return (0, _preact.h)(_formFields.RatingFaces, {
+          readonly: true,
+          levels: [cfg.levels[idx]],
+          value: val
+        });
+        return (0, _preact.h)("div", {
+          class: "form-submitted-rating"
+        }, (0, _preact.h)(_ratingStars.default, {
+          readonly: true,
+          count: cfg.levels.length,
+          value: idx + 1
+        }), (0, _preact.h)("span", {
+          class: "text-muted"
+        }, idx + 1, "/", cfg.levels.length));
+      }
+      if (com.input_type === 'linear_scale') {
+        if ((0, _formFields.isEmptyValue)(val)) return empty;
+        let {
+          min,
+          max
+        } = (0, _formFields.getScaleRange)(com);
+        let text = `${val}/${max}`;
+        if ((0, _formFields.sameValue)(val, min) && com.scale_min_label) text += ` · ${com.scale_min_label}`;
+        if ((0, _formFields.sameValue)(val, max) && com.scale_max_label) text += ` · ${com.scale_max_label}`;
+        return (0, _preact.h)("div", null, text);
+      }
+      if (['radio', 'checkbox', 'dropdown', 'select'].includes(com.input_type)) {
+        let vals = Array.isArray(val) ? val : (0, _formFields.isEmptyValue)(val) ? [] : [val];
+        let labels = _index.default.map(vals, v => (0, _formFields.optionLabel)(com, v));
+        if (labels.length === 0) return empty;
+        if (com.input_type === 'checkbox' && (0, _formFields.isChips)(com)) {
+          return (0, _preact.h)("div", {
+            class: "form-chips readonly"
+          }, _index.default.map(labels, label => (0, _preact.h)("span", {
+            class: "form-chip selected"
+          }, label)));
+        }
+        return (0, _preact.h)("div", null, labels.join(', '));
+      }
+      if (Array.isArray(val)) val = val.join(', ');
+      return (0, _preact.h)("div", null, val || empty);
+    });
     _defineProperty(this, "renderField", (com, idx) => {
       let errorMsg = this.state.errorFields[com.key];
       if (this.props.isSubmited) {
-        let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-        val = val.value || '""';
-        val = _index.default.parseJSON(val);
-        if (Array.isArray(val)) val = val.join(', ');
         return (0, _preact.h)("div", {
           class: "form-component submitted",
           key: com.key
         }, (0, _preact.h)("label", {
           class: "label"
-        }, com.label), (0, _preact.h)("div", null, val || (0, _preact.h)("span", {
-          class: "text-muted text-italic"
-        }, this.props.t('no_info_input'))));
+        }, com.label), this.renderSubmittedValue(com));
       }
+      let desc = (0, _formFields.getDescription)(com);
+      let cls = 'form-component';
+      if (desc) cls += ' has-description';
       return (0, _preact.h)("div", {
-        class: "form-component",
+        class: cls,
         key: com.key
       }, (0, _preact.h)("label", {
         class: "label"
       }, com.label, " ", com.is_required && (0, _preact.h)("span", {
         class: "red"
-      }, "*")), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && this.renderFieldCheckboxInput(com, idx), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), com.input_type === 'rating' && this.renderFieldRatingInput(com, idx), errorMsg && (0, _preact.h)("div", {
+      }, "*")), desc && (0, _preact.h)("div", {
+        class: "form-field-description"
+      }, desc), com.input_type === 'text' && this.renderFieldTextInput(com, idx), com.input_type === 'textarea' && this.renderFieldTextareaInput(com, idx), com.input_type === 'date' && this.renderFieldDateInput(com, idx), com.input_type === 'radio' && this.renderFieldRadioInput(com, idx), com.input_type === 'checkbox' && ((0, _formFields.isChips)(com) ? this.renderFieldChipsInput(com, idx) : this.renderFieldCheckboxInput(com, idx)), (com.input_type === 'dropdown' || com.input_type === 'select') && this.renderFieldDropdownInput(com, idx), com.input_type === 'rating' && this.renderFieldRatingInput(com, idx), com.input_type === 'linear_scale' && this.renderFieldLinearScaleInput(com, idx), errorMsg && (0, _preact.h)("div", {
         class: "form-control--valid-input--error"
       }, errorMsg));
     });
     _defineProperty(this, "renderFieldTextInput", (com, idx) => {
       let cls = 'form-control';
       if (this.state.errorFields[com.key]) cls = 'form-control input--error';
-      let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-      val = val.value || '""';
-      val = _index.default.parseJSON(val);
+      let val = this.getValue(com.key);
       return (0, _preact.h)("input", {
-        ref: this[`${com.key}_input`],
+        ref: this.getRef(`${com.key}_input`),
         type: "text",
         class: cls,
-        placeholder: com.placeholder,
+        placeholder: (0, _formFields.getPlaceholder)(com),
         value: val,
         onInput: e => {
           this.onChangeValue(com.key, e.target.value);
@@ -87,13 +148,11 @@ class Form2 extends _common.Com {
       });
     });
     _defineProperty(this, "renderFieldDateInput", (com, idx) => {
-      let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-      val = val.value || '""';
-      val = _index.default.parseJSON(val);
+      let val = this.getValue(com.key);
       let cls = 'form-control';
       if (this.state.errorFields[com.key]) cls = 'form-control input--error';
       return (0, _preact.h)("input", {
-        ref: this[`${com.key}_input`],
+        ref: this.getRef(`${com.key}_input`),
         class: cls,
         type: "date",
         value: val,
@@ -103,13 +162,26 @@ class Form2 extends _common.Com {
         }
       });
     });
+    _defineProperty(this, "renderOtherTextInput", com => {
+      if (!com.allow_other_option || !this.state.otherSelected[com.key]) return null;
+      let cls = 'form-control form-other-input';
+      if (this.state.errorFields[com.key]) cls += ' input--error';
+      return (0, _preact.h)("input", {
+        ref: this.getRef(`${com.key}_other_input`),
+        type: "text",
+        class: cls,
+        placeholder: this.tr('form_other_option_placeholder'),
+        value: this.state.otherText[com.key] || '',
+        onInput: e => this.setOtherText(com, e.target.value)
+      });
+    });
     _defineProperty(this, "renderFieldRadioInput", (com, idx) => {
-      let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-      val = val.value || '""';
-      val = _index.default.parseJSON(val);
+      let val = this.getValue(com.key);
+      let otherOn = !!this.state.otherSelected[com.key];
       let wrappercls = 'form-radios-wrapper';
-      if (_index.default.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
-      return (0, _preact.h)("div", {
+      let count = _index.default.size(com.input_options) + (com.allow_other_option ? 1 : 0);
+      if (count >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
         class: wrappercls
       }, _index.default.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
@@ -119,7 +191,7 @@ class Form2 extends _common.Com {
           type: "radio",
           name: com.key,
           id: id,
-          checked: option.value === val,
+          checked: !otherOn && option.value === val,
           onChange: () => this.toggleRadioField(com.key, option.value)
         }), (0, _preact.h)("label", {
           class: "radio--label",
@@ -127,15 +199,29 @@ class Form2 extends _common.Com {
         }, option.label), (0, _preact.h)("div", {
           class: "radio--check"
         }));
-      }));
+      }), com.allow_other_option && (0, _preact.h)("div", {
+        class: "radio"
+      }, (0, _preact.h)("input", {
+        type: "radio",
+        name: com.key,
+        id: com.key + '_other',
+        checked: otherOn,
+        onChange: () => this.setOtherSelected(com, true)
+      }), (0, _preact.h)("label", {
+        class: "radio--label",
+        for: com.key + '_other'
+      }, this.tr('form_other_option')), (0, _preact.h)("div", {
+        class: "radio--check"
+      }))), this.renderOtherTextInput(com));
     });
     _defineProperty(this, "renderFieldCheckboxInput", (com, idx) => {
-      let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-      val = val.value || '[]';
-      val = _index.default.parseJSON(val);
+      let val = this.getValue(com.key, '[]');
+      if (!Array.isArray(val)) val = [];
+      let otherOn = !!this.state.otherSelected[com.key];
       let wrappercls = 'form-checkboxes-wrapper';
-      if (_index.default.size(com.input_options) >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
-      return (0, _preact.h)("div", {
+      let count = _index.default.size(com.input_options) + (com.allow_other_option ? 1 : 0);
+      if (count >= 3 && this.props.mode !== 'attachment') wrappercls += ' horizontal';
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
         class: wrappercls
       }, _index.default.map(com.input_options, (option, oidx) => {
         let id = com.key + '_' + oidx;
@@ -153,20 +239,59 @@ class Form2 extends _common.Com {
         }, option.label), (0, _preact.h)("div", {
           class: "checkbox--check"
         }));
-      }));
+      }), com.allow_other_option && (0, _preact.h)("div", {
+        class: "checkbox"
+      }, (0, _preact.h)("input", {
+        type: "checkbox",
+        name: com.key,
+        id: com.key + '_other',
+        checked: otherOn,
+        onChange: () => this.setOtherSelected(com, !otherOn)
+      }), (0, _preact.h)("label", {
+        class: "checkbox--label",
+        for: com.key + '_other'
+      }, this.tr('form_other_option')), (0, _preact.h)("div", {
+        class: "checkbox--check"
+      }))), this.renderOtherTextInput(com));
+    });
+    _defineProperty(this, "renderFieldChipsInput", (com, idx) => {
+      let val = this.getValue(com.key, '[]');
+      if (!Array.isArray(val)) val = [];
+      let otherOn = !!this.state.otherSelected[com.key];
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("div", {
+        class: "form-chips",
+        role: "group"
+      }, _index.default.map(com.input_options, option => {
+        let selected = val.includes(option.value);
+        return (0, _preact.h)("button", {
+          type: "button",
+          class: 'form-chip' + (selected ? ' selected' : ''),
+          "aria-pressed": selected ? 'true' : 'false',
+          onClick: () => this.toggleCheckboxField(com.key, option.value)
+        }, option.label || option.value);
+      }), com.allow_other_option && (0, _preact.h)("button", {
+        type: "button",
+        class: 'form-chip form-chip-other' + (otherOn ? ' selected' : ''),
+        "aria-pressed": otherOn ? 'true' : 'false',
+        onClick: () => this.setOtherSelected(com, !otherOn)
+      }, this.tr('form_other_option'))), this.renderOtherTextInput(com));
     });
     _defineProperty(this, "renderFieldDropdownInput", (com, idx) => {
-      let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-      val = val.value || '""';
-      val = _index.default.parseJSON(val);
+      let val = this.getValue(com.key);
+      let otherOn = !!this.state.otherSelected[com.key];
       let cls = 'form-control';
-      if (this.state.errorFields[com.key]) cls += ' input--error';
-      if (!val) cls += ' form-control--empty';
-      return (0, _preact.h)("select", {
+      if (this.state.errorFields[com.key] && !otherOn) cls += ' input--error';
+      if (!val && !otherOn) cls += ' form-control--empty';
+      return (0, _preact.h)(_preact.Fragment, null, (0, _preact.h)("select", {
         class: cls,
-        ref: this[`${com.key}_input`],
+        ref: this.getRef(`${com.key}_input`),
+        value: otherOn ? _formFields.OTHER_OPTION_VALUE : val || '',
         onChange: e => {
-          this.onChangeValue(com.key, e.target.value);
+          if (e.target.value === _formFields.OTHER_OPTION_VALUE) {
+            this.setOtherSelected(com, true);
+            return;
+          }
+          if (otherOn) this.setOtherSelected(com, false, e.target.value);else this.onChangeValue(com.key, e.target.value);
           this.clearError(com.key);
         }
       }, (0, _preact.h)("option", {
@@ -175,26 +300,52 @@ class Form2 extends _common.Com {
         return (0, _preact.h)("option", {
           value: option.value
         }, option.label);
-      }));
+      }), com.allow_other_option && (0, _preact.h)("option", {
+        value: _formFields.OTHER_OPTION_VALUE
+      }, this.tr('form_other_option'))), this.renderOtherTextInput(com));
     });
     _defineProperty(this, "renderFieldTextareaInput", (com, idx) => {
-      let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-      val = val.value || '""';
-      val = _index.default.parseJSON(val);
+      let cls = 'form-control';
+      if (this.state.errorFields[com.key]) cls += ' input--error';
       return (0, _preact.h)("textarea", {
         onInput: e => {
           this.onChangeValue(com.key, e.target.value);
           this.clearError(com.key);
         },
-        ref: this[`${com.key}_input`],
+        ref: this.getRef(`${com.key}_input`),
         rows: "3",
-        class: "form-control",
-        placeholder: com.placeholder
+        class: cls,
+        placeholder: (0, _formFields.getPlaceholder)(com)
       });
     });
     _defineProperty(this, "renderFieldRatingInput", (com, idx) => {
+      let cfg = (0, _formFields.getRatingConfig)(com);
+      let val = this.getValue(com.key);
+      let onChange = v => {
+        this.onChangeValue(com.key, v);
+        this.clearError(com.key);
+      };
+      if (cfg.kind === 'face') return (0, _preact.h)(_formFields.RatingFaces, {
+        levels: cfg.levels,
+        value: val,
+        onChange: onChange
+      });
+      let selectedIdx = cfg.levels.findIndex(l => (0, _formFields.sameValue)(val, l.value));
       return (0, _preact.h)(_ratingStars.default, {
-        onChange: v => this.onChangeValue(com.key, v)
+        count: cfg.levels.length,
+        value: selectedIdx + 1,
+        onChange: n => onChange(n > 0 ? (0, _formFields.toStoredValue)(cfg.levels[n - 1].value) : '')
+      });
+    });
+    _defineProperty(this, "renderFieldLinearScaleInput", (com, idx) => {
+      return (0, _preact.h)(_formFields.LinearScale, {
+        com: com,
+        numberedLabels: this.props.mode === 'attachment',
+        value: this.getValue(com.key),
+        onChange: v => {
+          this.onChangeValue(com.key, v);
+          this.clearError(com.key);
+        }
       });
     });
     _defineProperty(this, "onSubmit", e => {
@@ -209,20 +360,18 @@ class Form2 extends _common.Com {
       let components = _index.default.get(this.props.formSetting, 'components') || [];
       _index.default.each(components, com => {
         if (com.type === 'input') {
-          let val = _index.default.find(this.props.submission.values, f => f.key === com.key) || {};
-          val = val.value || '""';
-          val = _index.default.parseJSON(val);
+          let val = this.getValue(com.key);
           if (com.is_required) {
-            let isEmpty = false;
-            if (typeof val === 'string' && !val.trim()) isEmpty = true;
-            if (Array.isArray(val) && val.length === 0) isEmpty = true;
+            let isEmpty = (0, _formFields.isEmptyValue)(val);
+            if (com.input_type === 'rating' && val === 0) isEmpty = true;
             if (isEmpty) {
               result = false;
               errors[com.key] = this.props.t('cannot_be_empty');
-              ref = `${com.key}_input`;
+              if (!ref) ref = this.state.otherSelected[com.key] ? `${com.key}_other_input` : `${com.key}_input`;
             }
           }
-          if (com.validation && !Array.isArray(val)) {
+          let isChoice = ['rating', 'linear_scale', 'radio', 'checkbox', 'dropdown', 'select'].includes(com.input_type);
+          if (com.validation && !Array.isArray(val) && !isChoice) {
             let isInvalid = false;
             let validationText = '';
             if (com.validation === 'email' && !_index.default.isEmail(val)) {
@@ -244,7 +393,7 @@ class Form2 extends _common.Com {
             if (isInvalid) {
               result = false;
               errors[com.key] = this.props.t('format_is_invalid') + ' ' + validationText;
-              ref = `${com.key}_input`;
+              if (!ref) ref = `${com.key}_input`;
             }
           }
         }
@@ -257,6 +406,50 @@ class Form2 extends _common.Com {
       });
       return result;
     });
+    _defineProperty(this, "getComponent", key => _index.default.find(_index.default.get(this.props.formSetting, 'components') || [], c => c.key === key));
+    _defineProperty(this, "commitCheckboxValue", (com, optionValues, otherOn, otherText) => {
+      let values = _index.default.filter(optionValues, v => _index.default.find(com.input_options, o => o.value === v));
+      let text = (otherText || '').trim();
+      if (otherOn && text) values.push(text);
+      this.onChangeValue(com.key, values);
+    });
+    _defineProperty(this, "setOtherSelected", (com, on, nextValue) => {
+      let key = com.key;
+      let otherSelected = {
+        ...this.state.otherSelected,
+        [key]: on
+      };
+      let text = this.state.otherText[key] || '';
+      this.clearError(key);
+      this.setState({
+        otherSelected
+      }, () => {
+        let $input = this.getRef(`${key}_other_input`).current;
+        if (on && $input) {
+          $input.focus();
+        }
+      });
+      if (com.input_type === 'checkbox') {
+        this.commitCheckboxValue(com, this.getValue(key, '[]') || [], on, text);
+        return;
+      }
+      this.onChangeValue(key, on ? text.trim() : nextValue || '');
+    });
+    _defineProperty(this, "setOtherText", (com, text) => {
+      let key = com.key;
+      this.setState({
+        otherText: {
+          ...this.state.otherText,
+          [key]: text
+        }
+      });
+      this.clearError(key);
+      if (com.input_type === 'checkbox') {
+        this.commitCheckboxValue(com, this.getValue(key, '[]') || [], true, text);
+        return;
+      }
+      this.onChangeValue(key, text.trim());
+    });
     _defineProperty(this, "onChangeValue", (key, v) => {
       let formValues = _index.default.get(this.props.submission, 'values') || [];
       let f = _index.default.find(formValues, field => field.key === key);
@@ -283,9 +476,11 @@ class Form2 extends _common.Com {
       if (this.props.mode === 'attachment') {
         if (title.trim() || desc.trim()) {
           return (0, _preact.h)("div", {
-            class: "form-component form-component-block"
-          }, title && (0, _preact.h)("div", null, title), desc && (0, _preact.h)("div", {
-            class: "text-sm text-muted"
+            class: "form-component form-component-block form-attachment-header"
+          }, title && (0, _preact.h)("div", {
+            class: "form-attachment-title"
+          }, title), desc && (0, _preact.h)("div", {
+            class: "form-attachment-desc text-sm text-muted"
           }, desc));
         }
       }
@@ -314,33 +509,37 @@ class Form2 extends _common.Com {
       }
       return (0, _preact.h)(_preact.Fragment, null, $logo, $header);
     });
-    let _components = _index.default.get(this.props.formSetting, 'components') || [];
-    _index.default.each(_components, com => {
-      if (com.type === 'input' && com.input_type !== 'checkbox' && com.input_type !== 'radio') {
-        this[`${com.key}_input`] = (0, _preact.createRef)();
-      }
-    });
   }
   toggleRadioField(key, v) {
     this.clearError(key);
+    if (this.state.otherSelected[key]) {
+      this.setState({
+        otherSelected: {
+          ...this.state.otherSelected,
+          [key]: false
+        }
+      });
+    }
     this.onChangeValue(key, v);
   }
   toggleCheckboxField(key, v) {
-    let currentValues = _index.default.find(this.props.submission.values, f => f.key === key) || {};
-    currentValues = currentValues.value || '[]';
-    currentValues = _index.default.parseJSON(currentValues);
+    let currentValues = this.getValue(key, '[]');
+    if (!Array.isArray(currentValues)) currentValues = [];
     if (currentValues.includes(v)) {
       currentValues = currentValues.filter(s => s !== v);
     } else {
       currentValues.push(v);
     }
     this.clearError(key);
+    let com = this.getComponent(key);
+    if (com && com.allow_other_option) {
+      this.commitCheckboxValue(com, currentValues, this.state.otherSelected[key], this.state.otherText[key]);
+      return;
+    }
     this.onChangeValue(key, currentValues);
   }
   render() {
     let components = _index.default.get(this.props.formSetting, 'components') || [];
-    let title = _index.default.get(this.props.formSetting, 'title') || '';
-    let desc = _index.default.get(this.props.formSetting, 'description') || '';
     let cls = 'form-wrapper form';
     if (this.props.mode === 'attachment') cls += ' form-wrapper-attachment';
     return (0, _preact.h)("div", {

package/compiled_src/form/FormPage.js

@@ -56,11 +56,11 @@ class FormPage extends _common.Com {
       let descFont = _index.default.get(formSetting, 'text_style.font_family');
       let inputLabelFont = _index.default.get(formSetting, 'input_style.font_family');
       setting.form_background_color = formSetting.background_color;
-      setting.form_header_font_size = _index.default.get(formSetting, 'header_style.font_size') || '20';
+      setting.form_header_font_size = _index.default.get(formSetting, 'header_style.font_size') || '28';
       setting.form_header_font_family = headerFont;
       setting.form_desc_font_size = _index.default.get(formSetting, 'text_style.font_size') || '16';
       setting.form_desc_font_family = descFont;
-      setting.form_input_label_font_size = _index.default.get(formSetting, 'input_style.font_size') || '14';
+      setting.form_input_label_font_size = _index.default.get(formSetting, 'input_style.font_size') || '16';
       setting.form_input_label_font_family = inputLabelFont;
       let outcss = _index.default.replaceCssVariable(css, setting);
       let fonts = [];
@@ -94,7 +94,12 @@ class FormPage extends _common.Com {
       this.setState({
         loading: true
       });
-      let res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token);
+      let res;
+      if (this.props.token) {
+        res = await this.props.store.checkFormToken(this.props.store.matchAccount().id, this.props.token);
+      } else {
+        res = await this.props.store.getPublicForm(this.props.formId);
+      }
       if (res.error) {
         this.setState({
           loading: false,
@@ -135,7 +140,15 @@ class FormPage extends _common.Com {
       this.setState({
         submiting: true
       });
-      let res = await this.props.store.submitForm2(this.props.store.matchAccount().id, this.props.token, this.state.submission);
+      let res;
+      if (this.props.token) {
+        res = await this.props.store.submitForm2(this.props.store.matchAccount().id, this.props.token, this.state.submission);
+      } else {
+        res = await this.props.store.submitPublicForm(this.props.formId, {
+          values: _index.default.get(this.state.submission, 'values') || [],
+          page_url: document.referrer || location.href
+        });
+      }
       if (res.error) {
         this.setState({
           submiting: false,