PDF Proposal Generator

Generate professional PDF proposals to send to your clients

When prospective clients are looking for someone to develop them a new site, they'll often get quotes from several different developers or companies. For this reason, it's important to make sure that your quote stands out of from the rest and has that extra wow factor. If you just need to send a quick one page quote then we'd recommend checking out our PDF Quote Generator, however if you want to really sell what you have to offer as part of your quote, then the PDF Proposal Generator is just for you.

What is the PDF Proposal Generator?

The PDF proposal generator allows you to create a multi-page proposal of work using a live preview. You can edit the layout, content and styling, then generate the result into a downloadable PDF. Quote templates can be saved so you can customise them to your business branding, then come back and use them again later. Let's take a look at a PDF example:

 

pdf-quote-generator

Templates

To save you some time, we've prepared a series of templates with several pre-defined pages that might be useful to include in a proposal. Here's a quick run through of what's included:

  • Cover Page - your company details and who the proposal is for
  • Page 1 - An introduction to you or your company with a feature box
  • Page 2 - A process map for how you work with clients
  • Page 3 - A brief including the project mission and goals
  • Page 4 - The quote with a cost summary table
  • Page 5 - A standalone title page
  • Page 6 - Your experience, case studies - why should the company choose you?

Here are four of the available templates (you can click to load them into the proposal generator):

preset3
preset4
preset2
preset1

The templates show off the different types of pages available in the proposal generator and how they can be put to use with different styles and colours.

How to use the PDF Proposal Generator

0-template

Choose a template or start blank

The proposal generator tool will start with basic styling in black and white. You can start with this blank canvas, or you can click into the 'Templates' section to use a predefined set of colours and pages, and then modify these instead.

1-layout

Choose your layout

In the grey tool menu, you can choose if you would like your PDF to be portrait or landscape, the default is landscape.

2-editing

Modify the content

There are three main types of content you can edit:

  • Fixed content - simply click to change the text, e.g. the company title on the cover page.
  • Free text content - areas designated for any type of content - simply click into the area to load the WYSIWYG editor that will allow you to add various styles (H1, H2, H3, paragraph etc) and also embed images.
  • Quote tables - a table of tasks where you can apply the time required, rate and totals.

Fixed and free text content are indicated by a grey dashed outline (the outline will not show on the end PDF that is generated).

3-add-page

Page Types

To add a new page, simply select the type of page you wish to add using the dropdown menu and click the plus button. Let's take a look at the different types of pages that you can add to your proposal:

  • Cover Page - this is the only required page and contains some fixed text areas such as company title and slogan, you can delete the text in these areas if you don't want to use them.
  • 2 Columns - split the page 50 / 50 with two content areas.
  • 2 Columns Feature box - split the page with one area for the main content, and then a smaller 'feature' box that can be styled for additional content.
  • 3 Columns - split the page into three even content areas.
  • Full width - create a single full width content area.
  • Quote - create a table for entering a cost break down.

 

4-styling

Modify the styling

At the bottom of the tool is an accordion of options where you can change the colours, fonts, sizes and padding of text and elements on your page.

 

5-quote

Quote Tables

When you are on a quote page, you'll notice in the grey tool bar there are additional options to add and remove rows from the table. When entering the data into the rows, the end rows will attempt to auto-calculate the totals for you.

 

6-header

Headers and footers

On any of the pages except the cover page you can directly edit the fixed content headers and footers. Changing either of these will automatically update all the other pages for you.

Troubleshooting

Working with the available space

fail

To allow the tool to be used on multiple screen resolutions, the HTML preview that you work with is responsive. As a result, the available space in the preview is not an exact reflection of how the end PDF will look, but is designed to give a preview of how the page will be laid out. You will see warnings at the top of your screen to indicate if it is likely that your content is going to spill over two PDF pages, or if your working environment is too small.

Oops! PDF failed to generate

Converting HTML to PDF has some limitations, the most likely cause of a failed conversion will be because you have content containing HTML elements such as tables that are spanning over more than one PDF page, which isn't supported. If you receive a failed PDF error you may wish to review the following.

  • Make sure that any quote tables or lists aren't likely to overlap over two pages
  • Try to limit the content of your sections so they are likely to fit on one PDF page
  • Optimise your images to the right size before embedding them

If all else fails, don't hesitate to get in touch for assistance.

PDF Proposal Generator

David Bainbridge

Coveloping co-founder and regular contributor to the Coveloping blog. David is a contract web developer based in Bristol, UK also posting code snippets and tutorials on the Code Synthesis blog.

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

Your email address will not be published. Required fields are marked *

Code Copied!