#93 - Force Valid URLs in Form Input v0.1

Automatically convert anything in your input to a valid URL.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo


<!-- 💙 MEMBERSCRIPT #93 v0.1 💙 FORCE INPUT TO BE A VALID URL -->
<script>
// Get all form fields with attribute ms-code-convert="link"
const formFields = document.querySelectorAll('input[ms-code-convert="link"], textarea[ms-code-convert="link"]');

// Add event listener to each form field
formFields.forEach((field) => {
  field.addEventListener('input', convertToLink);
});

// Function to convert input to a link
function convertToLink(event) {
  const input = event.target;

  // Get user input
  const userInput = input.value.trim();

  // Check if input starts with http:// or https://
  if (userInput.startsWith('http://') || userInput.startsWith('https://')) {
    input.value = userInput; // No conversion needed for valid links
  } else {
    input.value = `http://${userInput}`; // Prepend http:// for simplicity
  }
}
</script>

Description

Attribute

No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

Download File

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to Validate Links in Webflow Form Inputs

Memberscripts needed

https://www.memberstack.com/scripts/93-force-valid-urls-in-form-input

Tutorial

Cloneable

Why/When would need to Validate Links in Webflow Form Inputs?

Prevent issues with make.com scenarios, API calls, and so on.

This guide will show you how to easily and quickly force fields to turn their inputs into valid links.

What this essentially means is that the input field will add http:// before whatever is typed into it if it (or https://) is not already present.

This can help prevent possible issues with make.com scenarios, API calls, and so on.

Validating links in Webflow form inputs

To validate links in Webflow form inputs, we’re going to use MemberScript #93 – Force Valid URLs in Form Input. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

Once you’ve got your form and input fields set up, the only thing you’ll need to do is select the input field that you want to force its input into a URL and add the following attribute to it:

ms-code-convert=”link”

Making it work

Now that you’ve added the attribute to your input field, all you need to do is add the MemberScript #93 custom code to your page, before the closing body tag.

Conclusion

That’s everything, you can now go ahead and test the input field on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you convert whatever’s written in an input field into a valid URL.

Take me to the Scripts

Read full documentation

Button Text

Something not working as expected?

#93 - Force Valid URLs in Form Input v0.1

Need help with this MemberScript?

Creating the Make.com Scenario

How to Validate Links in Webflow Form Inputs

Memberscripts needed

Tutorial

Cloneable

Why/When would need to Validate Links in Webflow Form Inputs?

Validating links in Webflow form inputs

Setting it up

Making it work

Conclusion

Take me to the Scripts

Try Memberstack for free

Product

Language

Customers

Company

Resources