PDF form different then the actual created form

I have create a form and I have been able to add a PDF with my submission to my clients.

When i ran a test - I noticed that the PDF attachment is completely different then the actual form.

I went through alot of your forums but i still cannot figure this out.

also - Once I finally get my PDF looking the same I would like it to have the proper breaks and spacing to look like the form it self.

Note: I have attached the form that it should look like.

Can you help please? :(

thank you!

Hi,

Please note the the PDF submissions will have a different layout and format. If you want to print the live form with the submission data on it, you could try following this guide: https://www.jotform.com/help/335-How-to-Print-the-Form-with-the-Users-Data. 

I did check your form and I see that you have indeed created a customize PDF, to learn more about this feature, please also do check this guide: https://www.jotform.com/help/384-How-to-Customize-PDF-Submissions-Report. 

However, I do see that some of the changes in your PDF design is different from the downloaded PDF submission. Here are the things I noticed that you also mentioned: 

1. Image is not properly aligned:

In the PDF Designer, the image is centered. 

But when you download a submission, it is aligned to the left.

2. Page breaks. 

In the PDF Designer, the text is pushed to the next page, although, it is better if it is not being cut off in this view. I suggest adjusting it further. 

When you download a PDF submission, part of the text is in page 1. 

If you could provide us more inconsistencies, please do share it with us so that we can forward this to our developers. If you will be attaching images, please directly do that by opening this thread on a new window/tab and use the reply textarea, here's the link to this thread: https://www.jotform.com/answers/1125139. 

We'll wait for your response. 

I Adjusted the PDF under "submissions" and "customize PDF" - I then went and adjusted the spacing and it looks better - I then saved it.

Now when I go back into "PREVIEW FORM" - I fill out my form and press "PRINT FORM" -
Then "OPEN PDF IN PREVIEW".
My PDF format is still incorrect regarding".

The following items are incorrect:

1) it went from 3 pages to 5 pages

2) Page Break Between 2-3 are wrong

 

3) Page Break in page 4-5 is wrong

 

 

 

 

4)  Top of pages shows  "Thank You         https://form.jotform.ca/70957509324260?preview=true

 

 

 

 

Here is the link to my form:  https://form.jotform.ca/70957509324260

Please note that this is a browser issue, to overcome this, we can force the browser to print a page break where we want,  add a TEXT element with the following HTML code inside right before where you want the page break: 

<div class="pagebreak"></div>

You have one already added in your form, before the wedding collapse, please see below:

Please repeat the same anywhere you want the page to break. 

After that, inject the following CSS in your form:

@media print {

   .pagebreak {page-break-after: always;}

}

This will force the form to print the content after that text element into a new page, and it will fix the printing issue. 

Here's how to inject custom CSS into your form:

How-to-Inject-Custom-CSS-Codes

4)  Top of pages shows  "Thank You         https://form.jotform.ca/70957509324260?preview=true

This is also a browser thing, you can remove it by doing the following:

1. From the print page, click on More settings:

2. In Options, uncheck Headers and footers:

I hope this solves your issue, please get back to us if you need any further help.

Thank you.

I understand what you saying thank you for that. But i have already tried these steps.

I added a TEXT then a HTML code into the SOURCE CODE area (correct?)

I then added a CSS into the appropriate location.

But, what this does is puts my page breaks in the wrong locations. and also adds an additional
whole blank page.

2) also - can the AGREEMENT DETAILS page be in one single page when printing? (I have added a page break before and after)
As of right now - it splits into two pages, which is okay if not fixable, but then can i space the information properly so it does not cut the information?

The last page/tab is the SIGNATURES.
This is perfect how it turned out!

The extra page seems to be added due to the email field seemingly being on the second page.  When I removed the page break after the email field, the empty page was removed and Wedding Information was moved up to the second page.

There looks to be far too much text in the agreement details to fit on one page without making the text very small.  I separated the text into two fields then I added a "Spacer" widget and increased the space until the text was on the correct pages:

Those updates should allow for printing directly from the form with the formatting you are looking for.

So I end up removing all the page breaks and just added spacers and adjusted height to move things around.

The only thing I dont like now is that all the fonts and spacing is too large for my liking,

To prints its 5 pages when I know it can be done in 3

You can adjust the text of labels and answers on your custom PDF by going to the settings menu

Next, the preferences window will appear and you should be able to resize the text of the PDF in as a whole.

You can also reduce the text size of the fields and labels by clicking the wrench icon and pressing A- to reduce the size of the text.

If you need assistance on this please let us know.

Thanks.