How can I pair a phone number submitted through a form with a specific link, like a 'Contact via WhatsApp' link, and store it in a CMS collection in Webflow?

Published on
September 22, 2023

To pair a phone number submitted through a form with a specific link, like a 'Contact via WhatsApp' link, and store it in a CMS collection in Webflow, you can follow these steps:

  1. Set up your form: Start by creating a form on your Webflow website to collect the phone numbers. You can use the built-in form feature or create a custom form using HTML and CSS.

  2. Create a CMS collection: Access your Webflow project's Designer and navigate to the CMS tab. Create a new collection or use an existing one, depending on your needs. Make sure the collection has a field to store the phone number data.

  3. Add a form submission action: In the form settings, you can specify an action to be taken upon form submission. For this scenario, select the "Custom" option. This allows you to customize what happens after the form is submitted.

  4. Add custom code: In the custom action settings, add JavaScript code to handle the form submission. Use Webflow's built-in CMS API to update the CMS collection with the submitted phone number and connect it with the desired link.

  • Within the custom code section, access the form input value using JavaScript.
  • Use the create method from the Webflow CMS API to create a new item in the desired collection.
  • Set the value of the phone number field in the CMS collection item to the submitted phone number.
  • Store the desired link associated with the phone number in a separate field in the CMS collection item.
  1. Test and publish: Save your changes and test the form by submitting a phone number. Ensure that the CMS collection is correctly updated and the link is stored alongside the phone number. Publish your changes to make them live on your website.

By following these steps, you can pair a phone number submitted through a form with a specific link, like a 'Contact via WhatsApp' link, and store it in a CMS collection in Webflow. This allows you to easily manage and display the collected data on your website.

Additional Questions:

  1. How can I customize the form submission success message in Webflow?
  2. Can I use Zapier or other third-party integrations to connect Webflow form submissions to external services?
  3. How can I display the stored phone numbers and associated links from the CMS collection on my Webflow website?