Creating a website with Potion and NoteForms
Forms are really convenient to collect information, but they aren't the best to share information. To do that, there are many different mediums, but today we're going to focus one of the main one the 21st century: websites.
If you're reading our guide, it's very likely that you are a Notion user, so in this guide we are going to show you to create a website, powered by Notion, with a great tool named Potion.so. We will first build a portfolio with Potion, and then integrate a NoteForm for visitors to contact us.
First we need to create the content:
- Go to Potion's template page and pick your favorite portfolio template. I'll go with the dark portfolio blog template.
- On the template page, click "Find the template Here.". A Notion page opens, click the "Duplicate" button in the top right corner.
- Replace the content with your own. Mine is here.
Next we need to setup Potion:
- Create your Potion.so account here
- Go to https://dashboard.potion.so/sites
- Click on Add New Site
- Choose a name for your new site
- Make sure the Notion page we previously created is Public. You can make the page public by clicking the "Share" button at the top right corner of your page in Notion. Make sure the "Share to web" option is enabled, and copy the page URL.
You can then paste it in Potion.
- Choose a sub domain for your website
- Click on "Continue"
- Type in a description and hit "Continue"
- Now wait for your site to finish building. It shouldn't take more than a few minutes.
- Now we have a live website with custom content. But you're going to realize that it doesn't look like the template we wanted to copy. That's because we haven't styled it.
- Go back to the template page you used, and copy the code at the bottom of the page.
- In Potion admin site, go to the "Snipped injection" page.
- Paste the code, and hit "Save". Go to your Potion site to check the results! You now have a beautiful Portfolio. You can easily change its content just by editing the page in Notion.
Now that we have a beautiful Potion website, we need to add a contact form:
- Create the contact form. We already have a video guide to help you creating a contact form. Follow the guide, create your Notion table, and create your form.
- Finally, we just need to embed the form in our website. Open the Notion page of your portfolio, and add a new embed block. Paste the link to your form and you're done!
- Refresh your Potion website and your done! You now have a beautiful Potion website with a NoteForm. Here's the site we built in this guide if you want to see the final result.
If you're reading our guide, it's very likely that you are a Notion user, so in this guide we are going to show you to create a website, powered by Notion, with a great tool named Potion.so. We will first build a portfolio with Potion, and then integrate a NoteForm for visitors to contact us.
Creating your first Potion site
First we need to create the content:
- Go to Potion's template page and pick your favorite portfolio template. I'll go with the dark portfolio blog template.
- On the template page, click "Find the template Here.". A Notion page opens, click the "Duplicate" button in the top right corner.
- Replace the content with your own. Mine is here.
Next we need to setup Potion:
- Create your Potion.so account here
- Go to https://dashboard.potion.so/sites
- Click on Add New Site
- Choose a name for your new site
- Make sure the Notion page we previously created is Public. You can make the page public by clicking the "Share" button at the top right corner of your page in Notion. Make sure the "Share to web" option is enabled, and copy the page URL.
You can then paste it in Potion.
- Choose a sub domain for your website
- Click on "Continue"
- Type in a description and hit "Continue"
- Now wait for your site to finish building. It shouldn't take more than a few minutes.
- Now we have a live website with custom content. But you're going to realize that it doesn't look like the template we wanted to copy. That's because we haven't styled it.
- Go back to the template page you used, and copy the code at the bottom of the page.
- In Potion admin site, go to the "Snipped injection" page.
- Paste the code, and hit "Save". Go to your Potion site to check the results! You now have a beautiful Portfolio. You can easily change its content just by editing the page in Notion.
Adding a form to our Portfolio
Now that we have a beautiful Potion website, we need to add a contact form:
- Create the contact form. We already have a video guide to help you creating a contact form. Follow the guide, create your Notion table, and create your form.
- Finally, we just need to embed the form in our website. Open the Notion page of your portfolio, and add a new embed block. Paste the link to your form and you're done!
- Refresh your Potion website and your done! You now have a beautiful Potion website with a NoteForm. Here's the site we built in this guide if you want to see the final result.
Updated on: 11/08/2023
Thank you!