Update contact form.

assets/scripts/routes/home.js

@@ -1,6 +1,25 @@
 export default {
 	init() {
 		// JavaScript to be fired on the home page
+
+		// Props to Dave Rupert: https://daverupert.com/2017/11/happier-html5-forms/
+		const inputs = document.querySelectorAll( 'input, textarea' );
+
+		inputs.forEach( input => {
+			input.addEventListener(
+				'invalid',
+				event => {
+					input.classList.add( 'error' );
+				},
+				false
+			);
+			input.addEventListener( 'focus', function () {
+				input.classList.remove( 'error' );
+			} );
+			input.addEventListener( 'blur', function () {
+				input.checkValidity();
+			} );
+		} );
 	},
 	finalize() {},
 };

assets/styles/aldine.scss

@@ -11,7 +11,7 @@
 /** Import theme styles */
 // @import "common/global";
 // @import "components/comments";
-// @import "components/forms";
+@import "components/forms";
 // @import "components/grid";
 // @import "components/wp-classes";
 @import "layouts/header";

assets/styles/components/_forms.scss

@@ -15,7 +15,7 @@ textarea {
   border-top: 0;
   border-right: 0;
   border-left: 0;
-  border-bottom: solid 2px $black;
+  border-bottom: solid 2px var(--black, #000);
   padding: 0 0 1em;
   font-size: 0.875rem;
   font-weight: 600;
@@ -26,7 +26,7 @@ textarea {
 
   &:focus {
     outline: none;
-    border-bottom: solid 2px var(--accent, $brand-accent);
+    border-bottom: solid 2px var(--accent);
   }
 }
 
@@ -38,7 +38,7 @@ input[type="submit"] {
   width: rem(354);
 
   ::placeholder {
-    color: $black;
+    color: #000;
   }
 
   &__notice {
@@ -48,11 +48,11 @@ input[type="submit"] {
     font-family: $font-family-sans-serif;
 
     &--error {
-      color: $dark-red;
+      color: #c00;
     }
 
     &--success {
-      color: $dark-green;
+      color: #070;
     }
   }
 
@@ -62,15 +62,36 @@ input[type="submit"] {
     align-items: center;
     justify-content: center;
     width: 100%;
+    position: relative;
+    margin-bottom: 2rem;
 
-    &--error > input[type="text"],
+    label {
-    &--error > input[type="email"],
+      position: absolute;
-    &--error > textarea {
+      left: 0;
-      border-bottom: solid 2px $dark-red;
+      top: 0;
+      transition: 0.2s;
     }
 
-    &--error > ::placeholder {
+    input,
-      color: $dark-red;
+    textarea {
+      z-index: 1;
+
+      &:focus,
+      &:valid,
+      &.error {
+        + label {
+          top: 100%;
+          margin-top: -1.25rem;
+          font-size: 0.75rem;
+        }
+      }
+      &.error {
+        border-bottom: solid 2px #c00;
+
+        + label {
+          color: #c00;
+        }
+      }
     }
 
     &:last-child {

dist/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=af09fa97e83d238ec459",
+    "/scripts/aldine.js": "/scripts/aldine.js",
-    "/styles/aldine.css": "/styles/aldine.css?id=7a9bb5b10bf74cd55752",
+    "/styles/aldine.css": "/styles/aldine.css",
-    "/scripts/customizer.js": "/scripts/customizer.js?id=f1f1f4225cba4c1b35f2"
+    "/scripts/customizer.js": "/scripts/customizer.js"
 }

footer.php

@@ -20,11 +20,12 @@ $pb_network_contact_form = get_option( 'pb_network_contact_form' );
 
 	</div><!-- #content -->
 
+	<?php if ( $pb_network_contact_form ) :
+		include( locate_template( 'partials/contact-form.php' ) );
+	endif; ?>
+
 	<footer class="footer<?php echo is_front_page() ? ' footer--home' : ' footer--inside' ?>" role="contentinfo">
 	<div class="footer__inner">
-		<?php if ( $pb_network_contact_form ) :
-			include( locate_template( 'partials/contact-form.php' ) );
-		endif; ?>
 		<div class="footer__network">
 			<div class="footer__network__block">
 				<?php dynamic_sidebar( 'network-footer-block-1' ); ?>

inc/filters/namespace.php

@@ -40,6 +40,16 @@ function excerpt_more() {
 	return ' &hellip; <a href="' . get_permalink() . '">' . __( 'Continued', 'pressbooks-aldine' ) . '</a>';
 }
 
+/**
+ * Add style select dropdown to TinyMCE.
+ *
+ * @param array $buttons
+ */
+function add_style_select( $buttons ) {
+    array_unshift( $buttons, 'styleselect' );
+    return $buttons;
+}
+
 /**
  * Add things to the menu.
  *

partials/contact-form.php

@@ -13,46 +13,47 @@ $contact_form_response = \Aldine\Helpers\handle_contact_form_submission();
 
 ?>
 
-<section class="contact" id="contact">
+<aside class="contact" id="contact">
-	<h2><?php echo $contact_form_title; ?></h2>
+	<h2 class="contact__title"><?php echo $contact_form_title; ?></h2>
 	<form class="form" action="<?php echo network_home_url( '/#contact' ); ?>" method="post">
 		<?php if ( $contact_form_response ) : ?>
 		<p class="form__notice form__notice--<?php echo $contact_form_response['status']; ?>"><?php echo $contact_form_response['message']; ?></p>
 		<?php endif; ?>
 		<?php wp_nonce_field( 'pb_root_contact_form', 'pb_root_contact_form_nonce' ); ?>
 		<input type="hidden" name="submitted" value="1">
-		<p class="form__row<?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_name' ) : ?> form__row--error<?php endif; ?>">
+		<p class="form__row">
-			<label>
+			<input id="contact-name" <?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_name' ) : ?>class="error"<?php endif; ?> type="text" name="visitor_name" value="<?php if ( $contact_form_response['status'] === 'error' ) :
+				echo $contact_form_response['values']['visitor_name'];
+			endif; ?>" required>
+			<label for="contact-name">
 				<?php _e( 'Your name (required)', 'pressbooks-aldine' ); ?>
-				<input type="text" name="visitor_name" value="<?php if ( $contact_form_response['status'] === 'error' ) :
-					echo $contact_form_response['values']['visitor_name'];
-				endif; ?>" required>
 			</label>
 		</p>
-		<p class="form__row<?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_email' ) : ?> form__row--error<?php endif; ?>">
+		<p class="form__row">
-			<label>
+			<input id="contact-email" <?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_email' ) : ?>class="error" <?php endif; ?>type="email" name="visitor_email" value="<?php if ( $contact_form_response['status'] === 'error' ) :
-				<?php _e( 'Your email address (required)', 'pressbooks-aldine' ); ?>
-				<input type="email" name="visitor_email" value="<?php if ( $contact_form_response['status'] === 'error' ) :
 					echo $contact_form_response['values']['visitor_email'];
-				endif; ?>" required>
+			endif; ?>" required>
+			<label for="contact-email">
+				<?php _e( 'Your email address (required)', 'pressbooks-aldine' ); ?>
 			</label>
 		</p>
-		<p class="form__row<?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_institution' ) : ?> form__row--error<?php endif; ?>">
+		<p class="form__row">
-			<label>
+			<input id="contact-institution" <?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_institution' ) : ?>class="error" <?php endif; ?>type="text" name="visitor_institution" value="<?php if ( $contact_form_response['status'] === 'error' ) :
+				echo $contact_form_response['values']['visitor_institution'];
+			endif; ?>" required>
+			<label for="contact-institution">
 				<?php _e( 'Your institution (required)', 'pressbooks-aldine' ); ?>
-				<input type="text" name="visitor_institution" value="<?php if ( $contact_form_response['status'] === 'error' ) :
-					echo $contact_form_response['values']['visitor_institution'];
-				endif; ?>" required>
 			</label>
 		</p>
-		<p class="form__row<?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'message' ) : ?> form__row--error<?php endif; ?>">
+		<p class="form__row">
-			<label>
+			<textarea id="contact-message" <?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'message' ) : ?>class="error" <?php endif; ?>name="message" required><?php if ( $contact_form_response['status'] === 'error' ) :
+				echo $contact_form_response['values']['message'];
+			endif; ?></textarea>
+			<label for="contact-message">
 				<?php _e( 'Your message (required)', 'pressbooks-aldine' ); ?>
-				<textarea name="message" required><?php if ( $contact_form_response['status'] === 'error' ) :
-					echo $contact_form_response['values']['message'];
-				endif; ?></textarea>
 			</label>
 		</p>
-		<p class="form__row"><input class="button button--small button--outline" type="submit" value="<?php _e( 'Send', 'pressbooks-aldine' ); ?>" /></p>
+		<p class="form__row">
+			<input class="button button--small button--outline" type="submit" value="<?php _e( 'Send', 'pressbooks-aldine' ); ?>" /></p>
 	</form>
-</section>
+</aside>