Add form input to url

I’ve built this form on my site with the intention of having whatever a user inputs added to the end of the redirect URL. (not as an append.)

example 1:
user 1 types in ‘webflow’
hit submit
and they’re sent to ‘webflow . com/webflow’

example 2:
user 2 types in ‘nocode’
hit submit
and they’re sent to ‘webflow . com/nocode’

i’ve tried a few things with custom code, but nothing worked. (I have almost no experience with coding, so it’s what I expected.) I’d really appreciate some help.

1 Like

Hi @LouMulet,

Do you mean something like this?

<script>
let form = document.querySelector('form');
let input = document.querySelector('input');

function openLink(){
    window.open('http://www.webflow.com/' + input.value);
}

form.addEventListener('submit', openLink)

</script>

If you add this to Page Settings > Custom Code > Before tag and try submitting the form - it should open a new tab with webflow.com/{input}

2 Likes

@LouMulet sounds like you want to turn it into a URL path and not a URL parameter?

Example of a URL path:

https://example.com/url/path

Example of a URL parameter:

https://example.com?email=bob@example.com

Correct?

@ChrisDrit – thanks for creating NoCodeQuest

1 Like

Oh gosh, that was nice @pravinakajerry :star_struck: thanks for that! Hope it’s helping you!

1 Like

@ChrisDrit yes! I want to turn it to a URL path not parameter!

@LouMulet you could go the Javascript route as mentioned above.

Personally… I love to avoid the custom code whenever I can so I’ll add my perspective to this as well.

Here’s how I handle these things…

When the user hits submit, capture that form submit in Make.com via a Webhook. Take the field value the user typed in and append that to a Webhook response.

A Webhook response will redirect the users browser to any url you tell it to.

Here’s the step-by-step:

Create a new Make.com Scenario. Search for and add a “Webhook”.

Copy the url to clipboard.

Open up Webflow. Add a form. Paste the Webhook URL you just copied to your clipboard, into the Action field for you Webflow form.

Toggle the Method to POST (optional, but best approach).

Publish your Webflow site, open it up, add a value to your form and submit it.

Go back to Make and see that your Webhook successfully received the form submit.

(sorry, I’m missing a screenshot of this)

Next…

Add another module. Select Webhooks then Webhook response.

Fill out the settings as I’ve shown in the screenshot above.

Tap the “Run once” button.

Go back to your Webflow site and re-submit the form.

:boom: Bam! Worked!

I’m using the domain example.com versus webflow.io just to make this walk through more straightforward.

Next…

Open up your Make Scenario and you can verify each step very easily.


An approach like this opens the door to a lot of different (and creative) solutions that solve real world problems without ever touching code.

Here’s a link to the shared Webflow project if that helps.

:beers:

1 Like

Had to tweak the code a bit for exactly what I wanted, but this was perfect! Thanks so much man!

1 Like