Hey all!
I’m looking for help with form input patterns. I’ve been reading up on Regular Expressions and it’s so complicated, I thought I’d come here to just ask straight out:
I’m needing to limit a web address input field on my site so that entries must always include https://
Any help would be greatly appreciated! And any resources on patterns that are very basic or for beginners would help as well. TIA 
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
So one way to start off would be to pre-fill the field with http:// so the user will just be able to type the rest of the domain…
To do this, add the field with an ID of name (or whatever you like).
In the page settings Footer code, add this:
<script>
document.getElementById('name').value = "http://"
// or whatever ID you used
As for the regex, leave it with me and I’ll see if I can add it to the code for you so they can’t submit unless it includes http:// in the form. Combining both things will make it so:
Oh my gosh thank you so much! This is so helpful!
For interest sake, it’s for this site:
We’ve added code to have the form submit directly into the CMS, but need to have http:// included for the link to work properly apparently.
I’ve just done this, let me know if it’s what you’re after? It doesn’t use regex, so they could still theeoretically add text before the http:// but the way it’s setup, it will be slim chance that will happen.
Here’s the live site with it working:
https://field-validator.webflow.io/
Here’s the code to make it work:
<script>
const field = document.getElementById('field')
const form = document.getElementById('form')
const button = document.getElementById('button')
field.value = "http://"
field.addEventListener('input', function() {
if (field.value.includes("http://")) {
message.style.display = "none"
button.style.backgroundColor = "green"
button.style.color = "white"
button.disabled = false
} else {
message.style.display = "block"
message.innerHTML = "URL must begin with http://"
button.style.backgroundColor = "gray"
button.disabled = true
button.style.color = "darkgray"
}
})
</script>
Don’t forget you will need the script tags
Let me know how you get on.
FYI this is not official Webflow support, just helping out, let me know how it goes.
This will work! Thank you so much Mark, this is a huge help. Someone could technically edit but this is a great add for the site, thanks again!
You’re very welcome 
Just FYI they CAN edit this, but if the http:// is not included then it’s not possible to submit the form, as the submit button is disabled, which acts as a fail safe for you.
The only way they can break it, is to type:
Www.http://webflow.com or something like that.
Right okay, well let’s hope people use some common sense!
I do have one more question actually, if I have multiple fields that require this on one page, is that an easy addition? I tried including the script multiple times but it only worked for the first one.
Hmmmm I can look into that, but I think I may have a much simpler solution. (I like these kind of challenges 
)
So I understand, you just need the URL to have http:// when it’s sent through the form?
I’m assuming the form submission is being parsed by something like Zapier? If that’s the case, we could just add on the http:// at the point of the form being received, so when its parsed, then the http:// will be there.
Would that be suitable?
Haha I’m the same! This one just happens to be a bit outside my skill suit so very grateful to you!
Unfortunately we aren’t using Zapier, we had to add in a custom developed portion to connect the form to the CMS because of the date/time picker. Because one isn’t available natively within Webflow forms we had someone create one and then do the connection for us.
Your site is for a good cause, I’m happy to help!
Well if you’re getting the form input from the form submission even without Zapier, then I think the simple solution here is to add a static http:// to the form, so that when it’s received it will always be prepended.
So the user types www.webflow.com in the field, and you receive http://www.webflow.com everytime. This would work on multiple fields too.
I also figured out the regex if you wanted to use that instead to make sure the http:// is at the beginning of the input. You made my brain work this morning!
Let me know which way, and I’ll be happy to share each solution
Because I’m scared to break whatever code the developer used for our forms, maybe the regex is the safer bet! Also taking into account my limited coding knowledge hahaha
Haha, I think I’m going to do a walkthrough for both for you. I’ll record a video over the weekend and you can see which is more suitable
I really think the simpler way will actually cause less chance of breakage, and you wouldn’t need a developer to fix it.