Ajax Contact us form

Ajax Contact us form

Created 8 years ago by bloveless

Here is how I created an ajax contact us form using the contact us plugin.

{% set form = form('contact')
    .fields({
        'subscription_type': {
            'label': 'Subscription Type',
            'placeholder': 'Subscription Type',
            'type': 'anomaly.field_type.select',
            'config': {
                'options': {
                    'Free Trial' : 'Free Trial',
                    'Standard'   : 'Standard',
                    'Accelerated': 'Accelerated',
                    'Nitro'      : 'Nitro'
                }
            }
        },
        'contact_name': {
            'label': 'Contact Name',
            'placeholder': 'Contact Name*',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
            'required': true
        },
        'dealership_name': {
            'label': 'Dealership Name',
            'placeholder': 'Dealership Name*',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
            'required': true
        },
        'auto_group': {
            'label': 'Auto Group',
            'placeholder': 'Auto Group',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
        },
        'phone': {
            'label': 'Phone',
            'placeholder': 'Phone*',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
            'required': true
        },
        'address': {
            'label': 'Address',
            'placeholder': 'Address',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
        },
        'city': {
            'label': 'City',
            'placeholder': 'City',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
        },
        'state': {
            'label': 'State',
            'placeholder': 'State',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
        },
        'zip_code': {
            'label': 'Zip Code',
            'placeholder': 'Zip Code',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
        },
        'email': {
            'label': 'Email',
            'placeholder': 'Email*',
            'type': 'anomaly.field_type.email',
            'class': 'blank',
            'required': true
        },
        'dealer_website_address': {
            'label': 'Dealer Website Address',
            'placeholder': 'Dealer Website Address*',
            'type': 'anomaly.field_type.text',
            'class': 'blank',
            'required': true
        },
        'other_notes': {
            'label': 'Other Notes',
            'placeholder': 'Other Notes',
            'type': 'anomaly.field_type.textarea',
            'class': 'blank',
        }
    })
    .ajax(true)
    .to('psadler@boughtacar.com')
    .from('{email}').get %}

{{ form.open({id: 'contactform', name: 'contactform'})|raw }}

<fieldset>
    <div id="contact-us-subscription-type" class="styled-select slate">
        {{ form.fields.subscription_type.input|raw }}
    </div>
    {{ form.fields.contact_name.input|raw }}
    {{ form.fields.dealership_name.input|raw }}
    {{ form.fields.auto_group.input|raw }}
    {{ form.fields.phone.input|raw }}
    {{ form.fields.address.input|raw }}
    <div class="row">
        <div class="col-md-4">
            {{ form.fields.city.input|raw }}
        </div>
        <div class="col-md-4">
            {{ form.fields.state.input|raw }}
        </div>
        <div class="col-md-4">
            {{ form.fields.zip_code.input|raw }}
        </div>
    </div>
    {{ form.fields.email.input|raw }}
    {{ form.fields.dealer_website_address.input|raw }}
    {{ form.fields.other_notes.input|raw }}
</fieldset>

<input type="submit" class="submit" id="submit" value="Send Message" />

{{ form.close|raw }}

And the supporting javascript

$('#contactform').submit(function(){
        var action = $(this).attr('action');
        $("#message").slideUp(250,function() {
            $('#submit')
                .after('<img src="' + CONTACT_FORM_LOADER + '" class="loader" />')
                .attr('disabled','disabled');

            var postData = {
                _token: $('[name=_token]').val(),
                contact_name: $('[name=contact_name]').val(),
                dealership_name: $('[name=dealership_name]').val(),
                auto_group: $('[name=auto_group]').val(),
                phone: $('[name=phone]').val(),
                address: $('[name=address]').val(),
                city: $('[name=city]').val(),
                state: $('[name=state]').val(),
                zip_code: $('[name=zip_code]').val(),
                email: $('[name=email]').val(),
                dealer_website_address: $('[name=dealer_website_address]').val(),
                other_notes: $('[name=other_notes]').val()
            };

            $.post(action, postData,
                function(data){

                    $('#contactform input.has-error').removeClass('has-error');

                    $('#message').addClass('hidden');
                    $('#message-errors').addClass('hidden');

                    if(data.success) {
                        $('#message').removeClass('hidden');
                        $('#contactform').slideUp(500);
                    }

                    if(!data.success) {
                        $('#message-errors').removeClass('hidden');
                        for(var propertyName in data.errors) {
                            $('[name=' + propertyName + ']').addClass('has-error');
                        }
                    }

                    $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
                    $('#submit').removeAttr('disabled');
                }
            );
        });
        return false;
    });