Hi!
I tested both functions and the behavior was identical. The only difference I can see between both pages is the way in which you handle namespace calls: in your home page you are using $, whereas in your WP area you are using ‘jQuery’.
Did you try saving your JS as an external file and calling it in WP via the wp_enqueue_script function?
Also, as a side note, you would get way smoother img rollovers if you merged your normal and hover img states together and toggled them with background-position. This is because when they are in separate files, browsers call the hover image when the event occurs, which can lead to delays. However, if it’s a single image, the entire image (both states) are loaded on page load, so no delays occur.
Thanks for the response, I’ve used the wp_enqueue_script function before to call scripts such as jQuery, in the head.php file. I was under the impression that jQuery has to be written as “jQuery” and not as “$” that’s why they are different, it means the same thing though… doesn’t it, $ is shorthand for jQuery.
The jQuery function works, it’s when it goes to get the process.php file that it fails, correct me if I’m wrong.
The images are like that as you can’t get a css transition looking correct from a sprite sheet, it would slide the image as opposed to fade etc. However you have made me ask myself whether it is worth having the transition if the images have to load every time.
doesn’t it, $ is shorthand for jQuery.
Yes, jQuery is the No Conflict method to call the jQuery library.
I was under the impression that jQuery has to be written as “jQuery” and not as “$” that’s why they are different
That depends: if you are absolutely 100% sure that jQuery is the only library you are using in your website, then no, it is not necessary to use it in No Conflict mode.
As for the form itself, I filled it twice in each of the pages as a test. Did you receive any of that info?
The images are like that as you can’t get a css transition looking correct from a sprite sheet
Actually, you totally can, but you need additional HTML and a little bit of JS to make it work. I have implemented this in the past. LMK if you are interested and I’ll make you a JSFiddle you can use as reference.
Hi Marventus
I got the message that states: “Second test.”, I’m presuming you sent the other one from wp part of the website. I will make that change you mentioned last night and see if it helps.
Cheers
I just tried it and it still won’t work, I enqueued the script like so:
<?php
function my_scripts_method() {
// register your script location, dependencies and version
wp_register_script(‘form_script.js’,
get_template_directory_uri() . ‘/js/form_script.js’,
array(‘jquery’),
‘1.0’ );
// enqueue the script
wp_enqueue_script(‘form_script.js’);
}
add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);
?>
Separated the js and still no joy ;(
Actually, you totally can, but you need additional HTML and a little bit of JS to make it work. I have implemented this in the past. LMK if you are interested and I’ll make you a JSFiddle you can use as reference.
OK go on then
Ok. Sorry I didn’t distinguish the tests further: I assumed you had added the source url of the data in the email. I’ll run another test in the meantime, just to make sure.
Oh, BTW. You now seem to have some sort of z-index issue when the form unfolds in the News and Tips section.
A couple of observations about your JS:
1. just to be on the safe side, you should use === and !== for comparing values (instead of == and !=);
2. Based on your code, I assume you are using the cForms II to generate your form. Since I don’t know the plugin (never used it), and since you are testing some fields to see if they are empty, I would make sure that empty fields are returning with actual empty (”) values instead of undefined (‘undefined’) ones. To test that, you can use the alert(<em>string or $var</em>) command.
To be honest it’s just been guess-work by adding bits together from different sources, I found various forms that all did things I liked and then amalgamated them, and somehow through sheer determination got something to work.
The parts I don’t understand are as follows:
source url of the data in the email
What’s that in layman’s terms?
just to be on the safe side, you should use === and !== for comparing values (and not == and !=
Do I replace == with === and != with !== ?
I didn’t know I was using a plugin called cForms ii, I haven’t used any more code other than what you have seen so if there was a js plugin called cForm I have no idea where it is.
The last part was over my head, could you please explain in dummy terms if you have the patience, cheers.
Oh yeah the z-index issue, I can sort that out if the form works in it’s current state, if not I’ll just put it back to what it was until I find a solution.
Hi. Sorry my last post was a bit confusing:
The parts I don’t understand are as follows:
source url of the data in the email
Nevermind that: I meant I thought you had added the URL sending the form in the data saved by the form.
I have conducted further tests specifying which URL I was using the form from.
To be honest it’s just been guess-work by adding bits together from different sources,
That might explain why you are having a hard time getting this to work. If you are not that familiar with the code, I would suggest using a contact form plugin, such as Contact Form 7 (works great, and lets you send confirmation e-mails to your users) or cForms-II (mentioned earlier). I thought you were using that WP plugin because your contact form was named cform. Nevermind that either.
As for the image rollover stuff, here’s a JSFiddle with a little explanation. I added a copyright notice in case other people land there.
Your fiddle is good, thanks for that I will defo use it. As for the form… I was considering using contact form 7 as I already use it in some other sites and it is great, I just want continuity throughout the website and that includes the form.
Would I be able to use my script with contact form 7 and also use it in the non wp area?
Thanks again
Your fiddle is good, thanks for that
No problem, glad I could help.
Would I be able to use my script with contact form 7 and also use it in the non wp area?
About that, is there a particular reason why you are only using WP for your News and Tips Section?
If there is, you could insert an iframe pointed to the WP CF7 form in all your non-WP pages. You could even turn it into a little php script and include it from your different pages (easier for maintenance).
Hi
The reason is that the site was already up and running and the blog was an addition. I like the sound of it being a php include file.
I need to know how to implement contact form 7 in a non-wp site and also how and where to add the jQuery that I want for the form to dropdown.
Is this something you would know how to do?
I know how to include files and have got that function on pretty much all of my websites, it saves loads of time with updates.
The way CF7 works is that it lets you create contact forms and insert them through the use of shortcodes. While creating your form, you should try to use the same html and classes as for your existing form, so that you don’t have to do extra work.
Once you are done, what you do is remove your old contact form code from the News & Tips section and insert your new CF7 form’s shortcode instead. Then, it would only be a matter of replacing your contact form in your other non-WP pages for an iframe pointed to the CF7 form in your News & Tips page.
As for the process.php part, what does that file do? Could you paste the code in Pastebin and insert a link here?
Hi
I don’t want to use an iFrame, it just seems like a fudge to me. How would I change the classes for the form through wordpress. I have a form on another website at the moment that uses contact form 7 and the structure is like this:
<p>Your Name (required)
[text* your-name] </p>
<p>Your Email (required)
[email* your-email] </p>
<p>Subject
[text your-subject] </p>
<p>Your Message
[textarea your-message] </p>
<p>[submit “Send”]</p>
That’s it, are you saying I can just replace the <p> tags with anything I want, will that work?
Yeah, you can use any HTML you want in there. Same goes for your e-mail confirmations (I think you have to check the “Allow HTML” checkbox to be able to use HTML in emails). You can also add CSS classes to your input fields. For instance, in the code you provided:
[text* your-name class:someclass]
will generate a required input field (cuz of the * smbol) with the class “someclass”.
