2 DAYS LEFT TO REGISTER FOR COHORT 3! No-Code Fundamentals Course: Turn an idea into reality in 5 weeks with lessons from no-code's #1 pioneer
No items found.

Create a PDF from dynamic content in Webflow

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

Overview

  1. Create a Webflow CMS collection
  2. Create a form submission in Webflow
  3. Set up an automation in Zapier
  4. Download our PDF from CloudConvert

Create a Webflow CMS Collection

First you will need to create a collection in Webflow. In this example we have created an invoice collection for our clients. This will allow us to auto generate a PDF invoice for our clients each time a new one is created.

Here is our example collection. Set it up to include all the fields you would like to appear on your PDF. Make sure to use text fields for any number/date inputs to avoid any errors when setting up our automation in Zapier.

Create a CMS collection page to display your dynamic content as you will need the unique URL item created for each item to make the PDF. Again, style this however you want it to appear on your PDF.

Create a form submission in Webflow

Now you will need to create a form in Webflow so you can submit the data you need to Zapier. You will need to make sure that you include all of the fields from your Webflow CMS collection that you want to be included in the final PDF.

For this we created a 'create invoice' page in Webflow and built out a form using the previous invoice template. To save time you can also create a simple form with the inputs you need without styling it to match the invoice collection page.


Set up the automation in Zapier

Our automation will have 3 steps We will be linking Webflow to CloudConvert, so make sure you have a CloudConvert account set up. Make sure your site in Webflow is published and you have submitted your invoice form before creating your zap.

Step 1:

In Zapier, select 'form submission in Webflow' as the trigger. Then follow the steps to select your site and the form you used to create the invoice. Our form in this example is named 'create invoice form' so we will make sure to select this option. Then test your action, if you have correctly set up and submitted your form in Webflow then Zapier will pull in all of the correct information.

Step 2:

The next step in Zapier will be 'create a live item in Webflow'. Again follow the steps to make sure you link to the correct project and form you have set up in Webflow. Now we need to link all of the fields in Zapier to those we created on our form in Webflow.


Click test & continue. If any issues arise go back and make sure all your fields in Webflow are set up as text fields, number fields on your invoice may cause Zapier to return a 'validation error'.

Step 3

For step 3 we will select 'CloudConvert' and choose 'Capture a Website' To capture the correct page, we will need to enter our website URL into the 'URL' field in Zapier, followed the slug (make sure there is a / before the slug). Our slug has been generated from the 'name' field from the previous step, which we set to be the invoice number followed by the customer name. For the output format make sure PDF is selected.


Next we can then format our PDF, with a number of options including number of pages, page height/width, margin sizes, filename, tags. Here we have just set our margins to be 5mm (0.5cm) and left the rest of the fields as standard. You can change these fields however you wish the output PDF to look.

Click test & continue.

Once the automation has completed, log in to your CloudConvert account.

Go to Dashboard, then jobs from the left hand menu.

Select the recently uploaded job, then click the red page icon to download the PDF.

Overview

  1. Create a Webflow CMS collection
  2. Create a form submission in Webflow
  3. Set up an automation in Zapier
  4. Download our PDF from CloudConvert

Create a Webflow CMS Collection

First you will need to create a collection in Webflow. In this example we have created an invoice collection for our clients. This will allow us to auto generate a PDF invoice for our clients each time a new one is created.

Here is our example collection. Set it up to include all the fields you would like to appear on your PDF. Make sure to use text fields for any number/date inputs to avoid any errors when setting up our automation in Zapier.

Create a CMS collection page to display your dynamic content as you will need the unique URL item created for each item to make the PDF. Again, style this however you want it to appear on your PDF.

Create a form submission in Webflow

Now you will need to create a form in Webflow so you can submit the data you need to Zapier. You will need to make sure that you include all of the fields from your Webflow CMS collection that you want to be included in the final PDF.

For this we created a 'create invoice' page in Webflow and built out a form using the previous invoice template. To save time you can also create a simple form with the inputs you need without styling it to match the invoice collection page.


Set up the automation in Zapier

Our automation will have 3 steps We will be linking Webflow to CloudConvert, so make sure you have a CloudConvert account set up. Make sure your site in Webflow is published and you have submitted your invoice form before creating your zap.

Step 1:

In Zapier, select 'form submission in Webflow' as the trigger. Then follow the steps to select your site and the form you used to create the invoice. Our form in this example is named 'create invoice form' so we will make sure to select this option. Then test your action, if you have correctly set up and submitted your form in Webflow then Zapier will pull in all of the correct information.

Step 2:

The next step in Zapier will be 'create a live item in Webflow'. Again follow the steps to make sure you link to the correct project and form you have set up in Webflow. Now we need to link all of the fields in Zapier to those we created on our form in Webflow.


Click test & continue. If any issues arise go back and make sure all your fields in Webflow are set up as text fields, number fields on your invoice may cause Zapier to return a 'validation error'.

Step 3

For step 3 we will select 'CloudConvert' and choose 'Capture a Website' To capture the correct page, we will need to enter our website URL into the 'URL' field in Zapier, followed the slug (make sure there is a / before the slug). Our slug has been generated from the 'name' field from the previous step, which we set to be the invoice number followed by the customer name. For the output format make sure PDF is selected.


Next we can then format our PDF, with a number of options including number of pages, page height/width, margin sizes, filename, tags. Here we have just set our margins to be 5mm (0.5cm) and left the rest of the fields as standard. You can change these fields however you wish the output PDF to look.

Click test & continue.

Once the automation has completed, log in to your CloudConvert account.

Go to Dashboard, then jobs from the left hand menu.

Select the recently uploaded job, then click the red page icon to download the PDF.

Become a Pro member to access all content

240+ instructional videos led by professionals
Weekly expert workshops and replays
1-1 consultation with the Makerpad team
Over $50k in discounts for tools
Private peer community
Profile for tracking progress and sharing your work
Yearly pricing
$249/year
Start your 7 day free trial*
Get PRO Yearly
Lifetime pricing
$600billed once
Start your 7 day free trial*
Get PRO Lifetime

Overview

  1. Create a Webflow CMS collection
  2. Create a form submission in Webflow
  3. Set up an automation in Zapier
  4. Download our PDF from CloudConvert

Create a Webflow CMS Collection

First you will need to create a collection in Webflow. In this example we have created an invoice collection for our clients. This will allow us to auto generate a PDF invoice for our clients each time a new one is created.

Here is our example collection. Set it up to include all the fields you would like to appear on your PDF. Make sure to use text fields for any number/date inputs to avoid any errors when setting up our automation in Zapier.

Create a CMS collection page to display your dynamic content as you will need the unique URL item created for each item to make the PDF. Again, style this however you want it to appear on your PDF.

Create a form submission in Webflow

Now you will need to create a form in Webflow so you can submit the data you need to Zapier. You will need to make sure that you include all of the fields from your Webflow CMS collection that you want to be included in the final PDF.

For this we created a 'create invoice' page in Webflow and built out a form using the previous invoice template. To save time you can also create a simple form with the inputs you need without styling it to match the invoice collection page.


Set up the automation in Zapier

Our automation will have 3 steps We will be linking Webflow to CloudConvert, so make sure you have a CloudConvert account set up. Make sure your site in Webflow is published and you have submitted your invoice form before creating your zap.

Step 1:

In Zapier, select 'form submission in Webflow' as the trigger. Then follow the steps to select your site and the form you used to create the invoice. Our form in this example is named 'create invoice form' so we will make sure to select this option. Then test your action, if you have correctly set up and submitted your form in Webflow then Zapier will pull in all of the correct information.

Step 2:

The next step in Zapier will be 'create a live item in Webflow'. Again follow the steps to make sure you link to the correct project and form you have set up in Webflow. Now we need to link all of the fields in Zapier to those we created on our form in Webflow.


Click test & continue. If any issues arise go back and make sure all your fields in Webflow are set up as text fields, number fields on your invoice may cause Zapier to return a 'validation error'.

Step 3

For step 3 we will select 'CloudConvert' and choose 'Capture a Website' To capture the correct page, we will need to enter our website URL into the 'URL' field in Zapier, followed the slug (make sure there is a / before the slug). Our slug has been generated from the 'name' field from the previous step, which we set to be the invoice number followed by the customer name. For the output format make sure PDF is selected.


Next we can then format our PDF, with a number of options including number of pages, page height/width, margin sizes, filename, tags. Here we have just set our margins to be 5mm (0.5cm) and left the rest of the fields as standard. You can change these fields however you wish the output PDF to look.

Click test & continue.

Once the automation has completed, log in to your CloudConvert account.

Go to Dashboard, then jobs from the left hand menu.

Select the recently uploaded job, then click the red page icon to download the PDF.

Overview

  1. Create a Webflow CMS collection
  2. Create a form submission in Webflow
  3. Set up an automation in Zapier
  4. Download our PDF from CloudConvert

Create a Webflow CMS Collection

First you will need to create a collection in Webflow. In this example we have created an invoice collection for our clients. This will allow us to auto generate a PDF invoice for our clients each time a new one is created.

Here is our example collection. Set it up to include all the fields you would like to appear on your PDF. Make sure to use text fields for any number/date inputs to avoid any errors when setting up our automation in Zapier.

Create a CMS collection page to display your dynamic content as you will need the unique URL item created for each item to make the PDF. Again, style this however you want it to appear on your PDF.

Create a form submission in Webflow

Now you will need to create a form in Webflow so you can submit the data you need to Zapier. You will need to make sure that you include all of the fields from your Webflow CMS collection that you want to be included in the final PDF.

For this we created a 'create invoice' page in Webflow and built out a form using the previous invoice template. To save time you can also create a simple form with the inputs you need without styling it to match the invoice collection page.


Set up the automation in Zapier

Our automation will have 3 steps We will be linking Webflow to CloudConvert, so make sure you have a CloudConvert account set up. Make sure your site in Webflow is published and you have submitted your invoice form before creating your zap.

Step 1:

In Zapier, select 'form submission in Webflow' as the trigger. Then follow the steps to select your site and the form you used to create the invoice. Our form in this example is named 'create invoice form' so we will make sure to select this option. Then test your action, if you have correctly set up and submitted your form in Webflow then Zapier will pull in all of the correct information.

Step 2:

The next step in Zapier will be 'create a live item in Webflow'. Again follow the steps to make sure you link to the correct project and form you have set up in Webflow. Now we need to link all of the fields in Zapier to those we created on our form in Webflow.


Click test & continue. If any issues arise go back and make sure all your fields in Webflow are set up as text fields, number fields on your invoice may cause Zapier to return a 'validation error'.

Step 3

For step 3 we will select 'CloudConvert' and choose 'Capture a Website' To capture the correct page, we will need to enter our website URL into the 'URL' field in Zapier, followed the slug (make sure there is a / before the slug). Our slug has been generated from the 'name' field from the previous step, which we set to be the invoice number followed by the customer name. For the output format make sure PDF is selected.


Next we can then format our PDF, with a number of options including number of pages, page height/width, margin sizes, filename, tags. Here we have just set our margins to be 5mm (0.5cm) and left the rest of the fields as standard. You can change these fields however you wish the output PDF to look.

Click test & continue.

Once the automation has completed, log in to your CloudConvert account.

Go to Dashboard, then jobs from the left hand menu.

Select the recently uploaded job, then click the red page icon to download the PDF.

Overview

  1. Create a Webflow CMS collection
  2. Create a form submission in Webflow
  3. Set up an automation in Zapier
  4. Download our PDF from CloudConvert

Create a Webflow CMS Collection

First you will need to create a collection in Webflow. In this example we have created an invoice collection for our clients. This will allow us to auto generate a PDF invoice for our clients each time a new one is created.

Here is our example collection. Set it up to include all the fields you would like to appear on your PDF. Make sure to use text fields for any number/date inputs to avoid any errors when setting up our automation in Zapier.

Create a CMS collection page to display your dynamic content as you will need the unique URL item created for each item to make the PDF. Again, style this however you want it to appear on your PDF.

Create a form submission in Webflow

Now you will need to create a form in Webflow so you can submit the data you need to Zapier. You will need to make sure that you include all of the fields from your Webflow CMS collection that you want to be included in the final PDF.

For this we created a 'create invoice' page in Webflow and built out a form using the previous invoice template. To save time you can also create a simple form with the inputs you need without styling it to match the invoice collection page.


Set up the automation in Zapier

Our automation will have 3 steps We will be linking Webflow to CloudConvert, so make sure you have a CloudConvert account set up. Make sure your site in Webflow is published and you have submitted your invoice form before creating your zap.

Step 1:

In Zapier, select 'form submission in Webflow' as the trigger. Then follow the steps to select your site and the form you used to create the invoice. Our form in this example is named 'create invoice form' so we will make sure to select this option. Then test your action, if you have correctly set up and submitted your form in Webflow then Zapier will pull in all of the correct information.

Step 2:

The next step in Zapier will be 'create a live item in Webflow'. Again follow the steps to make sure you link to the correct project and form you have set up in Webflow. Now we need to link all of the fields in Zapier to those we created on our form in Webflow.


Click test & continue. If any issues arise go back and make sure all your fields in Webflow are set up as text fields, number fields on your invoice may cause Zapier to return a 'validation error'.

Step 3

For step 3 we will select 'CloudConvert' and choose 'Capture a Website' To capture the correct page, we will need to enter our website URL into the 'URL' field in Zapier, followed the slug (make sure there is a / before the slug). Our slug has been generated from the 'name' field from the previous step, which we set to be the invoice number followed by the customer name. For the output format make sure PDF is selected.


Next we can then format our PDF, with a number of options including number of pages, page height/width, margin sizes, filename, tags. Here we have just set our margins to be 5mm (0.5cm) and left the rest of the fields as standard. You can change these fields however you wish the output PDF to look.

Click test & continue.

Once the automation has completed, log in to your CloudConvert account.

Go to Dashboard, then jobs from the left hand menu.

Select the recently uploaded job, then click the red page icon to download the PDF.

Get help and discuss

Open community forum
Close

Sign up for our weekly updates

Get an update every Sunday with new content, news and a behind-the-scenes of what our community are building.
Join over 18,000 others
You're in 😍- check your email to get started. Tweet me what you want to build to see how to do it without code.
Oops! Something went wrong while submitting the form.

Related Tutorials

view all ⭢