Hey, I'm not sure if this is a php, JS or wordpress issue.
This is my site - its the booking area I'm attempting to edit....
http://goo.gl/cGHA8Y
For example, if I add
class="ab-formElement ab-select-mobile ab-select-service"
to any code (<select><input> even a <div>) then it adds the <option.....> to it - So I created a <div> and the output is:
<div class="ab-formElement ab-select-mobile ab-select-service" value="Select service">
<option value="1">Class IV (4) MOT</option>
<option value="2">Class VII (7) MOT</option>
<option value="3">Engine Service</option>
<option value="4">Full Engine Service</option>
<option value="5">Aircon Leak Test, Re-Gas & Service</option>
<option value="6">Aircon Re-Gas & Service</option>
<option value="7">FREE Safety Check</option>
<option value="8">Engine Diagnostic Check</option>
</div>
however if I view the source of the page it shows:
<!--
Plugin Name: Bookly – Responsive WordPress Appointment Booking and Scheduling Plugin
Plugin URI: http://booking-wp-plugin.com
Version: 7.0.1
-->
<style type="text/css">
/* Service */
.ab-label-error {color: #5b3222!important;}
label.ab-category-title {color: #5b3222!important;}
.ab-next-step, .ab-mobile-next-step, .ab-mobile-prev-step, li.ab-step-tabs.active div,
.picker__frame, .ab-first-step .ab-week-days li label {background: #5b3222!important;}
li.ab-step-tabs.active a {color: #5b3222!important;}
div.ab-error select {border: 2px solid #5b3222!important;}
.picker__header {border-bottom: 1px solid #5b3222!important;}
.picker__nav--next, .pickadate__nav--prev {color: #5b3222!important;}
.picker__nav--next:before {border-left: 6px solid #5b3222!important;}
.picker__nav--prev:before {border-right: 6px solid #5b3222!important;}
.picker__day:hover {color: #5b3222!important;}
.picker__day--selected:hover {color: #5b3222!important;}
.picker--focused .picker__day--selected {color: #5b3222!important;}
.picker--focused .picker__day--highlighted {color: #5b3222!important;}
.picker__button--clear {color: #5b3222!important;}
.picker__button--today {color: #5b3222!important;}
.ab-first-step .ab-week-days li label.active {background: #5b3222 url(http://kerrymotorservices.co.uk/wp-content/plugins/appointment-booking/frontend/resources/images/checkbox.png) 0 0 no-repeat!important;}
/* Time */
.ab-columnizer .ab-available-day {
background: #5b3222!important;
border: 1px solid #5b3222!important;
}
.ab-columnizer .ab-available-hour:hover {
border: 2px solid #5b3222!important;
color: #5b3222!important;
}
.ab-columnizer .ab-available-hour:hover .ab-hour-icon {
background: none;
border: 2px solid #5b3222!important;
color: #5b3222!important;
}
.ab-columnizer .ab-available-hour:hover .ab-hour-icon span {background: #5b3222!important;}
.ab-time-next {background: #5b3222!important;}
.ab-time-prev {background: #5b3222!important;}
.ab-to-first-step {background: #5b3222!important;}
/* Details */
label.ab-formLabel {color: #5b3222!important;}
a.ab-to-second-step {background: #5b3222!important;}
a.ab-to-fourth-step {background: #5b3222!important;}
div.ab-error {color: #5b3222!important;}
input.ab-details-error,
textarea.ab-details-error {border: 2px solid #5b3222!important;}
.ab-to-second-step, .ab-to-fourth-step {background: #5b3222!important;}
/* Payment */
.btn-apply-coupon {background: #5b3222!important;}
.ab-to-third-step {background: #5b3222!important;}
.ab-final-step {background: #5b3222!important;}
</style><div id="ab-booking-form-5616996946098" class="ab-booking-form">
<div style="text-align: center"><img src="http://kerrymotorservices.co.uk/wp-includes/js/tinymce/skins/lightgray/img/loader.gif" alt="Loading..." /></div>
</div>
<script type="text/javascript">
(function (win, fn) {
var done = false, top = true,
doc = win.document,
root = doc.documentElement,
modern = doc.addEventListener,
add = modern ? 'addEventListener' : 'attachEvent',
rem = modern ? 'removeEventListener' : 'detachEvent',
pre = modern ? '' : 'on',
init = function(e) {
if (e.type == 'readystatechange') if (doc.readyState != 'complete') return;
(e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);
if (!done) { done = true; fn.call(win, e.type || e); }
},
poll = function() {
try { root.doScroll('left'); } catch(e) { setTimeout(poll, 50); return; }
init('poll');
};
if (doc.readyState == 'complete') fn.call(win, 'lazy');
else {
if (!modern) if (root.doScroll) {
try { top = !win.frameElement; } catch(e) { }
if (top) poll();
}
doc[add](pre + 'DOMContentLoaded', init, false);
doc[add](pre + 'readystatechange', init, false);
win[add](pre + 'load', init, false);
}
})(window, function() {
window.bookly({
is_finished : 0,
is_cancelled : 0,
ajaxurl : "http:\/\/kerrymotorservices.co.uk\/wp-admin\/admin-ajax.php",
attributes : {"hide_categories":"1","category_id":"1","hide_services":false,"service_id":false,"hide_staff_members":"1","staff_member_id":false,"hide_date_and_time":"1","show_number_of_persons":false},
form_id : "5616996946098",
start_of_week : 1,
date_min : 0,
final_step_url : "",
custom_fields : [{"type":"text-field","label":"Vehicle Registration","required":true,"id":73007},{"type":"text-field","label":"Vehicle Make / Model","required":true,"id":1973},{"type":"textarea","label":"Notes or details of any current issues with the vehicle","required":false,"id":1}],
day_one_column : 1,
show_calendar : 0,
woocommerce : 0,
woocommerce_cart_url : "" });
});
</script></p>
</div>
I've checked the database to make sure it doesnt specify <option> etc but it doesn't and I've done all sorts of searches via dreamweaver in the code directly to see if I can work out where it adds it but nothing so far...
Any ideas?