Hey everyone- I’m using an email provider which is kind of lowkey and not known called EmailOctopus and want to have an in-line horizontal sign up form with my newsletter. But to get it to look good i need to use custom css to change it-
The code that EmailOctopus give looks like this:
/*
<link rel="stylesheet"
href="https://emailoctopus.com/bundles/emailoctopuslist/css/1.6/form.css"
>
<div class="emailoctopus-form-wrapper emailoctopus-form-unstyled null"
style="font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; color: rgb(26, 26, 26);"
>
<p class="emailoctopus-success-message">
</p>
<p class="emailoctopus-error-message">
</p>
<form action="https://emailoctopus.com/lists/b6cee513-a114-11ea-a3d0-06b4694bee2a/members/embedded/1.3s/add"
method="post"
data-message-success="Thanks for subscribing!"
data-message-missing-email-address="Your email address is required."
data-message-invalid-email-address="Your email address looks incorrect, please try again."
data-message-bot-submission-error="This doesn't look like a human submission."
data-message-consent-required="Please check the checkbox to indicate your consent."
data-message-invalid-parameters-error="This form has missing or invalid fields."
data-message-unknown-error="Sorry, an unknown error has occurred. Please try again later."
class="emailoctopus-form"
data-sitekey="6LdYsmsUAAAAAPXVTt-ovRsPIJ_IVhvYBBhGvRV6"
>
<div class="emailoctopus-form-row">
<label for="field_0">
</label>
<input id="field_0"
name="field_0"
type="email"
placeholder="Your Email"
required="required"
>
</div>
<div aria-hidden="true"
class="emailoctopus-form-row-hp"
>
<input type="text"
name="hpc4b27b6e-eb38-11e9-be00-06b4694bee2a"
tabindex="-1"
autocomplete="nope"
>
</div>
<div class="emailoctopus-form-row-subscribe">
<input type="hidden"
name="successRedirectUrl"
>
<button type="submit"
style="background-color: rgb(224, 224, 224); color: rgb(0, 0, 0); font-family: inherit;"
>
Send me courses
</button>
</div>
</form>
</div>
<script src="https://emailoctopus.com/bundles/emailoctopuslist/js/1.6/form-recaptcha.js">
</script>
<script src="https://emailoctopus.com/bundles/emailoctopuslist/js/1.6/form-embed.js">
</script>
*/
And when that comes out It currently looks like this –
I am trying to get it to look exactly like this:
How do I make it look like the second image with CSS? And how do I make sure the Css connects to to embedded HTml in my webflow site?
Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)