Code
/
pressbooks-aldine
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update contact form.

pull/43/head
Ned Zimmerman 7 years ago
parent
16d8bac868
commit
2e0e912e0e
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
10 changed files with 27403 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 19
      assets/scripts/routes/home.js
  2. 2
      assets/styles/aldine.scss
  3. 43
      assets/styles/components/_forms.scss
  4. 6
      dist/mix-manifest.json
  5. 14503
      dist/scripts/aldine.js
  6. 10356
      dist/scripts/customizer.js
  7. 2453
      dist/styles/aldine.css
  8. 5
      footer.php
  9. 10
      inc/filters/namespace.php
  10. 41
      partials/contact-form.php

19
assets/scripts/routes/home.js
Unescape View File

@ -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() {},
};

2
assets/styles/aldine.scss
Unescape View File

@ -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";

43
assets/styles/components/_forms.scss
Unescape View File

@ -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"],
&--error > input[type="email"],
&--error > textarea {
border-bottom: solid 2px $dark-red;
label {
position: absolute;
left: 0;
top: 0;
transition: 0.2s;
}
&--error > ::placeholder {
color: $dark-red;
input,
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 {

6
dist/mix-manifest.json vendored
Unescape View File

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

14503
dist/scripts/aldine.js vendored
View File

File diff suppressed because one or more lines are too long

10356
dist/scripts/customizer.js vendored
View File

File diff suppressed because one or more lines are too long

2453
dist/styles/aldine.css vendored
View File

File diff suppressed because one or more lines are too long

5
footer.php
Unescape View File

@ -20,11 +20,12 @@ $pb_network_contact_form = get_option( 'pb_network_contact_form' );
</div><!-- #content -->
<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; ?>
<footer class="footer<?php echo is_front_page() ? ' footer--home' : ' footer--inside' ?>" role="contentinfo">
<div class="footer__inner">
<div class="footer__network">
<div class="footer__network__block">
<?php dynamic_sidebar( 'network-footer-block-1' ); ?>

10
inc/filters/namespace.php
Unescape View File

@ -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.
*

41
partials/contact-form.php
Unescape View File

@ -13,46 +13,47 @@ $contact_form_response = \Aldine\Helpers\handle_contact_form_submission();
?>
<section class="contact" id="contact">
<h2><?php echo $contact_form_title; ?></h2>
<aside class="contact" id="contact">
<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; ?>">
<label>
<?php _e( 'Your name (required)', 'pressbooks-aldine' ); ?>
<input type="text" name="visitor_name" value="<?php if ( $contact_form_response['status'] === 'error' ) :
<p class="form__row">
<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' ); ?>
</label>
</p>
<p class="form__row<?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'visitor_email' ) : ?> form__row--error<?php endif; ?>">
<label>
<?php _e( 'Your email address (required)', 'pressbooks-aldine' ); ?>
<input type="email" name="visitor_email" value="<?php if ( $contact_form_response['status'] === 'error' ) :
<p class="form__row">
<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' ) :
echo $contact_form_response['values']['visitor_email'];
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; ?>">
<label>
<?php _e( 'Your institution (required)', 'pressbooks-aldine' ); ?>
<input type="text" name="visitor_institution" value="<?php if ( $contact_form_response['status'] === 'error' ) :
<p class="form__row">
<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' ); ?>
</label>
</p>
<p class="form__row<?php if ( isset( $contact_form_response['field'] ) && $contact_form_response['field'] === 'message' ) : ?> form__row--error<?php endif; ?>">
<label>
<?php _e( 'Your message (required)', 'pressbooks-aldine' ); ?>
<textarea name="message" required><?php if ( $contact_form_response['status'] === 'error' ) :
<p class="form__row">
<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' ); ?>
</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>

Write Preview
Loading…
Cancel
Save