- This topic is empty.
-
AuthorPosts
-
January 21, 2011 at 12:19 am #31337Alan_BreckParticipant
Hello,
I’m pretty new to WordPress, and am jumping right into it by creating my own template. I am trying to use a contact form that I found on this site (https://css-tricks.com/examples/ContactForm/), but somehow it just won’t work properly in a WordPress environment.
It doesn’t actually send the message. And the validator does not work when you put incorrect information in the fields.
When I used the same contact form on a static site, it worked just fine. Read Chris Coyier’s tutorial on properly including JQuery files which helped with one problem, but not the others.
The site is here – http://susanpriestart.com/?page_id=96
Thank you so much for your time!
~A.B.
January 21, 2011 at 10:57 am #64876clokey2kParticipantI can see that maybe the data in
contactengine.php
is incorrect, the success/error pages at least (alocalhost
reference is still there).As for the jquery validator you have jquery loaded twice, the second (more up-to-date version) loads after the validate plugin, and probably destroys the plugin.
I set all of my jquery scripts to load in my
functions.php
, then they will load in order. Maybe try this yourself, try the example below (filling in the file locations correctly :-) ):if (!is_admin()) {
wp_deregister_script('jquery'); //Stop WordPress default jQuery
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2'); //Load Googles jQuery
wp_enqueue_script('jquery');
//Load jquery plugin
wp_register_script('jquery_validator','/path/to/js/jquery.validate.js', 'jquery', '1.0'); //'jquery' is passed as a reference so that this loads AFTER 'jquery'
wp_enqueue_script('jquery_validator');
//Load custom script
wp_register_script('custom','/path/to/js/page.js', 'jquery_validator', '1.0'); //'jquery_validator' is passed as a reference so that this loads AFTER the plugin
wp_enqueue_script('custom');
}
In theory they all get loaded in the correct order based on dependency, ‘jquery_validator’ depends on ‘jquery’.
January 21, 2011 at 2:58 pm #64749Alan_BreckParticipantThank you for the reply! I did as you advised… I think :-)… but somehow it’s still not working. When the hover effect worked properly, the validator would not and vice versa. Please forgive my ignorance here, but am I missing something in my header to call those files out of the functions.php file? Here is my header code:
>
if (function_exists('is_tag') && is_tag()) {
single_tag_title("Tag Archive for ""); echo '" - '; }
elseif (is_archive()) {
wp_title(''); echo ' Archive - '; }
elseif (is_search()) {
echo 'Search for "'.wp_specialchars($s).'" - '; }
elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - '; }
elseif (is_404()) {
echo 'Not Found - '; }
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description'); }
else {
bloginfo('name'); }
if ($paged>1) {
echo ' - page '. $paged; }
?>
…and here is my functions.php code:
if (!is_admin()) {
wp_deregister_script('jquery'); //Stop WordPress default jQuery
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2'); //Load Googles jQuery
wp_enqueue_script('jquery');
//Load jquery plugin
wp_register_script('jquery_validator','/wp-content/themes/priest/js/jquery.validate.js', 'jquery', '1.0'); //'jquery' is passed as a reference so that this loads AFTER 'jquery'
wp_enqueue_script('jquery_validator');
//Load custom script
wp_register_script('custom','/wp-content/themes/priest/js/page.js', 'jquery_validator', '1.0'); //'jquery_validator' is passed as a reference so that this loads AFTER the plugin
wp_enqueue_script('custom');
}Thank you again for your help!
~A.B.
January 21, 2011 at 4:55 pm #64687clokey2kParticipantThe ‘custom’ script -> ‘page.js’ is where I have replaced your inline code (the jquery in your header) and put it in an external file. You don’t have to seperate it but your code has to come AFTER
wp_head()
. That function is what begins loading all of the enqueued scripts.You can also remove your
wp_enqueue_script("jquery");
from your head, if you have it in yourfunctions.php
.So either place your jquery after the wp_head, or into the ‘page.js’ file. If you don’t use the ‘page.js’ file then remove it from your functions.php, otherwise you are requesting a file that doesn’t exist.
View the source on the page in your browser and you’ll see your code reference before all other wordpress stuff!
January 21, 2011 at 10:01 pm #64594Alan_BreckParticipantThat worked! I really appreciate your taking time to help me with this! Thank you so much!
God bless,
~A.B.January 21, 2011 at 10:17 pm #64595Alan_BreckParticipantWait… hold the presses! I’m still running into a problem…
When using the Google jQuery library, the hover effect does not work, so I simply replaced that URL to one that points to the original library on the server – worked fine. However, I’m still having validation issues. It validates the e-mail field to make sure a valid e-mail address is typed, but it doesn’t not notify you if you don’t fill in your name and city.
Here is the code from the contact page –
functions.php –
if (!is_admin()) {
wp_deregister_script('jquery'); //Stop WordPress default jQuery
wp_register_script('jquery', '/wp-content/themes/priest/js/jquery-1.2.6.min.js', false, '1.2.6'); //Load Googles jQuery
wp_enqueue_script('jquery');
//Load jquery plugin
wp_register_script('jquery_validator','/wp-content/themes/priest/js/jquery.validate.js', 'jquery', '1.0'); //'jquery' is passed as a reference so that this loads AFTER 'jquery'
wp_enqueue_script('jquery_validator');
//Load custom script
wp_register_script('custom','/wp-content/themes/priest/js/page.js', 'jquery_validator', '1.0'); //'jquery_validator' is passed as a reference so that this loads AFTER the plugin
wp_enqueue_script('custom');
}…and the header –
Thank you again for your time!
~A.B.
BTW: I took your advice on using an external JS file for the hover effect; thank you for that input!
January 22, 2011 at 5:18 am #64537clokey2kParticipantHmmm… I can’t see any faults/conflicts with the scripts – and there are many from plugins. Maybe download a newer version of jquery to your server and reference that?
Or try disabling the wp-ecommerce, and nextgen plugins and see if it works after.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.