title: How To Implement Google reCAPTCHA With Redux Form
body: <p>I have a contact page on which I have a contact form defined like this:</p>
  
  <pre><code>import React from "react";
  import { Field, reduxForm } from "redux-form";
  import Recaptcha from "react-recaptcha";
  
  const required = value =&gt; (value ? undefined : "This field is required.");
  const email = value =&gt; value &amp;&amp; !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address." : undefined;
  
  const renderInput = ({
      input,
      label,
      type,
      meta: { touched, error }
  }) =&gt; (
      &lt;div className="form-group"&gt;
          &lt;label className="col-sm-2 control-label"&gt;{ label }&lt;/label&gt;
          &lt;div className="col-sm-10"&gt;
              { (type == "text" || type == "email") ? &lt;input { ...input } type={ type } /&gt; : &lt;textarea { ...input }&gt;&lt;/textarea&gt; }
              { touched &amp;&amp; ((error &amp;&amp; &lt;span className="contact-form-error-message"&gt;{ error }&lt;/span&gt;)) }
          &lt;/div&gt;
      &lt;/div&gt;
  );
  
  const captcha = (props) =&gt; (
      &lt;div className="form-group"&gt;
          &lt;label className="col-sm-2 control-label"&gt;&lt;/label&gt;
          &lt;div className="col-sm-10"&gt;
              &lt;Recaptcha render="explicit" onloadCallback={ console.log.bind(this, "reCAPTCHA loaded.") }
                  sitekey="XXXXXXXXXXXXXXXXX" onChange={props.input.onChange} /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  );
  
  const ContactForm = props =&gt; {
      const { handleSubmit, submitting } = props
      return (
          &lt;form className="form-horizontal" onSubmit={ handleSubmit }&gt;
              &lt;Field
                  name="name"
                  type="text"
                  component={ renderInput }
                  label="Name:"
                  validate={ required }
              /&gt;
              &lt;Field
                  name="email"
                  type="email"
                  component={ renderInput }
                  label="Email:"
                  validate={ [required, email] }
              /&gt;
              &lt;Field
                  name="subject"
                  type="text"
                  component={ renderInput }
                  label="Subject:"
                  validate={ required }
              /&gt;
              &lt;Field
                  name="message"
                  type="textarea"
                  component={ renderInput }
                  label="Message:"
                  validate={ required }
              /&gt;
              &lt;Field name="recaptchacode" component={ captcha } /&gt;
              &lt;div className="form-group"&gt;
                &lt;label className="col-sm-2 control-label"&gt;&lt;/label&gt;
                &lt;div className="col-sm-10"&gt;
                    &lt;button type="submit" id="contact-form-button" disabled={ submitting }&gt;Send&lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      )
  }
  
  export default reduxForm({
      form: "ContactForm"
  })(ContactForm);
  </code></pre>
  
  <p>The problem is I cannot seem to get the <code>recaptchacode</code> field in the <code>values</code> object when I click the submit button. How do I bind the value of the <code>Recaptcha</code> component to <code>redux-form</code> so that it puts it in the <code>values</code> object?</p>
  
  <p>And since StackOverflow wants me to add more explanation to this because there's too much code, I am writing this text.</p>