update contact form styling

roomwithavw-custom.php

@@ -12,52 +12,55 @@
  */
 
 function roomwithavw_custom_add_scripts() {
-	wp_register_script( 'roomwithavw-custom-script', plugins_url( 'assets/js/index.js', __FILE__ ), array(), '1.0', true );
+	wp_register_script( 'roomwithavw-custom-script', plugins_url( 'assets/js/index.js', __FILE__ ), ['jquery-ui-datepicker'], '1.0', true );
 	wp_enqueue_script( 'roomwithavw-custom-script' );
  
 	wp_enqueue_style( 'roomwithavw-custom-styles', plugins_url( 'assets/css/style.css', __FILE__ ), '', '1.0' );
 }
 add_action( 'wp_enqueue_scripts', 'roomwithavw_custom_add_scripts' );
 
-// function wpcf7_custom_form_action_url($url) {
-// 	return 'https://mailthis.to/mailthis@gabbaell.co.uk';
-//
-// 	// $return_url =$url;
-// 	// global $post;
-//   //   $id_to_change = 1;
-//   //   if($post->ID === $id_to_change)
-//   //       $return_url = 'http://TESTING.testing.asp';
-//   //
-// 	// 	return $return_url;
-// }
-// add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
-
 function roomwithavw_custom_enquiry_form() {
 ?>
+<p class="lead">
+We are family run business that enjoys liaising with our clients to ensure we provide the best experience. For this reason, unlike regular camper van hire companies, we are not using an online calendar booking system as we believe it takes away from the personal touch we strive to maintain.
+</p>
+
+<p class="lead">
+Fill in the form below and one of our team will be in touch with you shortly.
+</p>
+<div class="enquiry-form wpcf7" role="form" dir="ltr">
 	<div class="screen-reader-response" aria-live="polite"></div>
 
-	<form action="https://mailthis.to/mailthis@gabbaell.co.uk" method="post" class="wpcf7-form" novalidate="novalidate">
+	<!-- <form action="https://mailthis.to/mailthis@gabbaell.co.uk" method="post" class="wpcf7&#45;form" novalidate="novalidate"> -->
-		<div style="display: none;">
+	<form action="" method="post" id="rwavw-enquiry-form" class="wpcf7-form" novalidate="novalidate">
-		<input type="hidden" name="_wpcf7" value="1041" />
-		<input type="hidden" name="_wpcf7_version" value="5.1.9" />
-		<input type="hidden" name="_wpcf7_locale" value="en_US" />
-		<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1041-o1" />
-		<input type="hidden" name="_wpcf7_container_post" value="0" />
-		</div>
 		<p><label> Forename (required)<br />
 		<span class="wpcf7-form-control-wrap forename"><input type="text" name="forename" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
 		<p><label> Surname (required)<br />
 		<span class="wpcf7-form-control-wrap surname"><input type="text" name="surname" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" /></span> </label></p>
-		<p><label> Booking Date<br />
+
-		<span class="wpcf7-form-control-wrap booking-date"><input type="date" name="booking-date" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" /></span> </label></p>
+		<p class="dates">
-		<p><label><br />
+			<label> Booking Date<br />
-		<span class="wpcf7-form-control-wrap day-count"><input type="number" name="day-count" value="3" class="wpcf7-form-control wpcf7-number wpcf7-validates-as-number" aria-invalid="false" /></span> </label></p>
+				<span class="wpcf7-form-control-wrap booking-date">
+					<input type="date" name="booking-date" value="" class="rwavw-datepicker booking-date wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" />
+				</span>
+			</label>
+		</p>
+
+		<p>
+			<label> Number of Days<br />
+				<span class="wpcf7-form-control-wrap day-count">
+						<input type="number" name="day-count" value="3" class="days wpcf7-form-control wpcf7-number wpcf7-validates-as-number" aria-invalid="false" />
+					</span>
+				</label>
+		</p>
+
 		<p><label> Your Email (required)<br />
 		<span class="wpcf7-form-control-wrap replyto"><input type="email" name="_replyto" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" /></span> </label></p>
 		<p><input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" /></p>
 		<div class="wpcf7-response-output wpcf7-display-none" aria-hidden="true"></div>
 	</form>
-
+</p>
+</div>
 	<?php
 }
 add_shortcode('rwavw-capsule-enquiry', 'roomwithavw_custom_enquiry_form');

src/js/index.js

@@ -1,10 +1,12 @@
 (function() {
 	const observeSelector = '.js-onscreen';
+	// TODO - will the form ID ever change?
 	const observedNodes = document.querySelectorAll(observeSelector);
 	let observedCount = 0;
 	let observedTotal = !!observeSelector ? observedNodes.length : 0;
 
 	window.addEventListener('DOMContentLoaded', event => {
+		const enquiryForm = document.querySelector('#wpcf7-f1041-o1 > form');
 		const intersectionSupport = !!window.IntersectionObserver;
 
 		function updateObservedCount() {
@@ -24,6 +26,12 @@
 			});
 		}
 
+		if (enquiryForm) {
+			const replyto = enquiryForm.querySelector('input[name=replyto]');
+			replyto.name = '_replyto';
+			enquiryForm.action = '__URL__';
+		}
+
 		document.body.classList.add('rwavw-custom');
 
 		observedNodes.forEach(el => {

src/scss/style.scss

@@ -49,6 +49,12 @@ body.rwavw-custom {
 			opacity: 0.7;
 		}
 
+		div.wpcf7 {
+			max-width: 90ch;
+			margin-right: auto;
+			margin-left: auto;
+		}
+
 		.wpcf7 {
 			padding: 64px 48px 92px;
 			color: #4a5568;
@@ -64,6 +70,7 @@ body.rwavw-custom {
 				font-size: 14px;
 				font-weight: 600;
 				letter-spacing: initial;
+				cursor: pointer;
 			}
 
 			input,
@@ -71,12 +78,21 @@ body.rwavw-custom {
 				border-radius: 3px;
 				border-color: #cbd5e0;
 				background-color: #f7fafc;
+				cursor: pointer;
 
 				&:focus {
 					border-color: rgba(#000, 0.8);
 				}
 			}
 
+			input.booking-date {
+				width: 21ch;
+			}
+
+			input.days {
+				width: 21ch;
+			}
+
 			.wpcf7-form-control-wrap {
 				margin-left: 0;
 			}