How to edit form javascript to accept input type=email

When I copy/paste the code from an Active Campaign form (using full embed) into my page, I want to edit the email input field so instead of using this:
<input type="text" name="email" placeholder="Type your email" required/>

I want to change the input type to email, like this:
<input type="email" name="email" placeholder="Type your email" required/>

So that it’s easier for Mobile users.

BUT, this breaks the javascript that tests for a valid email address, and none are accepted as valid.

How can the javascript be modified so that it works properly again?

1 Like

Hey @dean,

I just brought this up to our product team, and they are going to take a look at rolling this out to production. I would also encourage you to submit this feedback to them as well so that they can take a look at it - https://ideas.activecampaign.com/ideas/new

I’ll do my best to circle back and take a look at the js validation that breaks when you update the input field as well.

OK, I did that.

Thanks!

Any updates on this? I attempted to tweak some of the javascript, but it fails… I’m not really a javascript programmer, so I’m just hacking around in the dark, lol.

I’m also interested in this. “Text” is the wrong type for an email field, causing unnecessary difficulty for the users and a higher likelihood of typos in their email address. Any news?

I haven’t heard anything so far…

Hey @dean, @surfcityapps,

I did look into hacking the forms, and it is a bit more complicated than I initially thought, since the server is expecting a text field as opposed to an email one. My best recommendation would be to tap into our API if you needed something for this right away.

Otherwise just make sure that you have submitted ideas so that the product team can take a look.

I have submitted it as an idea. TBH, it’s kind of shocking that an established autoresponder company is still using the wrong field type for email opt-in forms. In our case, virtually 100% of our users are on mobile, so this is a big issue for us. Hope to see it fixed soon.

Cool, thanks for the update.

I guess I thought the main problem was updating the javascript so that it tests the email type field instead of the text type field for the email validation.

If the server is expecting a text input type, maybe the javascript could also change the input type back to text once the validation is done? And maybe then, in case javascript is off, the input type should start as text, and when the js loads, it should change it to email (for mobile) and then back again when the form is submitted. So the email field’s type would actually change from TEXT --> EMAIL --> TEXT. I’m not positive that the mobile devices would detect the change and behave appropriately, but I imagine they would.

I don’t have quite enough js ability to pull this off, but there must be a way to do it from my Google results here and here.

Anyone with those skills that can help?

I hired a programmer to recreate the form using the API, but he actually found a way to make the html form work with input type=email.

Here’s what he wrote me for instructions:

Works like a charm. @dean, I believe this is the same concept as what you were trying to do.

3 Likes

Nice! Thanks for sharing that.

1 Like

That looks awesome! I’ll check that out this weekend.

Thanks for posting - very helpful!!

Dean

1 Like

Very cool thanks @surfcityapps!

1 Like

Finally got to making these edits and they worked like a charm. Thanks so much for sharing!

1 Like

Thank you a million times… You rock @surfcityapps!