Modifying Subscribe Code

Hi there, I want to see if I can modify some code (subscribe) to use a different provider. The first code is what I use for Mailchimp subscriptions and it presents well on the page. The second code is my new subscriber (Flocknote) and it looks extremely poor on the page. I am hoping there is a way to merge the two so my new subscriber looks the same cosmetically as the Mailchimp one, but using Flocknote behind the scenes.

Examples are visible in the linked page [ redundant link removed ]

Mailchimp Code
<!– Begin MailChimp Signup Form –>
<link href=”//cdn-images.mailchimp.com/embedcode/classic-10_7.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#mc_embed_signup{background:#fff; clear:left; font:12px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id=”mc_embed_signup”>
<form action=”https://olr.us19.list-manage.com/subscribe/post?u=3e7fe7f652bdacbb4f07f84af&id=8ea5cf8947&#8243; method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>
<div id=”mc_embed_signup_scroll”>
<h2>Subscribe</h2>
<div class=”indicates-required”><span class=”asterisk”>*</span> indicates required</div>
<div class=”mc-field-group”>
<label for=”mce-EMAIL”>Email Address <span class=”asterisk”>*</span>
</label>
<input type=”email” value=”” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
</div>
<div class=”mc-field-group”>
<label for=”mce-FNAME”>First Name </label>

<input type=”text” value=”” name=”FNAME” class=”” id=”mce-FNAME”>
</div>
<div class=”mc-field-group”>
<label for=”mce-LNAME”>Last Name </label>
<input type=”text” value=”” name=”LNAME” class=”” id=”mce-LNAME”>
</div>
<div id=”mce-responses” class=”clear”>
<div class=”response” id=”mce-error-response” style=”display:none”></div>
<div class=”response” id=”mce-success-response” style=”display:none”></div>
</div> <!– real people should not fill this in and expect good things – do not remove this or risk form bot signups–>
<div style=”position: absolute; left: -5000px;” aria-hidden=”true”><input type=”text” name=”b_3e7fe7f652bdacbb4f07f84af_8ea5cf8947″ tabindex=”-1″ value=””></div>
<div class=”clear”><input type=”submit” value=”Subscribe” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
</div>
</form>
</div>
<script type=’text/javascript’ src=’//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js’></script><script type=’text/javascript’>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=’EMAIL’;ftypes[0]=’email’;fnames[1]=’FNAME’;ftypes[1]=’text’;fnames[2]=’LNAME’;ftypes[2]=’text’;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!–End mc_embed_signup–>

Flocknote Code
<form method=”post” action=”https://app.flocknote.com/group/254831/addToGroupFromOutside&#8221; target=”_blank”>
<input type=”text” name=”fname” placeholder=”First Name” />
<input type=”text” name=”lname” placeholder=”Last Name” />
<input type=”email” name=”email” placeholder=”Email Address” />
<button type=”submit” value=”submit”>Sign Me Up</button>
</form>

The page I need help with: [log in to see the link]