We have two places to sign up for the blog Newsletter.
1) The "Subscribe" button in the header, which displays the subscription form in a modal
2) The area beneath the content of a single post, which displays the subscription form right on the page.
The following should be done for both instances of the form:
1) Add ::selection styling for text box so user can tell when their email address is highlighting
2) Prevent submission of empty form
3) Add basic email validation.
4) Add error handling and display a generic message for most cases. "Oops! Something went wrong. Please refresh and try subscribing again."
5) Make sure styling is handled for both the full-screen modal variation and footer variation
Notes:
Using input type="email" might allow us to solve for items 2 and 3. Ghost should (hopefully) doing server side validation of data sent on their side. If something isn't quite right with the submission and the we get a response error then let's display the generic error message.
We have two places to sign up for the blog Newsletter. 1) The "Subscribe" button in the header, which displays the subscription form in a modal 2) The area beneath the content of a single post, which displays the subscription form right on the page.
The following should be done for both instances of the form: 1) Add ::selection styling for text box so user can tell when their email address is highlighting 2) Prevent submission of empty form 3) Add basic email validation. 4) Add error handling and display a generic message for most cases. "Oops! Something went wrong. Please refresh and try subscribing again." 5) Make sure styling is handled for both the full-screen modal variation and footer variation
Notes:
input type="email"might allow us to solve for items 2 and 3. Ghost should (hopefully) doing server side validation of data sent on their side. If something isn't quite right with the submission and the we get a response error then let's display the generic error message.