Signature in Softr

Custom Coding
1

I created this nice looking signature field for my onboarding steps. I currently have a custom form, where I would like the user to fill out some information as well on the same page.

Screenshot 2023-02-05 at 16.36.17
Screenshot 2023-02-05 at 16.36.17774Ă—902 34.1 KB 

<style>
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.wrapper {
  width: 300px;
  height: 150px;
  border: 1px solid black;
   border-radius: 8px;
}
.clear-btn {
  margin-left: 20px;
}
#clear {
  background-color: black;
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
}

@media only screen and (max-width: 480px) {
  .wrapper {
    width: 200px;
    height: 100px;
  }
}
</style>


<div class="flex-row">
  <div class="wrapper">
    <canvas id="signature-pad" width="300" height="150"></canvas>
  </div>
  <div class="clear-btn">
    <button id="clear">Clear</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.5/signature_pad.min.js" integrity="sha512-kw/nRM/BMR2XGArXnOoxKOO5VBHLdITAW00aG8qK4zBzcLVZ4nzg7/oYCaoiwc8U9zrnsO9UHqpyljJ8+iqYiQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var canvas = document.getElementById("signature-pad");

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: "rgb(250, 250, 250)"
});

document.getElementById("clear").addEventListener("click", function() {
  signaturePad.clear();
});
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var canvas = document.getElementById("signature-pad");
var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(250,250,250)'
});

document.getElementById("clear").addEventListener('click', function(){
  signaturePad.clear();
});

document.getElementById("save").addEventListener("click", function () {
  var dataURL = signaturePad.toDataURL();

  $.ajax({
    type: "POST",
    url: "your_endpoint",
    data: {
      signature: dataURL
    },
    success: function (response) {
      console.log(response);
    },
    error: function (error) {
      console.error(error);
    }
  });
});
</script>

What I would like to do is to send the signature together with the information they fill out to an airtable.

Any ideas on how I can achieve this. (Keep in mind, I’m a no-coder, just experimenting with chat GPT.

2

@artur I have the same question as I may have found a way to do it but the method is to enter the Airtable API key (along with the base name and table name) in the JS snippet… which is, I think, a huge security breach…

it looks like this, I don’t give it full so that anyone wouldn’t be tempted to use it… Just to give an idea (this is for a text field, not a signature)

        const inputValue = inputField.value;
        const airtable = new Airtable({ apiKey: 'YOUR_API_KEY' }).base('YOUR_BASE_ID');
        const result = await airtable('YOUR_TABLE_NAME').create({
          "YOUR_FIELD_NAME": inputValue
1 Like