Skip to main content
Contributor I
May 15, 2024
Solved

woocommerce newsletter form embed

  • May 15, 2024
  • 8 replies
  • 193 views

Hi I have WP form setup on our websites newsletter signup. 

Happy to replace this with Klaviyo code, however when I go to create an email embed I am  unable to delete the block “No, thanks” even though it isnt needed as this isnt a popup and will be scrolled past and ignored if no interest.

I am also unsure of how I can set this up so that styling and layout is picked up from current site.
In essence all I want is the form and function from Klaviyo minus styling.

 

Thanks

    This topic has been closed for replies.
    Best answer by bluesnapper

    Oooh so close @electro !

    Below in Klaviyo form editor. Just dragging blocks, adjusting padding, colours etc

    What can’t be achieved in the editor is to have box rounding on one side only.

    Another consideration is how it will appear on mobile (not good) so desktop + mobile versions

    Regards

    Andy

     

     

    8 replies

    bluesnapper
    Partner
    Champion & Partner
    May 15, 2024

    Welcome to the community @electro 

    Can you share the Klaviyo form where “no thanks” is being presented?

    Regards

    Andy

    https://bluesnapper.com - Klaviyo Champion '24 & Partner
    electroAuthor
    Contributor I
    May 15, 2024

    thanks its in the Klaviyo wizard for embeds

    bluesnapper
    Partner
    Champion & Partner
    May 15, 2024

    Thanks @electro 

    This will work unless there’s some technical issue: select the ‘No thanks’ block. A delete ‘trash can’ icon will appear top left. Select that and the block will be deleted. See below

    Let me know if that works for you

    Regards

    Andy

     

    https://bluesnapper.com - Klaviyo Champion '24 & Partner
    electroAuthor
    Contributor I
    May 15, 2024

    Thanks yes pretty straight forward you would as the first thing I tried in trying to minimise whats embeded, but no…

     

    Something went wrong

    Give it another try. If that doesn't work, check back in a few minutes.

     

    Tried a ton of times over 30 min window. Just tried again a few times and it finally deleted the block even after an error. Strange but I’ll take the win.

     

    Do I just embed it and then right click and view rendered code and apply my existing CSS to those styles?

    bluesnapper
    Partner
    Champion & Partner
    May 15, 2024

    Sorry @electro, I didn’t realise you’d already attempted to delete the block! Glad it’s now gone.

    As to styling, I’d do that within the form editor.

    If there’s some styling you can’t do in the editor, then you should be able to use right-click ‘inspect’ from your browser to look for the Klaviyo form classes and apply CSS to those in your site CSS. I’d add !important to those CSS styles to force their priority. You’d need to check that doesn’t affect any other Klaviyo forms on your site.

    It should work, but I’ve never had to do this with an embedded form.

    Hope that helps

    Andy

    https://bluesnapper.com - Klaviyo Champion '24 & Partner
    electroAuthor
    Contributor I
    May 15, 2024

    thanks, I need to try and get this

    to look like this once embeded

    currently using WPForms

    bluesnapper
    Partner
    Champion & Partner
    May 15, 2024

    Oooh so close @electro !

    Below in Klaviyo form editor. Just dragging blocks, adjusting padding, colours etc

    What can’t be achieved in the editor is to have box rounding on one side only.

    Another consideration is how it will appear on mobile (not good) so desktop + mobile versions

    Regards

    Andy

     

     

    https://bluesnapper.com - Klaviyo Champion '24 & Partner
    electroAuthor
    Contributor I
    May 15, 2024

    thanks, I can see all the style options but cant figure out how to get the submit button on the same line. have shrunk and aligned sign up button to right - but thats as best as I can get it in Klaviyo. Could you give me some pointers please? size wise have set to 100% and will need to check how that scales in its div on mobile vs desktop :-)