Contact form not working in processwire

[citech]

Hey guys, 

I am new to this processwire forum and so on. I need some serious help here. 

I am trying to get my contact form to working in processwire which it seems not to do. It works pretty well when I upload the HTML files and everything without the processwire cms. The js file calls the php file from a folder call mail. Was wondering how to direct the path in the JS to the contact_me.php file which is in the mail folder. The bold line is where I believe the problem is. Here is my code:

$(function() {

    $("#contactForm input,#contactForm textarea").jqBootstrapValidation({
        preventSubmit: true,
        submitError: function($form, event, errors) {
            // additional error messages or events
        },
        submitSuccess: function($form, event) {
            // Prevent spam click and default submit behaviour
            $("#btnSubmit").attr("disabled", true);
            event.preventDefault();
            
            // get values from FORM
            var name = $("input#name").val();
            var email = $("input#email").val();
            var phone = $("input#phone").val();
            var message = $("textarea#message").val();
            var firstName = name; // For Success/Failure Message
            // Check for white space in name for Success/Fail message
            if (firstName.indexOf(' ') >= 0) {
                firstName = name.split(' ').slice(0, -1).join(' ');
            }
            $.ajax({
                url: "<?=$config->urls->templates;?>././mail/contact_me.php",
                type: "POST",
                data: {
                    name: name,
                    phone: phone,
                    email: email,
                    message: message
                },
                cache: false,
                success: function() {
                    // Enable button & show success message
                    $("#btnSubmit").attr("disabled", false);
                    $('#success').html("<div class='alert alert-success'>");
                    $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
                        .append("</button>");
                    $('#success > .alert-success')
                        .append("<strong>Your message has been sent. </strong>");
                    $('#success > .alert-success')
                        .append('</div>');

                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
                error: function() {
                    // Fail message
                    $('#success').html("<div class='alert alert-danger'>");
                    $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>×")
                        .append("</button>");
                    $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!");
                    $('#success > .alert-danger').append('</div>');
                    //clear all fields
                    $('#contactForm').trigger("reset");
                },
            })
        },
        filter: function() {
            return $(this).is(":visible");
        },
    });

    $("a[data-toggle=\"tab\"]").click(function(e) {
        e.preventDefault();
        $(this).tab("show");
    });
});

// When clicking on Full hide fail/success boxes
$('#name').focus(function() {
    $('#success').html('');
});

[adrian]

Hi @citech and welcome to the forums. 

The problem is that yo can't directly call any php files inside the templates folder. There are lots of options to deal with this, but the simplest for you at this point might be to put the file outside the site folder - at the root of your site, or in a subfolder at the root.

[kongondo]

Hi Citech. Welcome to the forums and ProcessWire. What @adrian said. Here's more info and workarounds/options:

Edited March 3, 2016 by kongondo

[citech]

Hey guys thanks for the help I got it to work. I placed the mail folder outside the site folder, directly on the root and in the JS I used the path /mail/contact_me.php.

Thanks Kongondo for the link to Ryan's post. That is what helped me out.

[flydev]

Hi and welcome.

You can check this thread too : https://processwire.com/talk/topic/12094-jquery-functions-and-path/?hl=ajax

A small snippet I use at this moment :

    <script type="text/javascript">
        // PW dynamic js var
        <?php
        $jsConfig = $config->js();
        $jsConfig['debug']  = $config->debug;
        $jsConfig['urls']   = array(
            'current_url' => $page->url,
            'root' => $config->urls->root,
            'templates' => $config->urls->templates,
        );
        ?>
        var config = <?php echo json_encode($jsConfig); ?>;
    </script>

Assuming you put your file "contact_me.php" in the root folder, to call it from JS, you can write something like that :

[...]

$.ajax({
    url: config.urls.root + "contact_me.php",

[...]

[bernhard]

hi citech,

i would recommend to create a separate template + page for that directly in the PW pagetree! if you put your file directly in the root you may run into problems some day (eg if you want to do a profile export). it's very easy to setup, although it is also a LITTLE more work:

create a template (contact) + template file (eg /site/templates/contact.php)

create a page in PW pagetree (eg /tools/contact)

no you can point your form submit to /tools/contact and you have everything well organised and in place. you should try to keep all your own work/changes in the site-folder. this method does also have the benefit that you have all the PW api available (like sanitization which you will have to do with your contact data) and can also use urlsegments and all the great pw stuff

welcome and have fun with PW

edit: use caution what settings you use for "trailing slashes" or you may point your form to a 301 redirect. it can make a difference if you use /tools/contact or /tools/contact/