Skip to content

Instantly share code, notes, and snippets.

@warnakey

warnakey/custom-klaviyo-form.html

Created August 17, 2021 00:20
Show Gist options
  • Save warnakey/2eea62cd8fe99dddc248561b1376ae4d to your computer and use it in GitHub Desktop.
Save warnakey/2eea62cd8fe99dddc248561b1376ae4d to your computer and use it in GitHub Desktop.
Download ZIP
Custom Klaviyo Form With Radio Buttons
Raw
custom-klaviyo-form.html
<!-- REPLACE ALL INSTANCES OF "LIST_ID" WITH YOUR KLAVIYO LIST ID! THIS IS VITALLY IMPORTANT -->
<form id="contest_week_one" class="klaviyo_styling klaviyo_gdpr_embed_LIST_ID" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate">
<input type="hidden" name="g" value="LIST_ID">
<input type="hidden" name="$fields" value="$consent">
<input type="hidden" name="$list_fields" value="$consent">
<div class="klaviyo_field_group">
<!--<label for="k_id_first_name">First Name</label>-->
<input class="" type="text" value="" name="first_name" id="k_id_first_name" placeholder="First Name" />
<!--<label for="k_id_last_name">Last Name</label>-->
<input class="" type="text" value="" name="last_name" id="k_id_last_name" placeholder="Last Name" />
<!--<label for="k_id_email">Email</label>-->
<input class="" type="email" value="" name="email" id="k_id_email" placeholder="Your Email" />
<!-- CUSTOM OPTIONS -->
<div id="form-row">
<div id="form-component">
<div>
<label id="kl_winner__5_label">Pick Your Winner For Week 1</label>
<div role="radiogroup">
<input type="radio" id="winner__5__131" name="winner__5" value="Collin Morikawa">
<label for="winner__5__131">Collin Morikawa</label>
<input type="radio" id="winner__5__132" name="winner__5" value="Jordan Spieth">
<label for="winner__5__132">Jordan Spieth</label>
<input type="radio" id="winner__5__133" name="winner__5" value="Patrick Cantlay">
<label for="winner__5__133">Patrick Cantlay</label>
<input type="radio" id="winner__5__134" name="winner__5" value="Harris English">
<label for="winner__5__134">Harris English</label>
<input type="radio" id="winner__5__135" name="winner__5" value="Jon Rahm">
<label for="winner__5__135">Jon Rahm</label>
<input type="radio" id="winner__5__136" name="winner__5" value="Abraham Ancer">
<label for="winner__5__136">Abraham Ancer</label>
<input type="radio" id="winner__5__137" name="winner__5" value="Bryson DeChambeau">
<label for="winner__5__137">Bryson DeChambeau</label>
<input type="radio" id="winner__5__138" name="winner__5" value="Louis Oosthuizen">
<label for="winner__5__138">Louis Oosthuizen</label>
<input type="radio" id="winner__5__139" name="winner__5" value="Justin Thomas">
<label for="winner__5__139">Justin Thomas</label>
<input type="radio" id="winner__5__140" name="winner__5" value="Sam Burns">
<label for="winner__5__140">Sam Burns</label>
<input type="radio" id="winner__5__141" name="winner__5" value="Viktor Hovland">
<label for="winner__5__141">Viktor Hovland</label>
<input type="radio" id="winner__5__142" name="winner__5" value="Jason Kokrak">
<label for="winner__5__142">Jason Kokrak</label>
<input type="radio" id="winner__5__143" name="winner__5" value="Xander Schauffele">
<label for="winner__5__143">Xander Schauffele</label>
<input type="radio" id="winner__5__144" name="winner__5" value="Hideki Matsuyama">
<label for="winner__5__144">Hideki Matsuyama</label>
<input type="radio" id="winner__5__145" name="winner__5" value="Brooks Koepka">
<label for="winner__5__145">Brooks Koepka</label>
<input type="radio" id="winner__5__146" name="winner__5" value="Cameron Smith">
<label for="winner__5__146">Cameron Smith</label>
<input type="radio" id="winner__5__147" name="winner__5" value="Dustin Johnson">
<label for="winner__5__147">Dustin Johnson</label>
<input type="radio" id="winner__5__148" name="winner__5" value="Joaquin Niemann">
<label for="winner__5__148">Joaquin Niemann</label>
<input type="radio" id="winner__5__149" name="winner__5" value="Stewart Cink">
<label for="winner__5__149">Stewart Cink</label>
<input type="radio" id="winner__5__150" name="winner__5" value="Daniel Berger">
<label for="winner__5__150">Daniel Berger</label>
<input type="radio" id="winner__5__151" name="winner__5" value="Scottie Scheffler">
<label for="winner__5__151">Scottie Scheffler</label>
<input type="radio" id="winner__5__152" name="winner__5" value="Patrick Reed">
<label for="winner__5__152">Patrick Reed</label>
<input type="radio" id="winner__5__153" name="winner__5" value="Tony Finau">
<label for="winner__5__153">Tony Finau</label>
<input type="radio" id="winner__5__154" name="winner__5" value="Kevin Na">
<label for="winner__5__154">Kevin Na</label>
<input type="radio" id="winner__5__155" name="winner__5" value="Billy Horschel">
<label for="winner__5__155">Billy Horschel</label>
<input type="radio" id="winner__5__156" name="winner__5" value="Rory McIlroy">
<label for="winner__5__156">Rory McIlroy</label>
<input type="radio" id="winner__5__157" name="winner__5" value="Max Homa">
<label for="winner__5__157">Max Homa</label>
<input type="radio" id="winner__5__158" name="winner__5" value="Corey Conners">
<label for="winner__5__158">Corey Conners</label>
<input type="radio" id="winner__5__159" name="winner__5" value="Kevin Kisner">
<label for="winner__5__159">Kevin Kisner</label>
<input type="radio" id="winner__5__160" name="winner__5" value="Si Woo Kim">
<label for="winner__5__160">Si Woo Kim</label>
<input type="radio" id="winner__5__161" name="winner__5" value="Sungjae Im">
<label for="winner__5__161">Sungjae Im</label>
<input type="radio" id="winner__5__162" name="winner__5" value="Charley Hoffman">
<label for="winner__5__162">Charley Hoffman</label>
<input type="radio" id="winner__5__163" name="winner__5" value="Marc Leishman">
<label for="winner__5__163">Marc Leishman</label>
<input type="radio" id="winner__5__164" name="winner__5" value="K.H. Lee">
<label for="winner__5__164">K.H. Lee</label>
<input type="radio" id="winner__5__165" name="winner__5" value="Brian Harman">
<label for="winner__5__165">Brian Harman</label>
<input type="radio" id="winner__5__166" name="winner__5" value="Cam Davis">
<label for="winner__5__166">Cam Davis</label>
<input type="radio" id="winner__5__167" name="winner__5" value="Carlos Ortiz">
<label for="winner__5__167">Carlos Ortiz</label>
<input type="radio" id="winner__5__168" name="winner__5" value="Lucas Glover">
<label for="winner__5__168">Lucas Glover</label>
<input type="radio" id="winner__5__169" name="winner__5" value="Matt Jones">
<label for="winner__5__169">Matt Jones</label>
<input type="radio" id="winner__5__170" name="winner__5" value="Sergio Garcia">
<label for="winner__5__170">Sergio Garcia</label>
<input type="radio" id="winner__5__171" name="winner__5" value="Cameron Tringale">
<label for="winner__5__171">Cameron Tringale</label>
<input type="radio" id="winner__5__172" name="winner__5" value="Branden Grace">
<label for="winner__5__172">Branden Grace</label>
<input type="radio" id="winner__5__173" name="winner__5" value="Keegan Bradley">
<label for="winner__5__173">Keegan Bradley</label>
<input type="radio" id="winner__5__174" name="winner__5" value="Russell Henley">
<label for="winner__5__174">Russell Henley</label>
<input type="radio" id="winner__5__175" name="winner__5" value="Paul Casey">
<label for="winner__5__175">Paul Casey</label>
<input type="radio" id="winner__5__176" name="winner__5" value="Webb Simpson">
<label for="winner__5__176">Webb Simpson</label>
<input type="radio" id="winner__5__177" name="winner__5" value="Emiliano Grillo">
<label for="winner__5__177">Emiliano Grillo</label>
<input type="radio" id="winner__5__178" name="winner__5" value="Lee Westwood">
<label for="winner__5__178">Lee Westwood</label>
<input type="radio" id="winner__5__179" name="winner__5" value="Jhonattan Vegas">
<label for="winner__5__179">Jhonattan Vegas</label>
<input type="radio" id="winner__5__180" name="winner__5" value="Charl Schwartzel">
<label for="winner__5__180">Charl Schwartzel</label>
<input type="radio" id="winner__5__181" name="winner__5" value="Chris Kirk">
<label for="winner__5__181">Chris Kirk</label>
<input type="radio" id="winner__5__182" name="winner__5" value="Cameron Champ">
<label for="winner__5__182">Cameron Champ</label>
<input type="radio" id="winner__5__183" name="winner__5" value="Kevin Streelman">
<label for="winner__5__183">Kevin Streelman</label>
<input type="radio" id="winner__5__184" name="winner__5" value="Maverick McNealy">
<label for="winner__5__184">Maverick McNealy</label>
<input type="radio" id="winner__5__185" name="winner__5" value="Ryan Palmer">
<label for="winner__5__185">Ryan Palmer</label>
<input type="radio" id="winner__5__186" name="winner__5" value="Hudson Swafford">
<label for="winner__5__186">Hudson Swafford</label>
<input type="radio" id="winner__5__187" name="winner__5" value="Patton Kizzire">
<label for="winner__5__187">Patton Kizzire</label>
<input type="radio" id="winner__5__188" name="winner__5" value="Phil Mickelson">
<label for="winner__5__188">Phil Mickelson</label>
<input type="radio" id="winner__5__189" name="winner__5" value="Matthew Wolff">
<label for="winner__5__189">Matthew Wolff</label>
<input type="radio" id="winner__5__190" name="winner__5" value="Matt Fitzpatrick">
<label for="winner__5__190">Matt Fitzpatrick</label>
<input type="radio" id="winner__5__191" name="winner__5" value="Aaron Wise">
<label for="winner__5__191">Aaron Wise</label>
<input type="radio" id="winner__5__192" name="winner__5" value="Sebastián Muñoz">
<label for="winner__5__192">Sebastián Muñoz</label>
<input type="radio" id="winner__5__193" name="winner__5" value="Tyrrell Hatton">
<label for="winner__5__193">Tyrrell Hatton</label>
<input type="radio" id="winner__5__194" name="winner__5" value="Talor Gooch">
<label for="winner__5__194">Talor Gooch</label>
<input type="radio" id="winner__5__195" name="winner__5" value="Martin Laird">
<label for="winner__5__195">Martin Laird</label>
<input type="radio" id="winner__5__196" name="winner__5" value="Shane Lowry">
<label for="winner__5__196">Shane Lowry</label>
<input type="radio" id="winner__5__197" name="winner__5" value="Mackenzie Hughes">
<label for="winner__5__197">Mackenzie Hughes</label>
<input type="radio" id="winner__5__198" name="winner__5" value="Robert Streb">
<label for="winner__5__198">Robert Streb</label>
<input type="radio" id="winner__5__199" name="winner__5" value="Troy Merritt">
<label for="winner__5__199">Troy Merritt</label>
<input type="radio" id="winner__5__200" name="winner__5" value="J.T. Poston">
<label for="winner__5__200">J.T. Poston</label>
<input type="radio" id="winner__5__201" name="winner__5" value="Bubba Watson">
<label for="winner__5__201">Bubba Watson</label>
<input type="radio" id="winner__5__202" name="winner__5" value="Harold Varner III">
<label for="winner__5__202">Harold Varner III</label>
<input type="radio" id="winner__5__203" name="winner__5" value="Seamus Power">
<label for="winner__5__203">Seamus Power</label>
<input type="radio" id="winner__5__204" name="winner__5" value="Brandon Hagy">
<label for="winner__5__204">Brandon Hagy</label>
<input type="radio" id="winner__5__205" name="winner__5" value="Andrew Putnam">
<label for="winner__5__205">Andrew Putnam</label>
<input type="radio" id="winner__5__206" name="winner__5" value="Erik van Rooyen">
<label for="winner__5__206">Erik van Rooyen</label>
<input type="radio" id="winner__5__207" name="winner__5" value="Joel Dahmen">
<label for="winner__5__207">Joel Dahmen</label>
<input type="radio" id="winner__5__208" name="winner__5" value="Adam Long">
<label for="winner__5__208">Adam Long</label>
<input type="radio" id="winner__5__209" name="winner__5" value="Ian Poulter">
<label for="winner__5__209">Ian Poulter</label>
<input type="radio" id="winner__5__210" name="winner__5" value="Harry Higgs">
<label for="winner__5__210">Harry Higgs</label>
<input type="radio" id="winner__5__211" name="winner__5" value="Wyndham Clark">
<label for="winner__5__211">Wyndham Clark</label>
<input type="radio" id="winner__5__212" name="winner__5" value="Adam Scott">
<label for="winner__5__212">Adam Scott</label>
<input type="radio" id="winner__5__213" name="winner__5" value="Peter Malnati">
<label for="winner__5__213">Peter Malnati</label>
<input type="radio" id="winner__5__214" name="winner__5" value="Lanto Griffin">
<label for="winner__5__214">Lanto Griffin</label>
<input type="radio" id="winner__5__215" name="winner__5" value="Brian Stuard">
<label for="winner__5__215">Brian Stuard</label>
<input type="radio" id="winner__5__216" name="winner__5" value="Doug Ghim">
<label for="winner__5__216">Doug Ghim</label>
<input type="radio" id="winner__5__217" name="winner__5" value="Henrik Norlander">
<label for="winner__5__217">Henrik Norlander</label>
<input type="radio" id="winner__5__218" name="winner__5" value="Doc Redman">
<label for="winner__5__218">Doc Redman</label>
<input type="radio" id="winner__5__219" name="winner__5" value="Brian Gay">
<label for="winner__5__219">Brian Gay</label>
<input type="radio" id="winner__5__220" name="winner__5" value="Kramer Hickok">
<label for="winner__5__220">Kramer Hickok</label>
<input type="radio" id="winner__5__221" name="winner__5" value="Alex Noren">
<label for="winner__5__221">Alex Noren</label>
<input type="radio" id="winner__5__222" name="winner__5" value="Roger Sloan">
<label for="winner__5__222">Roger Sloan</label>
<input type="radio" id="winner__5__223" name="winner__5" value="Hank Lebioda">
<label for="winner__5__223">Hank Lebioda</label>
<input type="radio" id="winner__5__224" name="winner__5" value="Tyler McCumber">
<label for="winner__5__224">Tyler McCumber</label>
<input type="radio" id="winner__5__225" name="winner__5" value="Brendon Todd">
<label for="winner__5__225">Brendon Todd</label>
<input type="radio" id="winner__5__226" name="winner__5" value="Adam Hadwin">
<label for="winner__5__226">Adam Hadwin</label>
<input type="radio" id="winner__5__227" name="winner__5" value="Denny McCarthy">
<label for="winner__5__227">Denny McCarthy</label>
<input type="radio" id="winner__5__228" name="winner__5" value="Brendan Steele">
<label for="winner__5__228">Brendan Steele</label>
<input type="radio" id="winner__5__229" name="winner__5" value="Sepp Straka">
<label for="winner__5__229">Sepp Straka</label>
<input type="radio" id="winner__5__230" name="winner__5" value="Brandt Snedeker">
<label for="winner__5__230">Brandt Snedeker</label>
<input type="radio" id="winner__5__231" name="winner__5" value="Keith Mitchell">
<label for="winner__5__231">Keith Mitchell</label>
<input type="radio" id="winner__5__232" name="winner__5" value="Luke List">
<label for="winner__5__232">Luke List</label>
<input type="radio" id="winner__5__233" name="winner__5" value="Adam Schenk">
<label for="winner__5__233">Adam Schenk</label>
<input type="radio" id="winner__5__234" name="winner__5" value="Garrick Higgo">
<label for="winner__5__234">Garrick Higgo</label>
<input type="radio" id="winner__5__235" name="winner__5" value="James Hahn">
<label for="winner__5__235">James Hahn</label>
<input type="radio" id="winner__5__236" name="winner__5" value="Russell Knox">
<label for="winner__5__236">Russell Knox</label>
<input type="radio" id="winner__5__237" name="winner__5" value="Matt Wallace">
<label for="winner__5__237">Matt Wallace</label>
<input type="radio" id="winner__5__238" name="winner__5" value="Tom Hoge">
<label for="winner__5__238">Tom Hoge</label>
<input type="radio" id="winner__5__239" name="winner__5" value="Sam Ryder">
<label for="winner__5__239">Sam Ryder</label>
<input type="radio" id="winner__5__240" name="winner__5" value="Jason Day">
<label for="winner__5__240">Jason Day</label>
<input type="radio" id="winner__5__241" name="winner__5" value="Pat Perez">
<label for="winner__5__241">Pat Perez</label>
<input type="radio" id="winner__5__242" name="winner__5" value="Matthew NeSmith">
<label for="winner__5__242">Matthew NeSmith</label>
<input type="radio" id="winner__5__243" name="winner__5" value="Zach Johnson">
<label for="winner__5__243">Zach Johnson</label>
<input type="radio" id="winner__5__244" name="winner__5" value="Gary Woodland">
<label for="winner__5__244">Gary Woodland</label>
<input type="radio" id="winner__5__245" name="winner__5" value="Kyle Stanley">
<label for="winner__5__245">Kyle Stanley</label>
<input type="radio" id="winner__5__246" name="winner__5" value="Scott Piercy">
<label for="winner__5__246">Scott Piercy</label>
<input type="radio" id="winner__5__247" name="winner__5" value="Richy Werenski">
<label for="winner__5__247">Richy Werenski</label>
<input type="radio" id="winner__5__248" name="winner__5" value="C.T. Pan">
<label for="winner__5__248">C.T. Pan</label>
<input type="radio" id="winner__5__249" name="winner__5" value="Chez Reavie">
<label for="winner__5__249">Chez Reavie</label>
<input type="radio" id="winner__5__250" name="winner__5" value="Matt Kuchar">
<label for="winner__5__250">Matt Kuchar</label>
<input type="radio" id="winner__5__251" name="winner__5" value="Anirban Lahiri">
<label for="winner__5__251">Anirban Lahiri</label>
<input type="radio" id="winner__5__252" name="winner__5" value="Dylan Frittelli">
<label for="winner__5__252">Dylan Frittelli</label>
<input type="radio" id="winner__5__253" name="winner__5" value="Brice Garnett">
<label for="winner__5__253">Brice Garnett</label>
<input type="radio" id="winner__5__254" name="winner__5" value="Scott Stallings">
<label for="winner__5__254">Scott Stallings</label>
<input type="radio" id="winner__5__255" name="winner__5" value="Chesson Hadley">
<label for="winner__5__255">Chesson Hadley</label>
</div>
</div>
</div>
</div>
<!-- END OF CUSTOM OPTIONS -->
<div class="klaviyo_field_group klaviyo_form_actions">
<!--<div class="klaviyo_helptext"> How would you like to hear from us? (please select at least one option)</div>
<input type="checkbox" name="$consent" id="consent-email" value="email">
<label for="consent-email">Email</label><br>
<input type="checkbox" name="$consent" id="consent-web" value="web">
<label for="consent-web">Online advertisements</label>-->
<div class="klaviyo_helptext klaviyo_gdpr_text">
<p>By submitting this form, you agree to receive emails messages from COMPANY. <a href="" class="privacylink">Click here to view our Privacy Policy</a>.</p>
</div>
</div>
</div>
<div class="klaviyo_messages">
<div class="success_message" style="display:none;">
<h2>Thank You For Entering!</h2>
<p class="thank_you">Your vote has been cast and you have been entered to win.</p>
</div>
<div class="error_message" style="display:none;"></div>
</div>
<div class="klaviyo_form_actions">
<button type="submit" class="klaviyo_submit_button">Subscribe</button>
</div>
</form>
<style type="text/css">
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_helptext {
padding-top: 10px;
padding-bottom: 10px;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_gdpr_text {
font-size: 14px;
line-height: 1.3;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID label,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID label {
color: #222;
}
.klaviyo_styling .klaviyo_field_group .klaviyo_form_actions {
text-align: left;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=checkbox]+label,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=checkbox]+label {
display: inline;
font-weight: normal;
padding-left: 5px;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=text],
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID input[type=email],
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=text],
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID input[type=email] {
border-radius: 2px;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button {
background-color: rgba(184, 25, 55, 1);
border-radius: 2px;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button:hover {
background-color: rgba(184, 25, 55, 1);
}
form#contest_week_one {
width: 100%;
max-width: 100%;
}
label#kl_winner__5_label {
width: 100%;
}
input[type="radio"] {
width: 20px!important;
opacity: 1!important;
float: left!important;
position: relative!important;
margin-bottom: 0;
}
div#form-component div div label {
float: left!important;
width: calc(100% - 20px);
position: relative!important;
}
.klaviyo_helptext.klaviyo_gdpr_text {
float: left!important;
width: 100%;
font-style: italic;
margin-top: 20px;
margin-bottom: 20px;
}
.klaviyo_condensed_styling .klaviyo_form_actions, .klaviyo_styling .klaviyo_form_actions {
float: left;
width: 100%;
text-align: left;
}
.klaviyo_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button,
.klaviyo_condensed_styling.klaviyo_gdpr_embed_LIST_ID .klaviyo_submit_button {
background: rgba(184, 25, 55, 1);
border-radius: 2px;
}
</style>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
/* Javascript to add checked attribute to selected radio button and grab the value of it */
if (document.querySelector('input[name="winner__5"]')) {
document.querySelectorAll('input[name="winner__5"]').forEach((elem) => {
elem.addEventListener("change", function(event) {
var radios = document.getElementsByTagName('input');
for (i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio') {
radios[i].removeAttribute("checked");
}
}
var radioValue = event.target.value;
elem.setAttribute("checked", "checked");
console.log(radioValue);
KlaviyoSubscribe.attachToForms('#contest_week_one', {
hide_form_on_success: true,
extra_properties: {
$source: 'https://example.com/golf-contest/',
$method_type: "Klaviyo Form",
$method_id: 'embed',
$consent_version: 'Embed default text',
$winner: radioValue
},
hide_form_on_success: true,
custom_success_message: true
});
});
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment