As I continue to explore the depths of WordPress and delve into learning HTML/CSS, my latest project involves embedding an email signup form on my website using Klaviyo. The basic code provided by their form creator initially had everything condensed into one line, with the addition of a Zip Code form courtesy of yours truly.
<DOCTYPE! html>
<html>
<head>
<title></title>
<style type="text/css">
.klaviyo_styling.klaviyo_condensed_embed_MMaJiG,
.klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG {
font-family: Arial;
}
.klaviyo_styling.klaviyo_condensed_embed_MMaJiG label,
.klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG label {
color:#222;
}
.klaviyo_styling.klaviyo_condensed_embed_MMaJiG input[type=text],
.klaviyo_styling.klaviyo_condensed_embed_MMaJiG input[type=email],
.klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG input[type=text],
.klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG input[type=email] {
border-radius: 3px;
}
.klaviyo_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button,
.klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button {
background-color:#F10382;
border-radius: 3px;
}
.klaviyo_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button:hover,
.klaviyo_condensed_styling.klaviyo_condensed_embed_MMaJiG .klaviyo_submit_button:hover {
background-color:#222222;
}
</style>
</head>
<body>
<form id="email_signup" class="klaviyo_condensed_styling klaviyo_condensed_float klaviyo_condensed_embed_MMaJiG" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate="novalidate" style="margin-left: 50%">
<input type="hidden" name="g" value="MMaJiG">
<div class="klaviyo_field_group">
<label for="k_id_email">Newsletter Sign Up</label>
<input type="email" value="" name="email" id="k_id_email" placeholder="Your Email"/>
<input type="number" value="" name="zip" id="k_id_zip_code" placeholder="Your Zip Code"/>
</div>
<div class="klaviyo_messages">
<div class="success_message" style="display:none;"></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>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript">
KlaviyoSubscribe.attachToForms('#email_signup', {
hide_form_on_success: true
});
</script>
</body>
My goal is to have all form fields (email and zip code) as well as the submit button appear in one neat line.
However, the current predicament has presented me with three different views: On the Klaviyo site, it looks like this (grayed out but visible):
https://i.sstatic.net/VppcT.png When loading the raw HTML, it takes this form:
https://i.sstatic.net/hcget.png
And finally, on my own website: