Hi
Have something strange going on over here.
I have made up the Couch form below and I was testing it in Chrome during the configuration.
I made it up until it was perfect, it works perfectly now.
I started to crossbrowser test the website and only the form doesn't work in Firefox and Safari.
When I click the submit button of a correctly filled in form, there is nothing happing.
No success message, no mail send.
(when I submit and there is a required field missing, the validation message is shown though)
I'm also using the script below I found on the forum to use forms into a bootstrap modal.
I tought it could be something with this but I turned it of and there is no difference.
Would be beautiful if someone sees a missing/broken part in this code...
Thanks!
The javascript for form in bootstrap modal
Have something strange going on over here.
I have made up the Couch form below and I was testing it in Chrome during the configuration.
I made it up until it was perfect, it works perfectly now.
I started to crossbrowser test the website and only the form doesn't work in Firefox and Safari.
When I click the submit button of a correctly filled in form, there is nothing happing.
No success message, no mail send.
(when I submit and there is a required field missing, the validation message is shown though)
I'm also using the script below I found on the forum to use forms into a bootstrap modal.
I tought it could be something with this but I turned it of and there is no difference.
Would be beautiful if someone sees a missing/broken part in this code...
Thanks!
- Code: Select all
<cms:form id="modal-form" class="modal-form" action="" method="post">
<cms:if k_success>
<p class="bg-success">Thanks! Your offer request is send succesfully. You will receive an email with your form details and we will get back to you soon!</br>
<button type="button" class="btn btn-sm" data-dismiss="modal">Close window</button>
</p>
<cms:embed 'modal_mail.html' />
</cms:if>
<div class="col-md-6">
<fieldset>
<legend>Personal information</legend>
<div class="form-group col-lg-12">
<label>Name / company name*</label>
<cms:input type="text" name="name" class="form-control" id="" value="" placeholder="Name" required="1" />
<cms:if k_error_name>
<p class="error bg-danger" style="display:block;">Fill in your name</p>
</cms:if>
</div>
<div class="form-group col-lg-6">
<label>Email Address*</label>
<cms:input type="text" name="email" class="form-control" id="" value="" placeholder="E-mail address" required="1" validator="email" />
<cms:if k_error_email>
<p class="error bg-danger" style="display:block;">Fill in a valid e-mailaddress</p>
</cms:if>
</div>
<div class="form-group col-lg-6">
<label>Phone*</label>
<cms:input type="text" name="phone" class="form-control" id="" value="" placeholder="Phone" required="1" />
<cms:if k_error_phone>
<p class="error bg-danger" style="display:block;">Fill in your phonenumber</p>
</cms:if>
</div>
</fieldset>
<fieldset>
<legend>Vehicle information</legend>
<h4>Dimensions (m)</h4>
<div class="form-group col-lg-4">
<label>Length</label>
<cms:input type="text" name="length" class="form-control" id="" value="" placeholder="Length" />
</div>
<div class="form-group col-lg-4">
<label>Width</label>
<cms:input type="text" name="width" class="form-control" id="" value="" placeholder="Width" />
</div>
<div class="form-group col-lg-4">
<label>Height</label>
<cms:input type="text" name="height" class="form-control" id="" value="" placeholder="Height" />
</div>
<h4>Palletized/boxed</h4>
<div class="form-group col-lg-4">
<cms:input type="radio" name="shipping" id="" opt_values="Palletized || Boxed" />
</div>
</fieldset>
</div>
<div class="col-md-6">
<fieldset>
<legend>Location -> Destination</legend>
<div class="form-group col-lg-6">
<label>Present location*</label>
<cms:input class="form-control" type="dropdown" name="location_start" opt_values="<cms:embed 'country_list.html' />" required="1" />
<cms:if k_error_location_start>
<p class="error bg-danger" style="display:block;">Fill in the present location of your vehicle</p>
</cms:if>
<label>Postal code</label>
<cms:input type="text" name="postal_start" class="form-control" id="" value="" placeholder="Postal code present location" required="1" />
</div>
<div class="form-group col-lg-6">
<label>Final destination*</label>
<cms:input class="form-control" type="dropdown" name="location_dest" opt_values="<cms:embed 'country_list.html' />" required="1" />
<cms:if k_error_location_dest>
<p class="error bg-danger" style="display:block;">Fill in the requested final destination of your vehicle</p>
</cms:if>
<label>Postal code</label>
<cms:input type="text" name="postal_dest" class="form-control" id="" value="" placeholder="Postal code final destination" required="1" />
</div>
</fieldset>
</div>
<div class="col-md-12 text-center button-wrapper">
<button type="submit" class="btn btn-default orange" >Send</button>
</div>
</cms:form>
The javascript for form in bootstrap modal
- Code: Select all
$(document).ready(function() {
$("#modal-form").submit(function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(data) {
$("#modal-form").html($(data).find("#modal-form").children());
}
});
});
});
