A very great future of JFB but it lack proper styling, for example if we want to build a complete invoice with table, column, left and right side section, it is very hard as of now. I tried JetStyleManager too but failed to get the desire result.
This is a great improvement to JefFormBuilder. However the layout is still the major weakness of such tools. There is no advanced layout options which prevent from designing really professional pdfs.
I agree with others on the difficulty of styling and getting it Look professional, however I found that by coding the entire form in HTML and then just using the HTML code in the editor I’m able to receive some really good results, but it’s more of a workaround than a practical way of accomplishment.
This is a great video. Can you tell me if it is possible to prompt the generated PDF file when the user submits the form so the download starts right away. I know you can send it via email or in save it in the form records but the user being able to download the file right away is a must have feature.
well, I should admit that with forms you can't do anything like this also, as a workaround, you can use the Download btn widget and send dynamically the id of the newly created pdf file hope it'll help you!
Great feature, but please add the functionality to create a Elementor e-mail template for this PDF creation. Would be a great addition to CrocoBlock for advanced systems like invoicing.
thank you ❤ am I right to say, that you want to make it possible to edit email template for PDF in Elementor editor? or what exactly you mean here? would appreciate you adding details 😊
@@Crocoblock Yes! That is exactly what i meant. A way to edit the template in elementor editor. This way the creative possibilities are endless if we can also use widgets like JetEngine’s Dynamic Field Widget!
we have some solutions to this case hope sth will suit you Download Button: Dynamic Options | JetElements and JetEngine plugins ua-cam.com/video/ySb2qVjez3Y/v-deo.html Adding a Custom PDF Download Button to Results Page with JetFormBuilder ua-cam.com/video/LmEPJlVlnrk/v-deo.html
there's no built-in functionality as for now but we have a custom solution from our top member from our community Create a text field, and field name id: signature_pad_field , and set Field Type to: URL. Submit button, you have to add a classname, go to block, advanced and css classname: submit_form_button Then use the shortcode name to content: [process_signature urls="%signature_pad_field%"]
@@Crocoblock o tried using the macros. However, when you have a checkbook, there is only one macros for that field. When I map it , it duplicates itself to the none checked options. For instance, my checkbox has 5 options . On the front-end of the form I selected the first option. When creating the pdf, if you map that macro for each selected option. It duplicates the selection on all options
Just a simple field that will hold the signature on the form. The user can sign immediately on thr form not uploading a signatureas as an image @Crocoblock
well, as for right now it will not work in the PDF the way you've described the main idea is the next ine: we have qr callback for the dynamic field - prnt.sc/fIT1P_XuTmxy but before you need to store this data somewhere and then display it with shortcode in PDF file, but unfortunately it still can't be achieved from the box maybe this idea of how it should work will admire you to create a custom code
@@rnzsalvador I think you can do so in the Submit action, select another "Send Email" option, and set the setting to the email of the person filling the form. But to do so you will need that person email address on the form to map it
so, you need to add a Send email action and then you choose the current user email then the question is how to get it you can do it from the hidden field if the user is logged in or you can make a field for an email and then add it to the attachment pdf file
The level of customizing the PDF is somewhat very basic. Could you implement a feature where we can upload our PDF templates (more than one) and then map it using the macros mentioned in this video? Doing this will allow the form creator much more flexibility in terms of making the PDF look more polished and on brand
How do you stop WP from creating a public link to the PDF form? I don't want client info to end up indexed in Google when their PDF invoice is generated. Thanks.
The directoy with saved PDFs is disabled from browsing, for each user generated unique 32 chars length hash and all files of this user are stored in the folder named with this hash. Also each file name has unique suffix with ID of form submission. So 3rd party user can't directly access the file, only person who knows the URL. So now it works like, for example Google Document, where you enabled access by link. But anyway, of course, you need to be accurate with any data your store on your website, not only in the uploads folder. In the future we'll also most probably add an option to access this data only for authorized users with defined capabilities. more you can find here facebook.com/groups/CrocoblockCommunity/permalink/8451163528308327
there are hooks which allow you to achieve it jet-form-builder-pdf/uploaded Purpose: This action is triggered after a PDF file has been uploaded using the wp_upload_bits function. It passes the $file array to any functions hooked to this action, allowing for post-upload processing or logging. jet-form-builder-pdf/render-head-top Purpose: This action is executed right after opening the HTML and HEAD tags. It provides an opportunity to inject additional elements into the HEAD of the PDF's HTML structure (like CSS links or meta tags). jet-form-builder-pdf/render-head-bottom Purpose: This action is fired before closing the HEAD tag and opening the BODY tag. It's a suitable place for hooks to add scripts or other elements that need to be at the bottom of the HEAD section. jet-form-builder-pdf/render-body-top Purpose: This action allows adding content immediately inside the BODY tag, such as opening div tags or other structural HTML elements. jet-form-builder-pdf/render-body-bottom Purpose: Triggered just before the final HTML closing tags are added. This is ideal for appending content to the end of the document body or for performing cleanup operations.
If a file is available from the Media File Library, it means it's not protected and might be easily found by search engines. This could pose a serious threat to privacy and security.
it should be fixed at the moment kindly update the addon to the latest version of JetFormBuilder if it's still a bug, then proceed please to our support team - crocoblock.com/help-center/
A very great future of JFB but it lack proper styling, for example if we want to build a complete invoice with table, column, left and right side section, it is very hard as of now. I tried JetStyleManager too but failed to get the desire result.
True!
thanks for your feedback - I'll pass it to the team!
This is a great improvement to JefFormBuilder. However the layout is still the major weakness of such tools. There is no advanced layout options which prevent from designing really professional pdfs.
thanks for you feedback
I will pass it to our team 💛
Great tutorial again from my absolute favorite plugin Crocoblock
thank you so muuch 💙
I agree with others on the difficulty of styling and getting it Look professional, however I found that by coding the entire form in HTML and then just using the HTML code in the editor I’m able to receive some really good results, but it’s more of a workaround than a practical way of accomplishment.
thank you for your feedback - I have already passed it to the team 😊
Thank u so much :)
you are warmly welcomed :)
This is a great video. Can you tell me if it is possible to prompt the generated PDF file when the user submits the form so the download starts right away. I know you can send it via email or in save it in the form records but the user being able to download the file right away is a must have feature.
@@stefanradu4550 this would be amazing!
well, I should admit that with forms you can't do anything like this
also, as a workaround, you can use the Download btn widget and send dynamically the id of the newly created pdf file
hope it'll help you!
Great feature, but please add the functionality to create a Elementor e-mail template for this PDF creation. Would be a great addition to CrocoBlock for advanced systems like invoicing.
thank you ❤
am I right to say, that you want to make it possible to edit email template for PDF in Elementor editor?
or what exactly you mean here?
would appreciate you adding details 😊
@@Crocoblock Yes! That is exactly what i meant. A way to edit the template in elementor editor. This way the creative possibilities are endless if we can also use widgets like JetEngine’s Dynamic Field Widget!
Thank you for your suggestion! 😊 I've passed this request along to our development team. We’ll keep it in mind for future updates!
I liked the video, I need to create a button at the front that allows me to download the file
we have some solutions to this case
hope sth will suit you
Download Button: Dynamic Options | JetElements and JetEngine plugins ua-cam.com/video/ySb2qVjez3Y/v-deo.html
Adding a Custom PDF Download Button to Results Page with JetFormBuilder ua-cam.com/video/LmEPJlVlnrk/v-deo.html
Thank you for great video, please stop recording on 60fps in the videos !
I cant find the Signature field. Does jet form builder support e_signiture?
there's no built-in functionality as for now
but we have a custom solution from our top member from our community
Create a text field, and field name id: signature_pad_field , and set Field Type to: URL.
Submit button, you have to add a classname, go to block, advanced and css classname: submit_form_button
Then use the shortcode name to content:
[process_signature urls="%signature_pad_field%"]
// Use this shortcode to your form content: [process_signature urls="%signature_pad_field%"]
add_action('wp_enqueue_scripts', function() {
wp_enqueue_script('signature_pad', 'cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js', ['jquery'], null, true);
});
// Save signature image using AJAX
add_action('wp_ajax_save_signature_image', 'save_signature_image');
add_action('wp_ajax_nopriv_save_signature_image', 'save_signature_image');
function save_signature_image() {
$nonce = $_POST['nonce'] ?? '';
if (!$nonce || !wp_verify_nonce($nonce, 'save_signature_image_nonce')) {
wp_send_json_error('Invalid nonce.');
return;
}
$signature = $_POST['signature_image'] ?? '';
if (!$signature) {
wp_send_json_error('No signature data.');
return;
}
$signature = sanitize_text_field($signature);
$signature_parts = explode(',', explode(';', $signature)[1]);
$decoded_image = base64_decode($signature_parts[1]);
if (!$decoded_image) {
wp_send_json_error('Image decoding failed.');
return;
}
$upload_dir = wp_upload_dir();
$signature_dir = $upload_dir['basedir'] . '/jet-form-builder/signatures/';
if (!is_dir($signature_dir) && !wp_mkdir_p($signature_dir)) {
wp_send_json_error('Directory creation failed.');
return;
}
$file_name = 'signature_' . time() . '.png';
$file_path = $signature_dir . $file_name;
if (!file_put_contents($file_path, $decoded_image)) {
wp_send_json_error('Image saving failed.');
return;
}
$image_url = $upload_dir['baseurl'] . '/jet-form-builder/signatures/' . $file_name;
wp_send_json_success(['url' => $image_url]);
}
// Add Signature Pad functionality and styles
add_action('wp_footer', function() {
?>
jQuery(document).ready(function($) {
var sigField = $('input[name="signature_pad_field"]');
if (!sigField.length) return;
var form = sigField.closest('form');
var container = $('').insertAfter(sigField);
var canvas = $('').appendTo(container);
var placeholder = $('Sign here--------------------------------------').appendTo(container);
sigField.hide();
var clearBtn = $('Clear').appendTo(container).hide();
var signaturePad = new SignaturePad(canvas.get(0), {
backgroundColor: 'rgba(255, 255, 255, 0)',
penColor: 'black',
});
function resizeCanvas() {
var ratio = window.devicePixelRatio || 1;
canvas[0].width = container.width() * ratio;
canvas[0].height = 200 * ratio;
canvas[0].getContext('2d').scale(ratio, ratio);
signaturePad.clear();
placeholder.show();
clearBtn.hide();
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
canvas.on('mousedown touchstart', function() {
placeholder.hide();
clearBtn.show();
});
clearBtn.on('click', function() {
signaturePad.clear();
placeholder.show();
$(this).hide();
});
function cropSignature(canvas) {
var ctx = canvas.getContext('2d');
var w = canvas.width, h = canvas.height;
var imageData = ctx.getImageData(0, 0, w, h);
var data = imageData.data;
var top = h, left = w, right = 0, bottom = 0;
for (var y = 0; y < h; y++) {
for (var x = 0; x < w; x++) {
var index = (y * w + x) * 4;
if (data[index + 3] > 0) {
left = Math.min(left, x);
right = Math.max(right, x);
top = Math.min(top, y);
bottom = Math.max(bottom, y);
}
}
}
var padding = 10;
left = Math.max(left - padding, 0);
right = Math.min(right + padding, w);
top = Math.max(top - padding, 0);
bottom = Math.min(bottom + padding, h);
var croppedWidth = right - left + 1;
var croppedHeight = bottom - top + 1;
var croppedCanvas = document.createElement('canvas');
croppedCanvas.width = croppedWidth;
croppedCanvas.height = croppedHeight;
croppedCanvas.getContext('2d').drawImage(canvas, left, top, croppedWidth, croppedHeight, 0, 0, croppedWidth, croppedHeight);
return croppedCanvas.toDataURL('image/png');
}
$('.submit_form_button').on('click', function(e) {
if (signaturePad.isEmpty()) {
alert('Please provide a signature.');
return;
}
e.preventDefault();
$.ajax({
type: 'POST',
url: '',
data: {
action: 'save_signature_image',
signature_image: cropSignature(canvas.get(0)),
nonce: ''
},
success: function(response) {
if (response.success) {
sigField.val(response.data.url);
form.submit();
} else {
alert('Error: ' + response.data);
}
},
error: function() {
alert('Error while saving your signature.');
}
});
});
});
.signature-container {
position: relative;
width: 100%;
margin-bottom: 15px;
}
.signature-pad-canvas {
width: 100%;
height: 200px;
border: 1px solid #000;
border-radius: 6px;
}
.signature-placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ccc;
text-align: center;
pointer-events: none;
font-size: 16px;
padding: 10px;
width: calc(100% - 20px);
}
.clear-signature {
background: #333;
color: #fff;
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
border-radius: 6px;
border: none;
margin-top: 15px;
}
.clear-signature:hover {
background: red;
}
If the form has checkboxes or select fields, how would you add it to the pdf you generated using macros?
try please to use the available macros and list the values via the comma
@@Crocoblock o tried using the macros. However, when you have a checkbook, there is only one macros for that field. When I map it , it duplicates itself to the none checked options. For instance, my checkbox has 5 options . On the front-end of the form I selected the first option. When creating the pdf, if you map that macro for each selected option. It duplicates the selection on all options
thanks for clarifying your request 😊
hope it will help you github.com/Crocoblock/jfb-attributes-for-macros
How do we add the signature?
you mean the one the user writes by himself / herself and it's added at once to the PDF?
or the static one as the signature saved in the image?
@@Crocoblock yes
clarify please, how exactly you need it to be shown
Just a simple field that will hold the signature on the form. The user can sign immediately on thr form not uploading a signatureas as an image @Crocoblock
we are currently working on this option :)
Can JFB show qrcode from submitted data and download it (both data and qr) into pdf after submission? And how to do that?
well, as for right now it will not work in the PDF the way you've described
the main idea is the next ine:
we have qr callback for the dynamic field - prnt.sc/fIT1P_XuTmxy
but before you need to store this data somewhere and then display it with shortcode in PDF file, but unfortunately it still can't be achieved from the box
maybe this idea of how it should work will admire you to create a custom code
@@Crocoblock i hope this function will add in to jetformbuilder soon
How can I send the PDF file to the person who submits the form?
Good question I thought the end goal was for the user to get the pdf at the end. Probably after submitting trigger an email with the attachment?
@@rnzsalvador +1
@@rnzsalvador I think you can do so in the Submit action, select another "Send Email" option, and set the setting to the email of the person filling the form. But to do so you will need that person email address on the form to map it
so, you need to add a Send email action
and then you choose the current user email
then the question is how to get it
you can do it from the hidden field if the user is logged in
or you can make a field for an email
and then add it to the attachment pdf file
The level of customizing the PDF is somewhat very basic. Could you implement a feature where we can upload our PDF templates (more than one) and then map it using the macros mentioned in this video? Doing this will allow the form creator much more flexibility in terms of making the PDF look more polished and on brand
Hi,
After the client submits the form, will he receive an email afterwards with the pdf ?
yes, he can receive an email if you set it up - you need to add the Send email post submit action - prnt.sc/ZOvldVC3yhgX
How can I make the PDF available on the client's dashboard so they can download it to my account?
you can use for it Download button from the JetEngine
add it to the account
and set there the id of the pdf file
Nice! Is the Arabic language problem in Attachment PDF solved?
unfortunately, it's not yet resolved
How could I send that PDF by email from a page with a job application for example? Is this possible?
proceed please to this guide jetformbuilder.com/addons/pdf-attachment/
How do you stop WP from creating a public link to the PDF form? I don't want client info to end up indexed in Google when their PDF invoice is generated. Thanks.
The directoy with saved PDFs is disabled from browsing, for each user generated unique 32 chars length hash and all files of this user are stored in the folder named with this hash. Also each file name has unique suffix with ID of form submission. So 3rd party user can't directly access the file, only person who knows the URL. So now it works like, for example Google Document, where you enabled access by link. But anyway, of course, you need to be accurate with any data your store on your website, not only in the uploads folder. In the future we'll also most probably add an option to access this data only for authorized users with defined capabilities.
more you can find here facebook.com/groups/CrocoblockCommunity/permalink/8451163528308327
Any way is it possible to add letterhead on pdf like with no margins
there are hooks which allow you to achieve it
jet-form-builder-pdf/uploaded
Purpose: This action is triggered after a PDF file has been uploaded using the wp_upload_bits function. It passes the $file array to any functions hooked to this action, allowing for post-upload processing or logging.
jet-form-builder-pdf/render-head-top
Purpose: This action is executed right after opening the HTML and HEAD tags. It provides an opportunity to inject additional elements into the HEAD of the PDF's HTML structure (like CSS links or meta tags).
jet-form-builder-pdf/render-head-bottom
Purpose: This action is fired before closing the HEAD tag and opening the BODY tag. It's a suitable place for hooks to add scripts or other elements that need to be at the bottom of the HEAD section.
jet-form-builder-pdf/render-body-top
Purpose: This action allows adding content immediately inside the BODY tag, such as opening div tags or other structural HTML elements.
jet-form-builder-pdf/render-body-bottom
Purpose: Triggered just before the final HTML closing tags are added. This is ideal for appending content to the end of the document body or for performing cleanup operations.
for example, prnt.sc/RF2i1bYEzMP-
prnt.sc/BXUAIgBrly0k
@@Crocoblock thank you soo much, this is what i needed , Crocoblock is on the best Wordpress Plugin Company ❤️🔥
thanks a lot 🔥
It how to see a customers.. Please ans fast i need it
sorry, I don't exactly grab what exactly you need to achieve
could you please proceed to our support team? crocoblock.com/help-center/
If a file is available from the Media File Library, it means it's not protected and might be easily found by search engines. This could pose a serious threat to privacy and security.
it should be fixed at the moment
kindly update the addon to the latest version of JetFormBuilder
if it's still a bug, then proceed please to our support team - crocoblock.com/help-center/