Our best-selling course is back! Enrollment for No-Code Fundamentals cohort 5 now OPEN –>

How to build a product submission form 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

You can create a form directly in Webflow to allow members to submit products to your site. This tutorial shows you all the steps you need to follow to get the form set up and link it to your Webflow CMS.

You can create a form directly in Webflow to allow members to submit products to your site. This tutorial shows you all the steps you need to follow to get the form set up and link it to your Webflow CMS.

Below are a few pieces of script that you can choose to use if you are planning on adding in automations later. If that's a bit advanced, feel free to omit the code and build as you would a normal form.

The product form should include the following fields:

Product Name

Attachments — an attachment field

Company Logo — an attachment field

Tags —

Traditional drop down — these should match the tag collection list.  Be sure the text and value both match the tag.

Advanced — remove all the options, be sure to give it an ID of Tags and place the below script in the before </body> tag section of your member only home settings

<script>
$('.platform-item').each(function(){
platformname = $(this).children('.platform-name').text();
platformid = $(this).children('.platform-id').text();
$('#platforms').append('<option value="'+platformid+'">'+platformname+'</option>');
});
</script>


Product Website URL — a text field

Product description — a text area

Submit button — style accordingly and alter success message by following these steps;

  1. Adjust and style text to read 'Submitting your product, please wait...' or similar.
  2. Add in a Lottie file of three dots or a spinner to indicate the page is reloading; be sure to set it to loop.
  3. Add the below success message script to before </body> tag section of your member only home settings:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
$(document).on('submit', 'form', function() {
setTimeout(function() { location.reload(true); }, 3000);
});
});
</script>

Return to normal form state and be sure to hit publish.

Finish styling the rest of the product display section by adding a link to the product template page,  adding in a link for comments and formatting text to your preferences.

Thank you to Ben Parker and Nelson for their wonderful tutorials and scripts used in these steps! Including;

Success message refresh script — credit to Ben Parker for this script, taken from this webflow blog.

Append to drop down script code — credit to Nelson, The Pixel Geek, for this. Script adapted from this YouTube tutorial.

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

You can create a form directly in Webflow to allow members to submit products to your site. This tutorial shows you all the steps you need to follow to get the form set up and link it to your Webflow CMS.

You can create a form directly in Webflow to allow members to submit products to your site. This tutorial shows you all the steps you need to follow to get the form set up and link it to your Webflow CMS.

You can create a form directly in Webflow to allow members to submit products to your site. This tutorial shows you all the steps you need to follow to get the form set up and link it to your Webflow CMS.

Get help and discuss

Open community forum

Featured Live Course

No-Code Fundamentals: Getting started with no-code

Build a business, launch a side-project, or finally start that idea you've been sitting on, without writing code.
Learn more
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 ⭢