Adding reCAPTCHA code to source code embedded form

  • JoeLluveras
    Asked on March 25, 2020 at 4:30 PM

    Hi JotForm,

    I just took over a website that has your contact form, the previous developer designed a slick form that is still calling the JotForm in the background, now I need to add a Captcha just before the Submit button, I did it in JotForm but still does not show up because the JotForm in the WordPress website is in source code (raw html), can you help me get or isolate the source code for just the Captcha so I can insert it and it shows up on the page? The page in question is below and below that is the source code that is currently working on the website.

    This is the form:

    https://form.jotform.com/91116503067147

    Thank you in advance.


    The source code currently on the website:

    <form class="jotform-form" action="https://submit.jotform.us/submit/91116503067147/" method="post" name="form_91116503067147" id="91116503067147" accept-charset="utf-8">

      <input type="hidden" name="formID" value="91116503067147" />


    <div class="col span_6">

      <div class="form-line jf-required" data-type="control_textbox" id="id_3">

        <div id="cid_3" class="form-input-wide jf-required">

          <input type="text" id="input_3" name="q3_firstName" data-type="input-textbox" class="form-textbox validate[required]" size="50" value="" placeholder="First Name" data-component="textbox" required="" />

        </div>

      </div>

    </div>


    <div class="col span_6 col_last">

      <div class="form-line jf-required" data-type="control_textbox" id="id_4">

        <div id="cid_4" class="form-input-wide jf-required">

          <input type="text" id="input_4" name="q4_lastName" data-type="input-textbox" class="form-textbox validate[required]" size="50" value="" placeholder="Last Name" data-component="textbox" required="" />

        </div>

      </div>

    </div>


    <div class="col span_6">

      <div class="form-line jf-required" data-type="control_email" id="id_5">

        <div id="cid_5" class="form-input-wide jf-required">

          <input type="email" id="input_5" name="q5_email" class="form-textbox validate[required, Email]" size="50" value="" placeholder="Email Address" data-component="email" required="" />

        </div>

      </div>

    </div>


    <div class="col span_6 col_last">

      <div class="form-line jf-required" data-type="control_textbox" id="id_6">

        <div id="cid_6" class="form-input-wide jf-required">

          <input type="text" id="input_6" name="q6_typeA" data-type="input-textbox" class="form-textbox validate[required]" size="50" value="" placeholder="Phone Number" data-component="textbox" required="" />

        </div>

      </div>

    </div>


    <div class="col span_6">

      <div class="form-line jf-required" data-type="control_textbox" id="id_7">

        <div id="cid_7" class="form-input-wide jf-required">

          <input type="text" id="input_7" name="q7_zipCode" data-type="input-textbox" class="form-textbox validate[required]" size="50" value="" placeholder="Zip Code" data-component="textbox" required="" />

        </div>

      </div>

    </div>


    <div class="col span_6 col_last">

      <div class="form-line jf-required" data-type="control_dropdown" id="id_8">

        <div id="cid_8" class="form-input-wide jf-required">

          <select class="form-dropdown validate[required]" id="input_8" name="q8_typeA8" style="width:365px" data-component="dropdown" required="">

            <option value=""> How did you hear about us? </option>

            <option value="Google Search"> Google Search </option>

            <option value="Social Media"> Social Media </option>

            <option value="Word of Mouth"> Word of Mouth </option>

            <option value="Broker Referral"> Broker Referral </option>

            <option value="Media Article"> Media Article </option>

            <option value="Other"> Other </option>

          </select>

        </div>

      </div>

    </div>


    <div class="submit-btn col span_12">

      <div class="form-line" data-type="control_button" id="id_2">

        <div id="cid_2" class="form-input-wide">

          <button id="input_2" type="submit" class="form-submit-button" data-component="button">

            Submit

          </button>

        </div>

      </div>

    </div>

    <div style="display:none">

      Should be Empty:

      <input type="text" name="website" value="" />

    </div>

    <script>

    JotForm.showJotFormPowered = "0";

    </script>

    <input type="hidden" id="simple_spc" name="simple_spc" value="91116503067147" />

    <script type="text/javascript">

    document.getElementById("si" + "mple" + "_spc").value = "91116503067147-91116503067147";

    </script>

    </form>


  • Mike
    Replied on March 25, 2020 at 6:14 PM

    You can get the form source code through a Publish tab:

    How to get the Full Source Code of your Form

    Then, search for the data-type="control_captcha" element that you can add to the website.

    Adding reCAPTCHA code to source code embedded form Image 1 Screenshot 30

    It is also most likely that you will need to add the prototype.forms.js script form the form source to your website.

    Adding reCAPTCHA code to source code embedded form Image 2 Screenshot 41