Hi,

I tried adding the contact form using this plugin: http://octobercms.com/plugin/laminsanneh-flexicontact

Problem is that when I have done that and do a preview it hasn't added the form on the page. When I manually add html for it it simply sends all the form data through GET and nothing happens.

What could be a reason for this?

Thanks in advance, Martin

@me1232

How have you added the plugin to the page?

I forgot to add {% component "contactForm" %} so it works now.

However I want custom design for it and here is what I have.

JS:

$(function() {
    $("#clickHireUs").click(function (e) {
        e.preventDefault();
        $("#submitHireUs").click();
    });
});

HTML:

<form role="form"

  data-request="{{ __SELF__ }}::onMailSent"
  data-request-update="'{{ __SELF__ }}::confirm': '.confirm-container'"
  data-request-success="$('.form-groups').hide(1000)">

    <div class="form-groups">
        <div class="row half no-collapse-1">
            <div class="6u">
                <input type="text" name="name" placeholder="Name" />
            </div>
            <div class="6u">
                <input type="text" name="email" placeholder="Email" />
            </div>
        </div>
        <div class="row half">
            <div class="12u">
                <input type="text" name="subject" placeholder="Subject" />
            </div>
        </div>
        <div class="row half">
            <div class="12u">
                <textarea name="body" placeholder="Message" rows="7"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="12u">
                <ul class="buttons">
                    <li><a href="#" id="clickHireUs" class="button special">Send Message</a></li>
                </ul>
            </div>
        </div>
        <button type="submit" id="submitHireUs" style="display: none"></button>
    </div>

    <div class="confirm-container">
    <!--This will contain the confirmation when the email is successfully sent-->
    </div>
</form>

Problem now is that it ignores e.preventDefault() for some reason and sends form bypassing AJAX framework..

Question is how do I submit this form with all it's data to AJAX framework to handle it?

You don't need to use JQuery to process the form, just paste the {% component 'contactForm' %} into the page, and that's it.

If you want to customise the layout, look in [PLUGINS > LAMINSANNEH > FLEXICONTACT > COMPONENTS > CONTACTFORM > default.htm], no need for JQuery at all.

Yeah I know but I want to add some extra visual functionality. For example, if error occurs I would show an error message somewhere instead of current alert.

How would I go about doing this?

Yeah I really need help with this. Trying to override contact form AJAX implementation with Javscript API.

Here is my up to date code...

HTML:

<form role="form">
        <div class="form-groups">
            <div class="row half no-collapse-1">
                <div class="6u">
                    <input type="text" name="name" placeholder="Name" />
                </div>
                <div class="6u">
                    <input type="text" name="email" placeholder="Email" />
                </div>
            </div>
            <div class="row half">
                <div class="12u">
                    <input type="text" name="subject" placeholder="Subject" />
                </div>
            </div>
            <div class="row half">
                <div class="12u">
                    <textarea name="body" placeholder="Message" rows="7"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="12u">
                    <ul class="buttons">
                        <li><button type="submit" id="submitHireUs" class="button special">Send Mesage</button></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="confirm-container">
        <!--This will contain the confirmation when the email is successfully sent-->
        </div>
    </form>

Javascript:

$(function() {

    $("#submitHireUs").submit(function (e) {
        $(this).closest("form").request('onMailSent', {
            success: function (data) {
                $('.form-groups').hide(1000);
            },
            update: {
                confirm: '.confirm-container'
            }
        });
        e.preventDefault();
    });
});

Form for some reason is sent as simple GET request without JS. Any help here would be appreciated.

P.S. Does the component need to be attached to the page if I'm not using {% component "contactForm" %} in it?

Last updated 10 years ago

Yeah I really need help with this. Trying to override contact form AJAX implementation with Javscript API. Here is my up to date code...

HTML:

<form role="form">
    <div class="form-groups">
        <div class="row half no-collapse-1">
            <div class="6u">
                <input type="text" name="name" placeholder="Name" />
            </div>
            <div class="6u">
                <input type="text" name="email" placeholder="Email" />
            </div>
        </div>
        <div class="row half">
            <div class="12u">
                <input type="text" name="subject" placeholder="Subject" />
            </div>
        </div>
        <div class="row half">
            <div class="12u">
                <textarea name="body" placeholder="Message" rows="7"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="12u">
                <ul class="buttons">
                    <li><button type="submit" id="submitHireUs" class="button special">Send Mesage</button></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="confirm-container"></div>
</form>

Javascript:

$(function() {
    $("#submitHireUs").submit(function (e) {
        $(this).closest("form").request('onMailSent', {
            success: function (data) {
                $('.form-groups').hide(1000);
            },
            update: {
                confirm: '.confirm-container'
            }
        });
        e.preventDefault();
    });
});

Form for some reason is sent as simple GET request without JS. Any help here would be appreciated.

P.S. Does the component need to be attached to the page if I'm not using {% component "contactForm" %} in it? P.P.S. Editing posts is broken as well as html tags should be escaped.. :)

Hi Martin

Looking at that latest JS, you're targeting the wrong events. I think, I'm not a great JS programmer but I've always used something like below to do custom form validation.

$(function() {
    $("#submitHireUs").on('click', function(event) {
        event.preventDefault();
        // Your code here
    });
});

I can't help with the rest sorry, as I haven't played with the front end forms yet, but hopefully this will help you.

Ok, data is definetly not properly sanitized here in the forum. Suffers from xss!

Last updated 10 years ago

Hi Martin, if you want to still handle errors differently to the popup alert. Add this data attribute and set any javascript you want to run.

data-request-error="alert('Error occured');"

The above will alert the string "Error Occured" but you can do anything in there.

I wrote the plugin, so please donot hesitate to ask me any questions or if you see any issues or bugs. Thanks for using the plugin.

Last updated 10 years ago

Just sorted it out. Thanks everyone who helped as it got me to the result I wanted. Here is a simplified version that makes and handles all requests for the contact form in javascript.

$(function() {
    $("#submit").click(function (e) {
        if ($("#submit").text() != "Please Wait...") {
            $(this).closest("form").request('contactForm::onMailSent', {
                success: function (data) {
                    $('.form-groups').slideUp(1000, function () {
                        $(".confirm-container").html(data["contactForm::confirm"]).fadeIn();
                    });
                },
                update: {
                    'contactForm::confirm': '.confirm-container'
                },
                error: function ($el, context, textStatus, jqXHR) {
                    alert($el.responseText);
                },
                complete: function () {
                    $("#submit").text("Send Message");
                }
            });
        }

        $("#submit").text("Please Wait...");
        e.preventDefault();
    });
});

Thanks for this Martin, really good job!

Just one question, you said you wanted to show custom error messages rather than alerts, so how would you integrate that functionality in the method above? I only ask because the method you've written above is pretty much what the Ajax framework does already, and you can return custom alerts from the PHP "onMailSent" function, so just wondering how you'd show custom visual changes / errors?

Because you alert the $el.responseText, is there a way of customising that for different types of errors with different messages?

Last updated 10 years ago

I stripped down this example just to show that this works. I have my own custom styles and frontend methods to show notifications/warnings/errors which simply replaces the alert method but still uses the responseText to get the error message.

Basically what I have for error message is this: Ex.System.showError($el.responseText) which shows error message with custom styling above the form.

Hope it helps ;)

I don't think there is private messaging system here but you can find me on Facebook if you want by searching "Martin Tale" and we can continue discussion. Because I think this thread has been resolved now. :)

As per intruction I added below code but for not working, just refresh the page after click submit button.

<form class="flexiContactForm" role="form" data-request="{{ SELF }}::onMailSent" data-request-update="'{{ SELF }}::confirm': '.confirm-container'">

    </form>

Added: == {% framework extras %}