How to link a Form to a CMS item?

A question that is hurting my brain. It is about CMS and forms and I can’t get my head around solving this…

I hope someone is able to shine some light on this …

Please bear with me:

We will have a collection called “ebooks” in our webflow CMS. It will include around 20 different items (in the future).

In this collection we have the following fields: title, description, image, step 1; step 2, step 3,… (and a form?)

What we want to do:

  • send traffic to the collection page “ebook”
  • Have a form on this page
  • Have the vistor fill in the form
  • Send an email upon submitting the form that includes the link to pdf

I need to know what “ebook” pdf to send after submitting a form.

In my understanding I need to link a specific form to a ebook collection item?

→ The user gets an email with the correct link

Here is where I am stuck. How is this correctly done in webflow?

1 Like

Insert a “HTML embed” element within your Form.
In the HTML embed element settings, set up some HTML code, like
<input type="hidden" name="Info" value="Visitor sent message from the book page XXXX and expects to be contacted.">
What’s marked with “XXXX” above, replace by a CMS field using “+ Add Field” in the top right of the HTML embed settings.
Of course you can add an URL to the PDF, either by using a field in the CMS or by calculation with JS in case you have a system naming these PDF files.

4 Likes

@Roald for my fully automated solution you’ll need to use Zapier and some email marketing service (like ConvertKit or MailChimp) that allows you to send emails based on segments.

Here’s how…

Setup Email Marketing Service:

  1. Setup an automated email for each PDF download (containing the link).
  2. Setup a “segment” for each of those automated emails.
  3. The idea is when a new subscriber enters a segment an email automatically gets sent (with the PDF download link).

Setup Webflow Form:

  1. Create a cms collection of “segments” (ex: “I like ice cream” shown in the dropdown could have a value of “ice_cream” for the segment name)
  2. Display this list in the form in a select element
  3. Bind the segments cms collection to it

Setup Zapier:

  1. Create a Webflow zap in Zapier that triggers on a “Form Submission”
  2. Collect which segment the user selected (ex: “ice_cream”)
  3. Send the users email and segment (collected on the form) to your Email Marketing Service
  4. Create a new subscriber at your Email Marketing Service with this segment

An email will automatically be sent to this email address, with this segment, sending the correct pdf download link.

3 Likes

Thanks for all your tips guys!

1 Like

Check out this answer: How to display data of my WebFlow CMS into a select field form?

Thanks. Was looking for some simple like this.
<input type="hidden" name="FORMNAME" value="{{CMS item}}">

1 Like

Thank you so so much!! This saved me so much time and works just as expected.
Kudos!

Hi, could you please give an example of how you would format the last part of your html block?
I am referring to value="{{CMS item}}" in the sample block <input type="hidden" name="FORMNAME" value="{{CMS item}}">
How do you call the value of a CMS item?

Hi @Matt.A :wave: welcome!

You’ll need to have a CMS Collection already created.

Then you’ll have to do this on a CMS Collection page, specifically:

Within your Form Block, you’ll need to add an Embed element.

Once you do, you have access to your CMS Collection fields.

Now you can very easily insert them into your hidden form field:

Webflow will handle all of the correct formatting for you once you insert it, you just need to handle the hidden form fields formatting yourself.

2 Likes

Thank you so much this really helps! I must say it’s people like you that make Webflow such an exciting community.