Form embedding and styling

styling and embedding forms most shopify merchants should use the sparklayer form block in the shopify theme editor the block lets you select a form and configure common layout and styling options from the sidebar, without adding code manually manual embeds are available for merchants or developers who need more control shopify form block to add a form in shopify open the shopify theme editor add the sparklayer form block to the page or section select the form you want to display adjust styling in the block sidebar save your changes manual embed add the sparklayer form script to your page \<script src="https //cdn sparklayer io/spark form v1 js">\</script> then place the form where you want it to appear \<spark form form id="your form id" site id="your site id"> \</spark form> manual embed attributes attribute required description form id yes the id of the form to display site id yes your sparklayer site id site env no use test to load from the test environment defaults to live entry id no resume an existing form entry entry key no authentication key for an existing entry hide title no set to true to hide the form title preview version id no preview a specific form version styling manual embeds by default, embedded forms use the same sparklayer core css variables as the rest of sparklayer if the sparklayer core script already defines spark variables on your storefront, the form will automatically use them you only need spark form variables when you want to override styles for forms specifically style priority is \ spark form form specific variables spark global sparklayer variables sparklayer default styles example spark form { \ spark form max width 680px; \ spark form button color #000000; \ spark form button raised background #000000; \ spark form button raised color #ffffff; \ spark form link color #000000; \ spark form border radius default 4px; } available css variables form variable falls back to controls spark form max width none maximum form width spark form button width none button width, for example 100% spark form font default spark font default main font family spark form header font spark header font heading font family spark form button font family spark button font family button font family spark form font default size small spark font default size small base font size on smaller screens spark form font default size spark font default size base font size spark form input font size spark input font size input font size spark form h1 fontsize spark h1 fontsize h1 size spark form h2 fontsize spark h2 fontsize h2 size spark form h3 fontsize spark h3 fontsize h3 size spark form h4 fontsize spark h4 fontsize h4 size spark form h5 fontsize spark h5 fontsize h5 size spark form h6 fontsize spark h6 fontsize h6 size spark form button small font size spark button small font size small button font size spark form button font size spark button font size default button font size spark form button large font size spark button large font size large button font size spark form font weight default spark font weight default default font weight spark form font weight medium spark font weight medium medium font weight spark form font weight heavy spark font weight heavy heavy font weight spark form header font weight spark header font weight heading font weight spark form button font weight spark button font weight button font weight spark form header text transform spark header text transform heading text transform spark form header letter spacing spark header letter spacing heading letter spacing spark form button text transform spark button text transform button text transform spark form button text letter spacing spark button text letter spacing button letter spacing spark form border radius default spark border radius default default border radius spark form border radius button spark border radius button button border radius spark form input padding spark input padding input padding spark form button padding spark button padding button padding spark form product card button padding spark product card button padding product card button padding spark form lightest color spark lightest color form background and light surfaces spark form default body color spark default body color body text color spark form header color spark header color heading color spark form primary color spark primary color primary color spark form primary color light spark primary color light light primary color spark form primary color dark spark primary color dark dark primary color spark form secondary color spark secondary color secondary color spark form link color spark link color link color spark form button color spark button color button brand color spark form button raised color spark button raised color primary button text color spark form button raised background spark button raised background primary button background spark form button raised hover background spark button raised hover background primary button hover background spark form button raised border color spark button raised border color primary button border color spark form button disabled color spark button disabled color disabled button text color spark form button large color spark button large color large button color spark form input background spark input background input background spark form input border color spark input border color input border color spark form input text color spark input text color input text color spark form input focus border color spark input focus border color focused input border color spark form table header background color spark table header background color table header background spark form success color spark success color success state color spark form error color spark error color error state color spark form warn color spark warn color warning state color spark form info color spark info color info state color spark form agent color spark agent color agent state color spark form company users color spark company users color company users state color