Capture User Consent with Digital Signature

This guide explains how to capture and validate user consent with a digital signature. Once the user consent and signature are captured in the form fields, you can map it to Salesforce.

Initial Setup:

Drag and drop an “HTML”, two “Text” and a “JavaScript” field onto your form.
Rename the fields as needed.
Note: You can use “Hidden” fields instead of “Text” fields. Here, we are using "Text" fields to display the captured values on the form.

Configuring The “HTML” Field:

Click the pencil icon on the “HTML” field.
Paste the code.

Please use this code:

<style>
  .custom-input {
    border: none;
    border-bottom: 2px solid black;
    width: 150px;
    outline: none;
    text-align: center;
    font-weight: bold;
    color: red;
  }

  .custom-input:focus {
    box-shadow: none;
    border-bottom: 2px solid red;
  }
</style>

<div class="container mt-4">
  <div class="row">
    <div class="col-sm-12">
      <div class="d-flex align-items-center flex-wrap">
        <input
          class="form-check-input me-2"
          type="checkbox"
          id="confirmation_checkbox"
          name="20eb-368b-b526"
          value="false">
        <label class="form-check-label me-1" for="confirmation_checkbox">
          I,
        </label>
        <input
          type="text"
          class="custom-input me-1"
          placeholder="Enter Your Name"
          name="56b8-1e8e-8af7">
        confirm that all
        <strong>information</strong>
        provided in this form has been
        <strong>accurately reviewed</strong>, modified, and confirmed to be
        correct to
        the best of my abilities for the fishing activities and fish landings as
        outlined by the above date.
      </div>
    </div>
  </div>
</div>

Please make sure to update the field IDs as per your form.

Configuring The “JavaScript” Field:

Click the pencil icon on the “JavaScript” field.
Paste the code.

Please use this code:

// Listen for value changes on all inputs inside the .formyoula-HTML element
$( 'body' ).on( 'change', '.formyoula-HTML :input', function() {
  // Get the input name
  var formyoula_component_id = this.name;
  // Ensure the name exists
  if ( !formyoula_component_id || !window.formyoula.form_fields[ formyoula_component_id ] ) {
    // Return
    return;
  }
  // Check if the input is a checkbox
  var formyoula_component_value = this.type === 'checkbox' ? ( this.checked ? 'true' : 'false' ) : this.value;
  // Update the form fields with the new value
  window.formyoula.form_fields[ formyoula_component_id ].set( { value: formyoula_component_value } );
} );

Test Your Form:

Try the form.

Check the checkbox and enter your name as a digital signature.
It captures the value in the "Text" fields.
Note: You can apply the same approach with “Hidden” fields and map them to Salesforce.

Example Form.json5.5KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂