How to add Print Button on an online form?

SOLVE
kamal286c
Participant

I would like to add a Print Button on an online form for user to print before submitting the form.

0 Upvotes
1 Accepted solution

Accepted Solutions
Indra
Solution
Top Contributor | Diamond Partner

@natsumimori thanks for mentioning!

 

Hi @kamal286c,

 

You can add a Rich text field to the form and add custom markup in there.

So I tried to add a button with a print function on it but this isn't allowed.

 

This code won't work:

<button onclick="window.print()">Print this page</button>

 

What you should do is create a custom function that will trigger an element on your page.

So your richt text module will look like this:

 

<a class="print-page">Print this page</a>

 

Your custom JS will look like:

document.addEventListener('click', function (event) {

  // If the clicked element doesn't have the right selector, bail
  if (!event.target.matches('.print-page')) return;

  // Don't follow the link
  event.preventDefault();
  window.print();

}, false);

 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

4 Replies 4
natsumimori
Community Manager

Hi @kamal286c , thank you for your post.

 

From what I understand, there's currently no native HubSpot feature that adds "print" button on your form, so this will require some custom development works. @BootstrapC and @JBeatty , would you be able to share your advice here?

kamal286c
Participant

Thank you natsumimori for your clarification. Looking forward to understand how the custom development works.

0 Upvotes
natsumimori
Community Manager

Tagging in @Indra here- is this something you have experience with?

0 Upvotes
Indra
Solution
Top Contributor | Diamond Partner

@natsumimori thanks for mentioning!

 

Hi @kamal286c,

 

You can add a Rich text field to the form and add custom markup in there.

So I tried to add a button with a print function on it but this isn't allowed.

 

This code won't work:

<button onclick="window.print()">Print this page</button>

 

What you should do is create a custom function that will trigger an element on your page.

So your richt text module will look like this:

 

<a class="print-page">Print this page</a>

 

Your custom JS will look like:

document.addEventListener('click', function (event) {

  // If the clicked element doesn't have the right selector, bail
  if (!event.target.matches('.print-page')) return;

  // Don't follow the link
  event.preventDefault();
  window.print();

}, false);

 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post