הוספת חתימה דיגיטלית לטפסים של אלמנטור

בסרטון הבא נראה איך להוסיף חתימה דיגטלית בטפסים של אלמנטור.

הקוד שיש להוסיף בשדה HTML.

				
					חתימה
<br>
<canvas id="draw-area" width="280px" height="280px"></canvas>
<div>
  <span id="create-png-button">done</span>
  <span id="clear-button">clear</span>
</div>
				
			

הקוד שיש להוסיף בווידג’ט HTML מתחת לטופס.

				
					<style>
  #draw-area {
    border: 1px solid #000;
  }

  #create-png-button, #clear-button{
      color: black;
      border: solid 1px;
      padding: 4px 8px;
      cursor: pointer;
  }
  .elementor-field-group-signature{
      display: none;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/handwriting-canvas/dist/main.min.js"></script>
<script>
  const canvasElement = document.querySelector("#draw-area");
  const canvas = new HandwritingCanvas(canvasElement);

  document.querySelector("#create-png-button").addEventListener("click", async () => {
    if (canvas.isEmpty) {
      return;
    }

    const blob = await canvas.toBlob("image/png");

    
    
    // Get a reference to our file input
    const fileInput = document.querySelector('#form-field-signature');

    // Create a new File object
    const myFile = new File([blob], 'image.png', {
        type: 'image/png',
        lastModified: new Date(),
    });

    // Now let's create a DataTransfer to get a FileList
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(myFile);
    fileInput.files = dataTransfer.files;
    
    
    
    
  });

  document.querySelector("#clear-button").addEventListener("click", () => {
    canvas.clear();
  });
</script>

				
			

דוגמא לקוד בהודעת אימייל (חשוב לשנות את השורטקודים)

				
					[field id="field_0fab4c6"]
<br>
[field id="field_039a6fc"]
<br>
<img decoding="async" src="[field id="signature"]" alt="signature">
				
			

תגובה אחת

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?