Adding Form to CTUS Page

[Matt Zimmermann]

RTHOMASDESIGN - Swapping out for jQuery is a relatively straight forward process https://www.miva.com/forums/forum/de...ash-for-jquery

[RTHOMASDESIGN]

Really wish this theme defaulted to jQuery.

[lesliekirk]

Well...the second part is already in place because the code was copied from a site that used the script file. As for changing over to jQuery...

It looks like at this point in time there is no easy way to get a contact for in Shadows?

[Matt Zimmermann]

Hi Leslie,

As long as you have changed over to jQuery and updated the form code with the proper IDs, you should be able to drop it in.

[lesliekirk]

So can I copy the jsCTUS function and add it to the script.js file?

jsCTUS: function () {
        // ---- Additional Server Security To Help Against Spambots ---- //
        $.ajax({
            cache: true,
            crossDomain: true,
            dataType: 'script',
            url: '//ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js'
        }).done(function () {
            var contactForm = $('#js-contact-form');
            $('#js-noscript-warning').remove();
            contactForm.show();
            $.get('../forms/token.php', function (tkn) {
                contactForm.append('<input type="hidden" name="mms" value="' + tkn + '" />');
            });

            // ---- Form Validation ---- //
            contactForm.validate({
                errorContainer: '#js-contact-form div.message',
                errorLabelContainer: '#js-contact-form div.message small',
                errorElement: 'p',
                rules: {
                    contactName: {required: true, minlength: 2},
                    contactEmail: {required: true, email: true},
                    contactComment: {required: true, minlength: 2}
                },
                messages: {
                    contactName: {required: 'Your Name Is Required', minlength: jQuery.validator.format('Your Name must be a minimum of {0} characters!')},
                    contactEmail: {required: 'Your Email Address Is Required', email: 'Your Email Address must be formatted like [email protected]'},
                    contactComment: {required: 'Comments or Questions Are Required', minlength: jQuery.validator.format('Your Message must be a minimum of {0} characters!')}
                },
                highlight: function (element, errorClass) {
                    $(element.form).find('label[for=' + element.id + ']').addClass(errorClass);
                },
                unhighlight: function (element, errorClass) {
                    $(element.form).find('label[for=' + element.id + ']').removeClass(errorClass);
                },
                submitHandler: function (form) {
                    if ($(this).data('formstatus') !== 'submitting') {
                        var form = contactForm,
                            formData = form.serialize(),
                            formUrl = form.attr('action'),
                            formMethod = form.attr('method')

                        form.data('formstatus', 'submitting');
                        $.ajax({
                            url: formUrl,
                            type: formMethod,
                            data: formData,
                            success: function(data, textStatus, jqXHR) {
                                // Show reponse message
                                if (data.search(/error/i) != -1) {
                                    $('#js-contact-form div.message').fadeOut(200, function () {
                                        $(this).removeClass('message-info').addClass('message-error').text(data).fadeIn(200);
                                    });
                                }
                                else {
                                    $('#js-contact-form div.message').removeClass('message-error').addClass('message-success').text(data).fadeIn(200);
                                };
                                form.data('formstatus', 'idle');
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                console.log(errorThrown);
                                form.data('formstatus', 'idle');
                            }
                        });
                    };
                }
            });
        });
    },

[Matt Zimmermann]

Hi Leslie,

There are several AJAX calls in the functions for the old form in the scripts.js file as well as calls to an additional PHP file called token.php. Generally, IDs are not used in the new ReadyThemes so those would need to be added as needed by the JavaScript.

[lesliekirk]

Hi Leslie,

You would have to check for any other JavaScript errors and make sure the IDs being used on the form correspond to the JavaScript you are using.

Are there other javascript files that are needed for this form? I'm not getting any sort of javascript errors but I noticed that the Shadows scripts.js doesn't have any sort related to the contact form such as js-contact-form like the scripts.js from other ReadyThemes. I'm thinking this is part of the problem, yes?

[Matt Zimmermann]

Hi Leslie,

You would have to check for any other JavaScript errors and make sure the IDs being used on the form correspond to the JavaScript you are using.

[lesliekirk]

Hi Leslie,

That second error is being generated by the PHP file which is probably not seeing the tokens in the form which were added for preventing spam purposes.

I understand the second error - I just don't understand why I still see the first message.

[Matt Zimmermann]

Hi Leslie,

That second error is being generated by the PHP file which is probably not seeing the tokens in the form which were added for preventing spam purposes.

[lesliekirk]

We've replaced CASH with jQuery on dev.themartialartsstore.com and all appears to be working properly. We've added a Hero Slider [SFNT], made some adjustments on the product page, etc.

I was thinking you were trying to implement the CTUS form but I'm not seeing it on your dev site.

[lesliekirk]

Hi Leslie,

That error seems to be related to a Mad Mimi form https://madmimi.com/

I found where that error came from and commented it out (it was a newsletter subscribe form)

I am still seeing the "You must javascript enabled to use this form." message and cannot submit the form "Error: Form processing halted for suspicious activity!"

[lesliekirk]

Hi Leslie,

That error seems to be related to a Mad Mimi form https://madmimi.com/

Yeah and now to figure out where on earth that is coming from...

[Matt Zimmermann]

Hi Leslie,

That error seems to be related to a Mad Mimi form https://madmimi.com/

[lesliekirk]

Hi Leslie,

If you are receiving that error, then you might check to see if there are any errors in your JavaScript console; that message should be removed by the code if you are using the functions from an old ReadyTheme.

I'm getting this error

Uncaught TypeError: Cannot read property 'addEventListener' of null
at new Mimi.Signups.EmbedValidation (CTUS.html:252)
at HTMLDocument.<anonymous> (CTUS.html:510)