Style single mailchimp input for wordpress website
Budget: $15 – $25 AUD
Hi. This is a simple job to style a single Mailchimp input and button inside a wordpress template.
I need a simple one-input Mailchimp form integrated with my wordpress website. This intake form occurs in a header menu block element that appears as seen here (https://strangeatlas.co) when you click the top left menu element. This same mailchimp code (as listed below) sometimes also appears on the same page inside the page itself, so please keep this in mind that the same function will occasionally appear twice on the page and each of them must work.
Mailchimp code (unstyled)
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:16px Helvetica,Arial,sans-serif; width:100%;}
/* 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://strangeatlas.us7.list-manage.com/subscribe/post?u=6636b905e7b46dada5e2860a7&id=960214f8b4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_6636b905e7b46dada5e2860a7_960214f8b4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I want the line and the button to look exactly as per the example linked above.
Website information:
I use a wordpress website. The page-builder is called "flothemes" and all of my content blocks are built inside "Flexblock", which exist as gutenberg content blocks.
This piece of content lives inside a single gutenberg header block that is displayed across the site.
The task:
1: Make the input field styled to "OVERLINE 2" in my existing font stylekit
2: style the button as per the example on the live site (or just using my standard button styling so that it is consistent which would be even better)
3: ensure it scales with browser resize
Please note the following project requirements for this to be considered complete:
1 - Input and button must look *exactly* as per the attached example
2 - Input and button *must* scale dynamically with the rest of the content as you can already see at strangeatlas.co - this includes the button square, button text, and underline (you could achieve this by just having a clickable text field and ill leave the underline in there manually
I need a simple one-input Mailchimp form integrated with my wordpress website. This intake form occurs in a header menu block element that appears as seen here (https://strangeatlas.co) when you click the top left menu element. This same mailchimp code (as listed below) sometimes also appears on the same page inside the page itself, so please keep this in mind that the same function will occasionally appear twice on the page and each of them must work.
Mailchimp code (unstyled)
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:16px Helvetica,Arial,sans-serif; width:100%;}
/* 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://strangeatlas.us7.list-manage.com/subscribe/post?u=6636b905e7b46dada5e2860a7&id=960214f8b4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- 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_6636b905e7b46dada5e2860a7_960214f8b4" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I want the line and the button to look exactly as per the example linked above.
Website information:
I use a wordpress website. The page-builder is called "flothemes" and all of my content blocks are built inside "Flexblock", which exist as gutenberg content blocks.
This piece of content lives inside a single gutenberg header block that is displayed across the site.
The task:
1: Make the input field styled to "OVERLINE 2" in my existing font stylekit
2: style the button as per the example on the live site (or just using my standard button styling so that it is consistent which would be even better)
3: ensure it scales with browser resize
Please note the following project requirements for this to be considered complete:
1 - Input and button must look *exactly* as per the attached example
2 - Input and button *must* scale dynamically with the rest of the content as you can already see at strangeatlas.co - this includes the button square, button text, and underline (you could achieve this by just having a clickable text field and ill leave the underline in there manually