Chrisj

I have this Contact Form, that I'm trying to add a captcha element to it. The captcha script html part is this: <td> Enter Image Text<input name="captcha" type="text"><img src="captcha.php" /> </td> And it looks like (see attached image) How can I style this, and also put some space between the text, the field box, and the numbers box, horizontally? I look forward to some suggestions. Much thanks.

Thanks for your replies. Any additional help will be appreciated.

Thanks for your replies. This is not code that I wrote. Someone provided it to me and it seems like it's close to working. I'm not familiar with "superglobal $_PRINT". And I'm not clear on "put the contact data into the e-mail content", doesn't the Contact Form user enter the content into the Form fields? And additional guidance/examples, would be appreciated

When 'submit' is selected in this Contact Form, the 'message' field info is the only thing that sends/arrives. Someone suggested it may have to do with the 'mail command', but any help with getting the 'name' and 'email' field info to send will be appreciated. <?php $data = json_decode(file_get_contents("php://input")); $name = trim($data->name); $name = str_replace(array("\r", "\n"), array(" ", " "), $name); $email = filter_var(trim($data->email), FILTER_SANITIZE_EMAIL); $message = trim($data->message); if (empty($name) || empty($message) || !filter_var($email, FILTER_VALIDATE_EMAIL)) { echo "One or more invalid entries. Please try again."; exit; } $to = "support@...com"; $from = "From: contact-form@...com". "\r\n"; if (mail($to, "Customer Inquiry", $message)) { echo "Thank You. Your message has been sent."; } else { echo "An error has occurred and your message could not be sent."; } ?> Here's more code: <form id="ajax-contact" method="post"> <table class="table10"> <tr> <td> <label for="name">Your Name:</label> <input id="contact-name" type="text" name="name" required> </td> </tr> </tr> <tr> <td> <label for="email">Your Email Address:</label> <input id="contact-email" type="email" name="email" required> </td> </tr> <tr> <td> <label for="message">Message:</label> <textarea id="contact-message" type="text" name="message" required></textarea> </td> </tr> <tr> <td> <button type="submit">Send</button> </td> </table> </form> <div id="form-response"></div> <script> $(function () { var form = $("#ajax-contact"); form[0].reset(); form.submit(function (event) { event.preventDefault(); var data = { "name": $("#contact-name").val(), "email": $("#contact-email").val(), "message": $("#contact-message").val() }; $.ajax({ url: "../contact_form_handle.php", data: JSON.stringify(data), contentType: "application/json; charset=utf-8", dataType: "text", type: "POST"}) .done(function (response) { $("#form-response").text(response); form[0].reset(); }) .fail(function (data) { if (data.responseText.length) { $("#form-response").text(data.responseText); } else { $("#form-response").text("An error has occurred and your message could not be sent."); } }) }); }); </script>

This Form works successfully, however, the Sub-Category list elements don't appear in alphabetical order, even though I entered them into this script's siteAdmin sub-category-input in alphabetical order. Is there a line of code that could direct the elements to appear in alphabetically order upon selecting the drop-down choices? Or other solution? Here's the Form code: <form enctype="multipart/form-data" action="uploader.php" method="POST"> <div id="upload-video"> <ul> <li style="width:240px; text-align:right;"><strong>[var.lang_title]:</strong></li> <li style="width:400px; text-align:left;"><input name="title" type="text" class="upload-video-form-input" value="[var.title]" size="38" /> </li> <li style="width:240px; text-align:right;"><strong>[var.lang_description]:</strong><br /></li> <li style="width:400px; text-align:left;"><textarea rows="4" name="description" id="description" cols="29" class="upload-video-form-input">[var.description]</textarea><br /> </li> <li style="width:240px; text-align:right;"><strong>[var.lang_tags]:</strong></li> <li style="width:400px; text-align:left;"><input name="tags" type="text" class="upload-video-form-input" value="[var.tags]" size="38" /> </li> <input type="hidden" name="channel" value="9"/> <li style="width:240px; text-align:right"><strong>Sub-Category: </strong></li> <li style="width:450px; text-align:left;" ><select class="upload-video-form-input" id="sub_change" size="1" name="sub_cat"></select> </li> </ul> <input type="hidden" name="vid_upload_token" value="[var.vid_upload_token]" /> <table id="tab1"> <tbody> <tr> <td> <input type="hidden" name="public_private" value="public"></li> <input class="buttonform1" type="submit" value="UPLOAD" /> </td></tr> </tbody> </table> <input class="upload-video-form-input" type="hidden" name="form_submitted" value="yes" /> </form> <script>javascript:ahahscript.ahah('[var.base_url]/uploader.php?sub_cat=1', 'sub_change', '', 'GET', '', this); </script> Any guidance/remedy will be appreciated.

Thank you for your reply. So, this part would come after // process form ? if($_POST['submitted'] == "1"){ $your_email = "support@.....com"; $from = "From: contact-form@.....com". "\r\n"; $user_email = $_POST['email']; $user_name = $_POST['name']; $subject = $_POST['subject']; $email_body = $_POST['comments']; if($user_email == "" or $user_name == "" or $subject == "" or $email_body == ""){ $error = "Please Complete All Required* Fields"; }else{ $message = "ContactUs : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\n\n Users Message : \n\n$email_body"; //SEND THE EMAIL - mail($your_email, $subject, $message, $from); $result = "Your Message Has Been Sent. Thank You"; } } $message = "ContactUs : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\n\n Users Message : \n\n$email_body"; //End Contact Us -

Yes, sorry I got confused. So, I would need to put this in it's own php file? If so, how would the Form connect with that file, or visa versa Thanks if($_POST['submitted'] == "1"){ $your_email = "support@.....com"; $from = "From: contact-form@.....com". "\r\n"; $user_email = $_POST['email']; $user_name = $_POST['name']; $subject = $_POST['subject']; $email_body = $_POST['comments']; if($user_email == "" or $user_name == "" or $subject == "" or $email_body == ""){ $error = "Please Complete All Required* Fields"; }else{ $message = "ContactUs : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\n\n Users Message : \n\n$email_body"; //SEND THE EMAIL - mail($your_email, $subject, $message, $from); $result = "Your Message Has Been Sent. Thank You"; } } $message = "ContactUs : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\n\n Users Message : \n\n$email_body"; //End Contact Us -

This contact form code does not send the Form info, and does not show 'completed' or 'not completed' message, can you help me add what's needed, please? <form action="../index.php" method="post" name="contact_us" onSubmit="return capCheck(this);"> <tr> <td> <input id="name" name="name" value="NAME" onfocus="if (this.value=='NAME') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Name')" onblur="clickrecall(this,'Enter Name1')" /> </td> <td> <input id="name" name="email" value="EMAIL" onfocus="if (this.value=='EMAIL') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Email')" onblur="clickrecall(this,'Enter Email1')" /> </td> <td> <input id="name" name="subject" value="SUBJECT" onfocus="if (this.value=='SUBJECT') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Subject')" onblur="clickrecall(this,'Enter Subject1')" /> </td> </tr> <tr> <td colspan="3"><input id="textbox1" name="comments" value="COMMENTS" onfocus="if (this.value=='COMMENTS') {this.value=''; this.style.color='#000000';}" onclick="clickclear(this, 'Enter Comments')" onblur="clickrecall(this,'Enter Comments1')" /> </td> </tr> <tr> <td> <input id="captext" type="text" name="captext" style="maxlength="6" value="" /></td> <td><img src="../includes/captcha.php" border="0" id="verification_image" /></a><center><a onclick="refresh_security_image(); return false;" style="cursor:pointer;"><u>Refresh Image</u></a><center> </td> <td><input type="hidden" name="submitted" value="1" /><input class="my-input" type="submit" value="SEND MESSAGE"> </td> </tr> </form> <!--<script type="text/javascript"> if($_POST['submitted'] == "1"){ $your_email = "support@.....com"; $from = "From: contact-form@.....com". "\r\n"; $user_email = $_POST['email']; $user_name = $_POST['name']; $subject = $_POST['subject']; $email_body = $_POST['comments']; if($user_email == "" or $user_name == "" or $subject == "" or $email_body == ""){ $error = "Please Complete All Required* Fields"; }else{ $message = "ContactUs : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\n\n Users Message : \n\n$email_body"; //SEND THE EMAIL - mail($your_email, $subject, $message, $from); $result = "Your Message Has Been Sent. Thank You"; } } $message = "ContactUs : \n \nUsers Email : $user_email \nUsers Name : $user_name \n\n\n Users Message : \n\n$email_body"; //End Contact Us - </script>-->

Thanks for your reply. However, I have some additional information, since I originally posted. As I stated, I have a Search Form on a web page that works successfully, where when a Category is chosen the sub-category drop-down populates successfully after the Category is chosen, that uses this code: <script> $(document).ready(function() { $("select[name='channel']").change(function() { var channel_id = $(this).val(); console.log(channel_id); $("select[name='sub_category']").html("<option value='All'>Sub Category</option>"); $.ajax({ type: "POST", url: "/ajax.php", data: "channel_id="+channel_id, dataType: 'json', statusCode: { 200: function(data) { for(i = 0; i < data.length; i ++) { $("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>"); } } } }); }); }); </script> But when a jquery plug-in is added in, the Search Form works except the sub-category drop-down doesn't populate successfully after a Category is chosen, the jQuery script uses uses code: <script> $(document).ready(function(){ $("select.ui-select").selectWidget({ change : function (changes) { return changes; }, effect : "slide", keyControl : true, speed : 200, scrollHeight : 250 }); }); </script> So, I was able to contact the script's author (outside USA time zone) and he said this: if you are using $(...).change(function(){ // Do something });, ....on this drop-down script change is working only in change : function (changes) { return changes; }, ...look at your view source, there you will find $('select').change(); So, I'm guessing that I have to somehow combine the two codes, maybe use change : function (changes) { return changes; }, and not .change(function() possibly? Any additional help will be appreciated.

I've installed a jquery plug-in and am trying to integrate it with my successfully-working Search Form. The search form works using this code: <form method="get" action="../search.php" /> <table class="table10"> <tr> <td> <input type="text" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" /> </td> <td> <select size="1" name="channel" class="ui-select" /> <option value="">SELECT</option> <option value="All">All Videos</option> <option value="1">Channel1</option> <option value="4">Channel2</option> </select> </td> <td> <select size="1" name="sub_category" class="ui-select" /> <option value="All">Sub Category</option> </select> </td> <td> <input type="submit" value="SUBMIT"/> </td> </tr> </form> and this code: <script> $(document).ready(function() { $("select[name='channel']").change(function() { var channel_id = $(this).val(); console.log(channel_id); $("select[name='sub_category']").html("<option value='All'>Sub Category</option>"); $.ajax({ type: "POST", url: "/ajax.php", data: "channel_id="+channel_id, dataType: 'json', statusCode: { 200: function(data) { for(i = 0; i < data.length; i ++) { $("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>"); } } } }); }); }); </script> where you select a Category and that then populates the sub-category drop-down for selecting a sub-category. But when I add in the jquery code around the Form, and select a Category, the sub-category doesn't populate. Here's that jquery code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> <script type="text/javascript" src="js/select-widget-min.js"></script> and: <link rel="stylesheet" href="css/drop-down.css" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"/></script> <script type="text/javascript" src="js/jquery-ui.min.js"/></script> <script> $(document).ready(function(){ $(".ui-select").selectWidget({ change : function (changes) { return changes; }, effect : "slide", keyControl : true, speed : 200, scrollHeight : 250 }); }); </script> </head> So, the Search Form works and the sub-category drop-down populates successfully after a Category is chosen. But when the jquery is added in, the Search Form works except the sub-category drop-down doesn't populate successfully after a Category is chosen. Any suggestions will be greatly appreciated..

I have been working on a Search Form, that has a small issue. In the Form table, when a Category is selected, the Form shifts momentarily. What is taking place is the Sub-Category table section momentarily shows a small sub-category field box, and then disappears (which shifts the Form). I'm trying to remedy that issue, so that the Form doesn't shift, and the small sub-category field box doesn't appear. For a visual, I've attached an image showing a series of images, the top image(1st) is before a Category selection, the 2nd shows the Category drop-down, the 3rd shows what happens upon selection (the field box shows), the 4th shows the that the field box disappears. (this may be a jQuery issue - not sure) Any ideas will be greatly appreciated.

The javascript slider that I'm using appears successfully on my pc screen, but the image is truncated on the right when viewed on an iPhone. I'm trying to have the php web script show a different css file when viewed on iPhone, to have different attributes, but, for starters, this link doesn't seem to work: <link rel="stylesheet" type="text/css" media="screen" href="css/component01.css" /> Can you help me with a more proper link that will work for iPhone screens?

Thanks for your reply, however, that line has been commented out, and replaced with the "hidden" line, as appears in my original posting. Any other suggestions will be appreciated.

Thanks so much for your reply. Yes I tried that suggestion by trying it several places within the <select tags on this line, without success: <li style="width:240px; text-align:right"><strong>[var.lang_sub_cat]: </strong><option value="">Choose One</option></li> <li style="width:400px; text-align:left;" id="sub_change"><select class="upload-video-form-input" style="width:160px;" size="1" name="sub_cat"></select> ([var.lang_optional])</li> Any other ideas will be greatly appreciated. Much thanks again.

I installed a javascript slider and added my images, but my images apparently have a sizing issue, I can see more width of the image on my pc screen, but on an iphone the image seems almost cut in half. Any ideas how to remedy will be appreciated. Here's some relevant code: html, body, .container { height: 100%; } .js .boxgallery, .js .boxgallery div { position: absolute; } .js .boxgallery, .bg-tile, .bg-img { overflow: hidden; } .js .boxgallery, .js .panel { top: 0; left: 0; width: 100%; height: 100%; } .panel { z-index: 0; -webkit-perspective: 1200px; perspective: 1200px; } .bg-tile { width: 50%; height: 50%; } .bg-tile:nth-child(2), .bg-tile:nth-child(4) { left: 50%; } .bg-tile:nth-child(3), .bg-tile:nth-child(4) { top: 50%; } .bg-img { width: 100%; height: 100%; background: #999; } .bg-img img { position: absolute; display: block; height: 200%; } @media screen and (min-aspect-ratio: 1280/850) { .bg-img img { width: 200%; height: auto; } } .bg-tile:nth-child(2) .bg-img img, .bg-tile:nth-child(4) .bg-img img { left: -100%; } .bg-tile:nth-child(3) .bg-img img, .bg-tile:nth-child(4) .bg-img img { top: -100%; } Any help will be appreciated.

Thanks for your reply and remedy. Much thanks. Putting this: <script> javascript:ahahscript.ahah('[var.base_url]/uploader.php?sub_cat=1', 'sub_change', '', 'GET', '', this); </script> outside of the Form, worked! Much, much thanks/appreciated. Now, I'm just trying to have "Choose One" appear, in the field box, instead of the first choice of the sub-category list. If you'd like to share any thoughts on where I can make that happen, I'd welcome that guidance. Much, much thanks again.

Thanks for that suggestion. I tried this: <input type="hidden" name="channel" value="1"/><script> javascript:ahahscript.ahah('[var.base_url]/uploader.php?sub_cat=1', 'sub_change', '', 'GET', '', this); </script> as per your instructions, but unfortunately no success. Any other ideas will be welcomed.

Thanks for your reply. Do you know of a "different one"?

Thanks so much for your reply, but "duration", I believe, sets the the length of time the slide appears, am I correct? not when it begins or ends. Also, that sets the duration for all slides, correct? I'm asking about a solution that might "a way to set a time to delay or begin each separate slide. Any clarification, or additional assistance. Thanks again

I installed this: http://www.jqueryscript.net/slider/Lightweight-Overlay-Content-Slider-Plugin-For-jQuery.html I'd like to find out if there's a way to set a time to delay or begin each separate slide I've horsed around with this, and searched google, but I haven't been able to find a solution. Here's some relevant code: <ul id="slideshow" class="slides"> <li data-duration="5000" class="active"> <div class="slide-content1"> Slide Content 1 </div> </li> <li data-duration="3000"> <div class="slide-content2"> Slide Content 2 </div> </li> <li data-duration="1000"> <div class="slide-content3"> Slide Content 3 </div> </li> </ul> ul.slides { list-style: none; padding: 0; margin: 0; } ul.slides li { margin: 0; background: rgba(10, 10, 90, 0.5); padding: 10%; color: #fff; font-size: 18rem; font-weight: bold; display: flex; align-content: center; justify-content: center; opacity: 0; position: absolute; width: 1000px; height: 22%; top: 155px; right: 0; bottom: 0; z-index: 8; transition: transform 1.4s cubic-bezier(0.01, 1, 0.91, 1) 0.5s; } @media all and (max-width: 1000px) { ul.slides li { font-size: 20vw; } } ul.slides li.active { z-index: 10; } ul.slides li.active.slide-left { transform: translate3d(100%, 0, 0); } ul.slides li.active.slide-right { transform: translate3d(-100%, 0, 0); } ul.slides li.last-active { z-index: 9; } ul.slides li:first-child { left: 0; opacity: 1; } Any guidance will be appreciated. Thanks

Thanks again for your help...got it

Thanks for your reply. Yes, I understand some CSS, just thought I'd ask since we're already having this conversation. I created this in CSS: .TextBox { background-image:url('../img/TextBox1.png'); background-repeat:no-repeat; width: 220px; height:50px; } and the code is now this: <input class="TextBox" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" /> And it works successfully, but now it looks like this - see attached image - Any help with removing the rectangle box that surrounds the "Search Words" text, will be appreciated.

Thanks for your replies. I believe I'll have to try it manually, for just this 'dumb text field' (not autocomplete or combobox). So, would I add this image (attached) into this line of code somehow? <input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />

Thanks again for your reply. Yes, I'm trying to match the appearance.

Thanks for that, much appreciated, very helpful. Now, if you don't mind, I'd like be grateful for some assistance with putting the search words field into the new container, please. As you can see from the attached image, the search field is below the container. I'm stumped on what I need to do there. Any help will be appreciated. Here's that code: <td> <h3>2. ENTER SEARCH WORDS</h3> <select name="channel" class="dropdown_box"> <input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" /> </select> </td>