bignose2

https://www.fpkennels.com/?page_id=200

I think I may have fixed it but be interested for comments, the first line use to have From: [surname] <[your-email]>. Taken out the < >’s & little testing but seems OK now. As I say use to work & not changed anything but 2 days ago no more line feeds, perhaps contact form has been updated & finding any odd html.

Mail Code

From: [surname] : [your-email]
~s~[surname]~s~
~n~[DogsNames]~n~
<br/>
~b~[Breed]~b~
<br/>
~h~[BeenBefore]~h~
<br/>
~d1s~[BookedDates1]~d1e~
~d2s~[BookedDates2]~d2e~
~d3s~[BookedDates3]~d3e~
<br/>
~m~[your-message]~m~
<br/>
~e~[your-email]~e~
This mail is sent via contact form on Frensham Pond Kennels https://www.fpkennels.com – 30/1

Hi,
I did not really know what I was doing & new to java etc but put together stuff I found around, the howtoaddajquerydatepicker below gave me 95% of what I needed & just a huge amount of trial & error did the rest.
Works really well, my https://www.fpkennels.com bookings link at bottom shows how well it can work. (please don’t “send” as this is my working business)

I have included my rambling notes, might give some hints, been a while since I did it so can’t be much more help than that.

Not as complicated or tricky as it may look (or it did to me or first viewing)

The only small thing is the field size seems to be fixed, so a little wide for a date & if my www window is made small my from & to dates are not side by side.
Also, Not 100% sure but having to put the code in via the theme editor I think if the theme is updated you might loose the code so keep a copy. Don’t think it is saved or backup online

There have been a few updates to contact form 7 & stuff so perhaps there are better solutions.

Jquery-ui – Datepicker
https://www.wordpressninja.com/2011/06/how-to-add-a-jquery-datepicker-to-your-contact-form-7/

https://jqueryui.com/
datepicker, download, I think I like the dark hive (can’t seem to just link & change the these, seems download the whole lot?
Upload as zip, in root, extract BUT add the folder /jqueryui so not directly in root.
Remember page numbers as won’t execute.
Upper & lower case have dramatic effect, even True won’t work must be true, s(S)electedDate etc.

Don’t include anything is URL’s between the www. & fpkennels.com – I had wp-content (or whatever) and it did not load

Nb: theme not in its own folder, upload whole zip ..
Also do we need to load for each date, don’t think so, perhaps leave as safe & might want to have different functions for different dates, unlikely but perhaps for different forms.

=============
<?php wp_enqueue_script(“jquery”); ?>

<?php wp_head(); ?>

<?php
//jQuery
if(($post->ID==200) OR ($post->ID==211)){
//this code only runs when the current page is our contact page!
//ADD THE NECESSARY FILES
// –> css
echo ‘<link rel=”stylesheet” <link rel=”stylesheet” href=”https://www.fpkennels.com/jquery-ui/development-bundle/themes/dark-hive/jquery.ui.all.css”>&#8217;;
// –> jQuery javascript
echo ‘<script src=”https://www.fpkennels.com/jquery-ui/development-bundle/jquery-1.5.1.js”></script>&#8217;;
// –> jQueryUI core
echo ‘<script src=”https://www.fpkennels.com/jquery-ui/development-bundle/ui/jquery.ui.core.js”></script>&#8217;;
// –> jQueryUI datepicker
echo ‘<script src=”https://www.fpkennels.com/jquery-ui/development-bundle/ui/jquery.ui.datepicker.js”></script>&#8217;;
//TURN TEXT FIELD INTO DATEPICKER
echo ‘<script type=”text/javascript”>’;
echo ‘jQuery(function($){‘;
echo ‘$( “#Date1From” ).datepicker({‘;
// echo ‘defaultDate: “+1w”,’;
echo ‘changeMonth: false,’;
// echo ‘changeYear: true,’;
echo ‘numberOfMonths: 2,’;
echo ‘minDate: -0,’;
echo ‘dateFormat: “dd-M-yy”,’;
echo ‘onSelect: function( selectedDate ) {‘;
// Earliest date? not sure why end-date? can understand below is after start-date
echo ‘$( “#Date1To” ).datepicker( “option”, “minDate”, selectedDate );’;
echo ‘}’;
echo ‘});’;
echo ‘$( “#Date1To” ).datepicker({‘;
// echo ‘defaultDate: “+1w”,’;
echo ‘changeMonth: false,’;
echo ‘numberOfMonths: 2,’;
echo ‘dateFormat: “dd-M-yy”,’; // oddly if not dateformat here min & max go a bit odd
echo ‘onSelect: function( selectedDate ) {‘;
echo ‘$( “#Date1From” ).datepicker( “option”, “maxDate”, selectedDate );’;
echo ‘}’;
echo ‘});’;
echo ‘});’;
echo ‘</script>’;
}
?>