[Difficult] converting the card front content into a base64 encoded image and se

Hello everyone, we would need some help with the following:

We have a card with two sides, the front side showing a random text and the back side containing a contact form. Users can flip the card to reveal the contact form on the back side. The goal is to allow users to submit the contact form along with the image of the card’s front side. When the form is submitted, an email will be sent to the specified recipient with the user’s email address and the image of the card’s front side.

To accomplish this, we’ve done the following steps:

1. Created an HTML structure for the card with both front and back sides. The front side displays a random text, and the back side contains the contact form.
2. Implemented JavaScript code for flipping the card, shuffling the text, and displaying the contact form when the “Claim” button is clicked.
3. Added a hidden input field in the contact form to store the base64 image data of the card’s front side. This field will be populated by our JavaScript code.
4. Implemented JavaScript code to capture the card’s front side as a base64 image using the html2canvas library. The base64 image data is then stored in the hidden input field mentioned in step 3.
5. Modified the contact form submission process to send an AJAX request with the form data, including the base64 image data, to the server.
6. Updated the email template to include the card’s front side image using the base64 image data received from the form submission.

However, the current solution does not seem to work as expected. You’re still receiving the email without the image of the card’s front side (see screenshot). We’ve tried debugging and making adjustments to the code, but the issue persists.

Let me know if someone can help I will provide the codes in use.

The page I need help with: [log in to see the link]