revolunet / react-mailchimp-subscribe

React subscribe form for Mailchimp.
https://revolunet.github.io/react-mailchimp-subscribe/
244 stars 49 forks source link

How do I style the form component #46

Open tobitech opened 4 years ago

tobitech commented 4 years ago

Please help. I've tried all I could to style the MailChimpSubscribe component but nothing is working. I've used className to add a css class <MailChimpSubscribe className="footer-form" />

I've also used style attribute <MailChimpSubscribe style={{ color: "red" }} />

none of these seem to be working.

webdiego commented 3 years ago

const CustomForm = () => ( <MailchimpSubscribe url={url} render={({ subscribe, status, message }) => (

Use this div as reference, and add your style

  <div>
    <SimpleForm onSubmitted={formData => subscribe(formData)} />
    {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
    {status === "error" && <div style={{ color: "red" }} dangerouslySetInnerHTML={{__html: message}}/>}
    {status === "success" && <div style={{ color: "green" }}>Subscribed !</div>}
  </div>
)}

/>

Example

div+input { some style }

If you are using styled components ....

subscribe(formData)} /> {status === "sending" &&
sending...
} {status === "error" &&
} {status === "success" &&
Subscribed !
}

....

const FormStyle= styled.div` some style

input{ some style }

`