Solved

How to custom code Embed form so it so it loads faster and doesn't require .js script?

  • 23 April 2023
  • 4 replies
  • 836 views
F
Rank
Badge

I would like to embed the HTML (and possibly JS) code so I can have the form pre-loaded on a shopify product page.  Then I can change the css display attribute to none/block to hide or show the form.

I have tried to copy the html code that the form creates, but that doesn’t make it show.

Any suggestions to get form to preload in Shopify?

Or I can make my own form and use the API. But it seems that I can no longer directly use the API to add a subscriber to a list.

thanks!

icon

Best answer by Taylor Tarpley 28 April 2023, 23:04

View original

4 replies

Bobi N.
Rank
Userlevel 7
Badge +42

@furnaceX 

This is pretty easy and the most common mistake I’ve seen is people add the code to Shopify page but don’t turn the Klaviyo form live. So just make sure your Klaviyo form is Live and then it should show on your Shopify page. Just refresh the page 2-3 times after you set it Live in Klaviyo and it will show..

Head Email Marketing Technician at Flowium
F
Rank
Badge

That’s not my question. Perhaps I wasn’t clear enough.  For the customer facing website, the form is added AFTER the page loads by Klaviyo’s javascript code.  This causes the page to load and the form to be blank for a couple of seconds because the JS code hasn’t run yet.

I would prefer to just embed the form’s html code in my site rather than wait for Klaviyo’s JS code to get around to rendering the code.

I’m an experienced developer and coder, so I don’t need a simple solution.

Any ideas?

Taylor Tarpley
Rank
Userlevel 7
Badge +60

Hi @furnaceX, 

 

Thanks for your question and clarifying it a bit more! Yes, you actually can accomplish this, although it will require custom coding, with which you seem very comfortable as you mention! 

 

If you want a form to load faster, you’ll need to fully custom code the signup form so it doesn’t require Klaviyo .JS. In doing so it’ll essentially be seen as just another aspect of the website and load before the .js script instead of using the .js script to retrieve the code. In a similar behavior to how you would custom code a form to read as part of the website and load without ad blockers preventing its display.

 

While we cannot hep troubleshoot custom coding, I’d advise using the base code in this thread to get started! 

 

Thanks for participating in the Community!

-Taylor 

Z

Is there a way to create a custom embedded form WITHOUT Klaviyo JS or redirecting the form to a standalone page? Something like this:

<form
	method="POST"
	action="//manage.kmail-lists.com/subscriptions/subscribe"
	novalidate="novalidate"
>
	<input type="hidden" name="g" value="LIST_ID" />
	<input type="email" value="" id="k_id_email" placeholder="Your email" />
	<button type="submit">Subscribe</button>
</form>

Replacing LIST_ID with the proper list ID, of course.

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.