1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Help with Bootstrap Contact Form

Discussion in 'Web Design & Development' started by howard.a.s, Jul 9, 2018.

Advertisement
  1. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    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:
    <?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:

    PHP:
    // 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:

    PHP:
    // 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. :)
     
    Last edited: Jul 9, 2018
  2. EspressoBean

    EspressoBean

    Joined:
    Feb 29, 2016
    Messages:
    263
    I am a bit confused as to what you are trying to achieve here, can you please rewrite it?
     
  3. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,187
    I feel it could be the double negative if statement in your contact.js:
    Code:
    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:
    Code:
    $('#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;)
     
  4. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    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.
     
  5. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    Not understanding anything about javascript I wouldn't know how to correct the present code, so I guess this option is out! :)
     
  6. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,187
    All we need to do is alter the contact.js code as previously described ...
    Code:
    $(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 ...
     
  7. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    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.
     
  8. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,187
    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':
    HTML:
                  <img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
                  <a href="#" onclick="document.getElementById('captcha').src = 'library/vender/securimage/securimage_show.php?' + Math.random(); return false" class="btn btn-info btn-sm">Show a Different Image</a><br/><br/>
                  <div class="form-group" style="margin-top: 10px;">
                    <input type="text" class="form-control" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
                    <span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
                  </div>
                 
                  <span class="help-block" style="display: none;">Please enter a the security code.</span><br>
    
    and it's pertinent javascript:
    HTML:
    <script src="contact-form.js"></script>
    
    ... 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;)
     
  9. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    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!
     
  10. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,187
  11. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    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?
     
  12. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,187
    Frankly Howard, I wouldn't bother the user with either option. I prefer a subtle approach;)
     
  13. howard.a.s

    howard.a.s Thread Starter

    Joined:
    Jul 22, 2005
    Messages:
    459
    Looks interesting, and certainly less annoying for visitors. I'll give it a try and let you know how I get on. Thanks Jim. :)
     
  14. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...

Short URL to this thread: https://techguy.org/1212644

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice