Useful code hacks for Webflow Forms

The power of code in your forms

There’s pretty much nothing that webflow can’t do but for that little bit that it can’t, it has the code embed element which gives the user a vast amount of power especially when it’s attached to a form element. 

Code embeds and the form elements 

Forms have immense power on your website, they are the main way your user can interact with your site so making these forms as easy to use and to complete is paramount. To minimize the information needed on a certain you could use a code embed element with a cheeky little code snippet that will send extra hidden information that will help the site owner and minimize the time for the user. 

To use this you will have a form and with this form and place, a code embed inside. Within this, you have to use code and before you say “but this is the nocoded newsletter” and I know, this is code but unfortunately it is useful from time to time. 

Why do you need this code in your life? This code gives you extra information in your form e.g. the page it is sent on. This is especially useful if the code is on a CMS page as you can use CMS fields in the embed element.  

How to write the code? The code will look like this below. So you will have to use the input type as hidden, the name will be the name of the information you send through e.g. email address and the value will be the information on the cms page you need which in this example would be the email address. This data can then be used to assess what page it was created on in your CMS collection. 

The code: 

<input type="hidden"name= "Email Address" value="Field Item Info goes here ">

Code embed and Memberstack! Now where this code embed really comes into its own. This is when you use the information you have saved in Memberstack concerning the logged in user and send that information along with your form. 

Why do you need this code in your life?  This code gives your form real power. It can allow your user to only need to send the key information and not have to keep inputting their data with every form. It allows the creation of forms like this.

With both these code snippets, this allows me as the site manager to obtain the sender and the senders webflow ID (if this is saved in memberstack which I highly recommend that you do), the recipient’s details (because it’s there page it’s being sent from) and of course the message to be sent. 

The code: 

<input type="hidden"data-name="Webflow Sender ID" ms-data="webflow-id" >

Other Blogs