React App update custom contact property

Jez_D · ‎Mar 24, 2020

Morning,

I have a React App, with a login form. The form is non-hubspot. When the form is submitted, I need it to update the relevant custom property for the contact, who's email address is in the form.

The form contains this:

<form method="" action="#">
<input id="custom-property-name" type="text" name="customer_property_name" value="Yes" style="">
<input type="email" placeholder="john@example.org" required="" name="email" autocomplete="email" value="" >
<input type="password" placeholder="Enter your password" required="" name="password" value="">
<button type="submit" class="button solid button-submit">Log in</button>
</form>

the value custom_property_name in the first field, matches the internal name of the custom property. The custom property is a single-line-text type.

The html <head> looke like this:

<head>
    <title>Page Title</title>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, minimum-scale=1, maximum-scale=1,
    initial-scale=1, user-scalable=no, viewport-fit=cover"
    />
    <link rel="prefetch" href="/fonts/Effra_Light.ttf" as="font" />
    <link rel="prefetch" href="/fonts/Effra_Reg.ttf" as="font" />
    <link rel="prefetch" href="/fonts/Effra_Med.ttf" as="font" />
    <link rel="prefetch" href="/fonts/Effra_Heavy.ttf" as="font" />
    <!-- Webpack will inject the relavant CSS and JS tags on build -->
    <script>
      var _hsq = window._hsq = window._hsq || [];
      _hsq.push(['setPath', '/auth/login']);
      _hsq.push(['trackPageView']);
    </script>
  </head>

And the body looks like this:

<body>
    <div id="root"></div>
    <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<hubspot_id>.js"></script>
    <script type="text/javascript" src="/main.js?0f990a87xxxxxxxxxx"></script></body>
    <script>
      window.onload = function() {
        document.body.style.display = 'block';
      };
    </script>
    <script type="text/javascript">
      ...something else here.....
    </script>
</body>

The page and form are functioning as I expect, just that the value of the custom property doesn't get updated in Hubspot.

In the Hubspot Portal Console, I have toggled the Collect data from website forms switch to on, thereby enabling non-HubSpot forms.

I also added

<input type="submit" placeholder="TEST" required="">

to the form and used it to submit the form, but still not updating HubSpot.

So, what am I missing?

WendyGoh · ‎Mar 24, 2020

Hey @Jez_D,

It does looks like you have most of the requirements checked as according to this documentation - Use non-HubSpot forms.

In this case, in order for me to further dig into this, could you share with me the following:

1. Your HubSpot portal/account ID

2. The page where the form is on

Jez_D · ‎Mar 25, 2020

Thanks Wendy.

I have read this doc several times over 🙂

Hubspot ID = 5956805

The page itself is currently behind our firewall and not publicaly available.

WendyGoh · ‎Mar 25, 2020

Hey @Jez_D,

Thanks for sharing the portal ID.

Based on what you've shared, it seems that the form is working and the main issue is that the custom property isn't being passed over successfully via the Non-HubSpot form, in this case, could you share with me 1. the custom property field name, 2. the exact code with the custom property field name that your team wrote and 3. the form name?

Jez_D · ‎Mar 26, 2020

The internal name for the custom property is scribely_user
Form name is scribely_login_form

The code:

class LoginView extends Component {
  static propTypes = {
    uiState: PropTypes.string,
    error: PropTypes.string,
    processingMessage: PropTypes.string,
    currentUser: PropTypes.object,
    restartLogin: PropTypes.func,
    validateCredentials: PropTypes.func
  };

  static defaultProps = {
    currentUser: {},
    restartLogin: () => {}, 
    validateCredentials: () => 
  };

  state = {
    email: '',
    password: '',
    passwordChanged: false,
    showEmailErrors: false,
    showPasswordErrors: false,
    passwordValid: false,
    emailValid: false
  };

  validateEmail = email => {
    if (!email || email.trim() === '') {
      this.setState({
        showEmailErrors: true,
        emailValid: false
      });
      return resx('authentication-emailentryform-email-required-error');
    } else {
      this.setState({
        showEmailErrors: false,
        emailValid: true
      });
      return undefined;
    }
  };

  validatePassword = password => {
    if (!password || password === '') {
      if (!this.state.passwordChanged) {
        return;
      }
      this.setState({
        showPasswordErrors: true,
        passwordValid: false
      });
      return resx('authentication-passwordentryform-password-required-error');
    } else {
      this.setState({
        passwordChanged: true,
        showPasswordErrors: false,
        passwordValid: true
      });
      return undefined;
    }
  };

  onForgotPasswordClick = () => {
    track.event({
      category: 'User',
      action: 'FORGOT_PASSWORD'
    });
  };

  onSignupClick = () => {
    track.event({
      category: 'User',
      action: 'CLICK_CREATE_ACCOUNT'
    });
  };

  onSubmit = e => {
    e.preventDefault();

    if (!this.form.reportValidity()) return;

    const { restartLogin, validateCredentials } = this.props;
    const { email, password } = this.state;

    restartLogin();
    validateCredentials(email, password);

    this.setState({
      password: ''
    });
  };

  onFormChange = ({ target }) => {
    this.setState({
      [target.name]: target.value
    });
  };

  renderForm() {
    const { error, currentUser } = this.props;
    const { showEmailErrors, showPasswordErrors, passwordValid, emailValid } = this.state;
    let submitDiasbled = true;

    if (passwordValid && emailValid) {
      submitDiasbled = false;
    }

    return (
      <div className="loginForm">
        <div className="loginForm__main">
          <fieldset>
            <label htmlFor="scribely-user">Scribely User</label>
            <InputField readonly id="scribely-user" type="text" value="Yes" nameAttr="scribely_user" />
          </fieldset>
          <fieldset>
            <label htmlFor="email">{resx('authentication-emailentryform-email-label')}</label>
            <InputField
              focus
              type="email"
              placeholder="john@example.org"
              defaultValue={this.state.email}
              onChange={this.onFormChange}
              validators={[this.validateEmail]}
              showErrors={showEmailErrors}
              validateOnBlur={true}
              required={true}
              autocomplete="email"
              nameAttr="email"
            />
          </fieldset>
          <fieldset>
            <label htmlFor="password">{resx('authentication-passwordentryform-password-label')}</label>
            <PasswordInputField
              onChange={this.onFormChange}
              validators={[this.validatePassword]}
              validateOnBlur={false}
              showErrors={showPasswordErrors}
              placeholder="Enter your password"
              nameAttr="password"
            />
            <Link onClick={this.onForgotPasswordClick} to={ROUTE_CODES.FORGOT_PASSWORD}>
              {resx('authentication-forgetpassword-link-text')}
            </Link>
          </fieldset>
        </div>
        {error && (
          <p id="authenticationError" className="error">
            {resx('authentication-loginview-login-error')}
          </p>
        )}
        {currentUser.authenticated && <Redirect to={ROUTE_CODES.HOME} />}

        <button type="submit" className="button solid button-submit" disabled={submitDiasbled}>
          {resx('authentication-createaccount-login')}
        </button>

        <fieldset>
          <InputField type="submit" placeholder="TEST" required={true} />
        </fieldset>

        <p className="u-text-center loginForm__signup-link">
          {resx('authentication-createaccount-account-quesetion')}{' '}
          <Link onClick={this.onSignupClick} to={ROUTE_CODES.SIGNUP}>
            {resx('authentication-createaccount-button-text')}
          </Link>
        </p>
      </div>
    );
  }

  render() {
    const { uiState, processingMessage } = this.props;
    const processing = uiState === 'processing';

    return (
      <div className="authForm">
        <form id="scribely_login_form" 
          name="scribely_login_form"  method="" action="#" onSubmit={this.onSubmit} ref={ref => (this.form = ref)}>
          <div className="authBox u-allow-scrolling">
            <ApplicationLogo />
            {processing && <ProcessingIndicator message={processingMessage} />}
            {!processing && this.renderForm()}
          </div>
        </form>
      </div>
    );
  }
}

export default LoginView;

I have tried rendering just the but or just the <input type="submit> but the problem is the same in each case.

WendyGoh · ‎Mar 26, 2020

Hey @Jez_D,

Could you try adding a label for the `scribely_user` form field? This is to ensure consistency as it appears there's a label for the email field.

Jez_D · ‎Mar 27, 2020

Thanks Wendy.

Have done that and tested. Still not receiving the submission

APIs & Integrations