How can I customize PDF Form?

Is it possible to have the form report print out exactly as the form looks?

e.g. The 2017 Team Nomination Form (not published as yet) has multiple fields on each line but when I download the report to excel it lists across the page and in pdf it lists 1 item per line, this is going to use a LOT of paper to print.

 

 

Inside of this guide you can find how to Print the form with user data: 

https://www.jotform.com/help/335-How-to-Print-the-Form-with-the-Users-Data 

You can also customize your PDF report and arrange the field inside of it.

https://www.jotform.com/help/384-How-to-Customize-PDF-Submissions-Report 

Hope this will help. Let us know if you need further assistance 

If I understood your concern correctly, you are wondering about how to get more good looking PDF or Excel version of your forms.

First of all, PDF version of your form should be the same as your form. Unfortunately, there is a difference in your form and PDF version when I checked them.

I have cloned your form to my side and I injected custom CSS codes to this form. I created a PDF form which is more beautiful and functional. Please have a look at the video below about how the result looks like.

This is the link of the form on my side. You can clone this form to your side: https://form.jotform.com/63121304203941 

 

In addition, please follow the instructions below how to do that.

1. How to create  PDF Form.

Please uncheck PDF Form Options. 

 

2. Please copy this CSS code below and inject it to your form.

I have injected some custom CSS to cloned form and I also changed the width of your form etc. 

.form-all {

    width : 1000px;

}

.form-line.form-line-column.form-col-2 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-1 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-3 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-4 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-5 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-6 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-7 {

    width : 250px;

    float : left;

}

.form-line.form-line-column.form-col-8 {

    width : 250px;

    float : left;

}

Please have a look at the guide about how to inject custom CSS codes in your forms: How-to-Inject-Custom-CSS-Codes

I also sent you PDF form that I have created for you. Please check your email (football@sunshinecoastfootball.com.au).

On the other hand, Excel Report contains only your form fields, there is no style option for that. You can select fields that your Excel Report includes.

If you need any further assistance, please feel free to let us know.

Thank you.

Hi Olivia,
Thank you for your help.
I have used the cloned form you created and made some further changes, now I have two more queries.
1. Is it possible to insert a space so that when I print the form the MINIROOS heading goes onto the 2nd page ?
2. The email format still doesn't show the same as the form, is there something I need to change there?

https://form.jotform.co/63126951034855

I don't understand about injecting CSS codes etc

Regards,

Narelle Skelly

...

Hello Narelle,

On behalf of my colleague, you are welcome. Here are the answers to your queries:

#1. Yes it is possible to add "Form Separators" widget to ensure the questions are moved to second page. Please check the screenshot below:

 

#2. Please note that when you add a new email alert, it always display in default format. It would require to make a lot of changes in the source code of the email alert to display the exact same layout as your form. Please check the screenshot below how to edit the source code of your form's email alert:

 

Hope this helps.

Do get back to us if you have any questions.

Thank you!

Thank you Ashwin, I have managed to insert the Form Separator so that's all good now.

I don't understand what I'm suppose to do with the source code after I have highlighted it? I guess I copy it but where do I put it?

 Narelle

Hi Narelle, 

My colleague Ashwin actually tried to show you how to edit the source code on the email notifications. So, you do not actually need to copy and paste it somewhere. By changing the code you should be able to change the layout of your email notifications. 

To be honest with you tough, changing the email notification layout to a similar configuration with your form is lots of work. Normally, email notifications has its default look and it only consists of the data that are submitted. If you can specify what to add we can help you do that.

We will be waiting for further details. Thank you for contacting us. 

Hi Owen,
I'm obviously VERY new to this and don't understand source code etc L
Basically what I would like to do is to be able to print out user submitted forms exactly as they look when I hit print from the Preview

Capture.JPG






...

Unfortunately your image is not shown here on forum. Please note that images that are attached inside of email will not be shown here on forum. You will need to open this thread and add your screenshot. 

If I understood you correctly you want to print your form with data that your users entered. Like this:

You can achieve that by following steps from the guide I provided you in my previous post.

How to Print the Form with the Users Data

Let us know if you need further assistance.