# Help with Bootstrap Contact Form



## howard.a.s (Jul 22, 2005)

Hello everyone,

I have been doing my best to set up a working contact form following the steps in these tutorials:

https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

https://bootstrapious.com/p/bootstrap-recaptcha

I've created a test page here:

http://www.hypnohealth.uk/contact.html

Following the tutorials, I have replaced the example email addresses in contact.php with known working email addresses, although for the purposes of this post I have changed the first part of these email addresses to avoid spamming.

Unfortunately, no matter what I try the form does not submit.


```
<?php
// require ReCaptcha class
require('recaptcha-master/src/autoload.php');

// configure
// an email address that will be in the From field of the email.
$from = '[email protected]';

// an email address that will receive the email with the output of the form
$sendTo = '[email protected]';

// subject of the email
$subject = 'New message from contact form';

// form field names and their translations.
// array variable name => Text to appear in the email
$fields = array('name' => 'Name', 'surname' => 'Surname', 'phone' => 'Phone', 'email' => 'Email', 'message' => 'Message');

// message that will be displayed when everything is OK :)
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';

// If something goes wrong, we will display this message.
$errorMessage = 'There was an error while submitting the form. Please try again later';
```
In the original source code the following lines appear as:


```
// an email address that will be in the From field of the email.
$from = 'Demo contact form <[email protected]>';

// an email address that will receive the email with the output of the form
$sendTo = 'Demo contact form <[email protected]>';
```
and I was wondering whether I should insert my email addresses like so:


```
// an email address that will be in the From field of the email.
$from = 'Demo contact form <[email protected]>';

// an email address that will receive the email with the output of the form
$sendTo = 'Demo contact form <[email protected]>';
```
but after trying this and finding no difference I became pretty confused. This being the case, please can anyone suggest what I might be overlooking?

Might this problem be due to my web host not allowing forms such as this to be processed?

For the record, here is a list of enabled/disabled functions on the server in question:

http://themetaldetective.co.uk/info.php

Any constructive help and advice gratefully received.


----------



## EspressoBean (Feb 29, 2016)

I am a bit confused as to what you are trying to achieve here, can you please rewrite it?


----------



## JiminSA (Dec 15, 2011)

I feel it could be the double negative if statement in your contact.js:

```
if (!e.isDefaultPrevented())
```
 - This code does not seem to prevent the default submit (it just tests to see if it has been set and I guess the double negative says "hey it's in prevent mode, let's get Ajaxing ..."), but I don't see where it has been set!?
I have never seen an Ajax submit that didn't use something like the following logic, to first prevent the default and then allow Ajax to do it's thing:

```
$('#contact-form').on('submit', function (e) {
  e.preventDefault();
  // Do your Ajax request here.
}
```
Quick tip ... make sure your curly brackets and curved brackets all pair up if you alter the current contact.js


----------



## howard.a.s (Jul 22, 2005)

Hi Jim! Long time no speak  I hope you and yours are all okay. So, from what you are saying, the problem probably isn't due to something I've done or not done? It seems like whenever I need to have dealings with a contact form I rarely seem to find things straightforward. There's always something I come unstuck on. Previous times I've struggled getting the Google Captcha to work, whereas this time Captcha works okay and it's the submit that's the problem. If this form is likely to be a pain to get working, please are you able to suggest an easy to set up and reliable alternative including validation and Google Captcha? Thanks in advance for any help you might be able to offer.


----------



## howard.a.s (Jul 22, 2005)

Not understanding anything about javascript I wouldn't know how to correct the present code, so I guess this option is out!


----------



## JiminSA (Dec 15, 2011)

All we need to do is alter the contact.js code as previously described ...

```
$(function () {

    // init the validator
    // validator files are included in the download package
    // otherwise download from http://1000hz.github.io/bootstrap-validator

    $('#contact-form').validator();


    // when the form is submitted
    $('#contact-form').on('submit', function (e) {

        // if the validator does not prevent form submit
        e.preventDefault();
        var url = "contact.php";

        // POST values in the background the the script URL
        $.ajax({
            type: "POST",
            url: url,
            data: $(this).serialize(),
            success: function (data)
            {
                // data = JSON object that contact.php returns

                // we recieve the type of the message: success x danger and apply it to the
                var messageAlert = 'alert-' + data.type;
                var messageText = data.message;

                // let's compose Bootstrap alert box HTML
                var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                
                // If we have messageAlert and messageText
                if (messageAlert && messageText) {
                    // inject the alert to .messages div in our form
                    $('#contact-form').find('.messages').html(alertBox);
                    // empty the form
                    $('#contact-form')[0].reset();
                }
            }
        });
        return false;
    })
});
```
... and that 'should' work - give it a go, Howard, see what happens ...


----------



## howard.a.s (Jul 22, 2005)

Hello Jim and apologies for my delay in reply to your previous message. Your help and advice is always greatly appreciated.

I tried making the changes you suggest, but still had no luck in getting the form to send the information entered. In frustration, I tried experimenting with a form I had previously used on another website and which I knew worked okay.

I have added this working form to my webpage and uploaded this to my test folder. Here is the link http://www.hypnohealth.uk/contact.php

Please do you know whether it would be a simple matter for me to add Google Captcha to this form instead of using the existing system, and how I might go about making the necessary alterations?

As always, any advice would be gratefully received.


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Please do you know whether it would be a simple matter for me to add Google Captcha to this form instead of using the existing system, and how I might go about making the necessary alterations?


It's fairly straightforward adding Google Captcha as per _*this tut*_ ...
You would need to remove the html code pertaining to the existing 'Bot Trap':

```
[IMG]library/vender/securimage/securimage_show.php[/IMG]
              [URL=#]Show a Different Image[/URL]

                Please enter the code displayed within the image.

              Please enter a the security code.
```
and it's pertinent javascript:

```

```
... replacing them with yourGoogle code as per the tut.
From a user's point of view, I prefer using reCaptcha (adhering to the KISS principal), but whatever rocks yer boat


----------



## howard.a.s (Jul 22, 2005)

Hi Jim,

Thanks for your reply. I actually already attempted to follow a tutorial (not the same one you have posted the link to) in order to integrate the Google code into my existing page. I'm pretty certain that I commented out the same section of bot trap code you highlight and broke the link to the existing javascript. I then dropped the new Google code in to my html, plus the link to the Google JS before proceeding to upload and test my page. The captcha seemed to work properly, but the form would not send. Not sure whether I was doing something wrong, or overlooking something simple, was the main reason behind why I posted back to this thread for advice. Anyway, I'll try again and see how I get on before posting back with my findings. As they say, watch this space!


----------



## JiminSA (Dec 15, 2011)

Cool


----------



## howard.a.s (Jul 22, 2005)

Okay, so I've taken my existing code, commented out the bot check section and the link to the js, replacing these with the code snippets provided by Google after signing this domain up for reCAPTCHA. Incidentally, when I visit my Google reCAPTCHA account page there is a message highlighted in red which says 'We detected that your site is not verifying reCAPTCHA solutions. This is required for the proper use of reCAPTCHA on your site. Please see our developer site for more information.' Not understanding what this means or how to make changes to correct this I am immediately at a disadvantage. I have created a test page at http://www.hypnohealth.uk/captcha/contact.php but when I fill out the form and use the captcha validation the images fail to display. Also, when I attempt to send the form, the message that would otherwise pop up across the bottom of the page in green to confirm the message has been sent fails to display and no message arrives in my inbox. Clearly I have problems! What would be your view on my continuing to use my original and working page here http://www.hypnohealth.uk/contact.php - and whether the bot check it provides gives as good a level of anti-spam protection as the Google check?


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Clearly I have problems! What would be your view on my continuing to use my original and working page here http://www.hypnohealth.uk/contact.php - and whether the bot check it provides gives as good a level of anti-spam protection as the Google check?


Frankly Howard, I wouldn't bother the user with either option. I prefer *a subtle approach*


----------



## howard.a.s (Jul 22, 2005)

Looks interesting, and certainly less annoying for visitors. I'll give it a try and let you know how I get on. Thanks Jim.


----------

