jonmbake / bootstrap3-contact-form

Bootstrap 3 Contact Form with Captcha

=======================

Bootstrap 3 Contact Form with Google's reCaptcha

Demo: http://jonmbake.github.io/bootstrap3-contact-form/

Blog Post: Bootstrap 3 Contact Form with Captcha

Follow-Up Blog Post: A Better Contact Form

=======================

A simple bootstrap 3 contact form using Google's reCAPTCHA. Submitted messages are sent to a specified email address using SMTP with support for SSL or TLS transport.

A Note On Security: PHPMailer, which this contact form is dependent on, had a major security vulnerability fixed in 5.2.20. It is recommended to update to 1.4.

Version History

Versions	Major Enhancement
1.4.1	Bumped PHPMailer version to 5.2.21.
1.4	Add support for cURL when POSTing to verify reCAPTCHA.
1.3	Add support for Bootstrap Validator. If provided, will use it to validate contact form.
1.2	Replaced PHP SecureImage Captcha with Google's reCAPTCHA.
1.1	Used PHPMailer. Support for SSL/TLS transport. Extracted configuration values to environment variables.
1.0	First Version - Used PHP SecureImage and PHP mail function

Dependencies

PHP

• version > 5.2.0
• PHPMailer (included in library/vender/php_mailer/**)

HTML/JS

• Bootstrap 3 version >3.1
• jQuery
• Optional International Telephone Input (included in assets/vender/intl-tel-input/**)- This is used to validate and format the phone input field. Only need this if the phone field is present.

Setting up reCAPTCHA

You must obtain a Site Key and Secret Key from Google. The Site Key must be entered into the Contact Form HTML in the place of the text your_site_key. The Secret Key should be entered as a configuration value (see next section).

Note: Many web servers now force allow_url_fopen=0 and allow_url_include=0 due to security concerns (see: Issue 26). reCAPTCHA verifying will use cURL is if it is installed. If you are having issues verifying reCAPTCHA, most likely you need to install cURL.

Configuration

Configuration values to the contact form are passed in via Environment Variables. The following variables need to be defined:

Name	Description
FEEDBACK_HOSTNAME	Host name for SMTP server
FEEDBACK_EMAIL	Email address to authenticate to SMTP server with
FEEDBACK_PASSWORD	Password to authenticate to SMTP server with
FEEDBACK_ENCRYPTION	If specified will use encryption. Valid values: TLS or SSL
RECAPTCHA_SECRET_KEY	reCAPTCHA secret key.
FEEDBACK_SKIP_AUTH	Optional If specified, will not authenticate with email/password

Environment variables can be specified in a variety of ways. For example, if using Apache (and mod_env is enabled), they can be specified in .htaccess:

SetEnv FEEDBACK_HOSTNAME smtp.gmail.com
SetEnv FEEDBACK_EMAIL [email protected]
SetEnv FEEDBACK_PASSWORD my!password!
SetEnv FEEDBACK_ENCRYPTION TLS
SetEnv RECAPTCHA_SECRET_KEY 7823skdgjksd828sjdgkn

Tip: Environment Variables are used in Sendmail.php. If you don't want to use Environment Variables, you can edit sendmail.php, replacing calls to #getenv with the corresponding configuration value like in this Example Gist.

What If I Don't Want CAPTCHA?

There's a branch for that! Check out the branch: Contact Form without CAPTCHA.

bootstrap3-contact-form's Issues

htaccess variables

Is there any way around using the htaccess variables for email setup

Non required fields not added to email.

Non required fields not added to email. - I understand that is is modification of your script, but it would be good to support unrequited fields too. Currently unrequited fields do not get added to the email.

after i click on submit i getting reCAPTCHA checked failed!

Hello

after i clicked on on submit i getting the following message reCAPTCHA checked failed!

error: reCAPTCHA checked failed!

Hello, I keep receiving this message even though I am allowed to submit the form and reCAPTCHA gives me the OK to do so:
reCAPTCHA checked failed!

Error on submitting form

When I click submit, I get the following error:

TypeError: 'undefined' is not an object (evaluating 'response.responseJSON.message')

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

logs in console Google Chrome

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
POST ...library/sendmail.php 500 (Internal Server Error)
send @ jquery.min.js:6
x.extend.ajax @ jquery.min.js:6
(anonymous function) @ contact-form.js:69
x.event.dispatch @ jquery.min.js:5
v.handle @ jquery.min.js:5

error
An expected error occured while attempting to send the email: SMTP Error: data not accepted.
what to do?

Domain zone .in (error)

$mail->addAddress('[email protected]');

An expected error occured while attempting to send the email: Could not instantiate mail function.

help me please!

Applying to a pre-existing form?

Sorry, If I'm asking in the wrong place, I've built a pre-existing form when I came across this.

Which elements are absolutely necessary, as the form uses the built in validators of Bootstrap.js rather than "help-block"

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">
                                        Name
                                        <span class="text-danger">
                                            *
                                        </span>
                                    </label>
                                    <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
                                </div>
                                <div class="form-group">
                                    <label for="email">
                                        Email Address
                                        <span class="text-danger">
                                            *
                                        </span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-envelope-o fa-2x">
                                            </i>
                                        </span>
                                        <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="subject">
                                        Subject
                                        <span class="text-danger">
                                            *
                                        </span>
                                    </label>
                                    <select id="subject" name="subject" class="form-control" required="required">
                                        <option value="na" selected="">Choose One:</option>
                                        <option value="incorporation">Incorporation Enquiry</option>
                                        <option value="cosec">Company Secretarial Enquiry</option>
                                        <option value="restoration">Restoration/Dissolution Enquiry</option>
                                        <option value="product">Product Enquiry</option>
                                        <option value="property">Property Services Enquiry</option>
                                        <option value="general">General Customer Service</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">
                                        Message
                                        <span class="text-danger">
                                            *
                                        </span>
                                    </label>
                                    <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
                                    placeholder="Message">
                                </textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <button type="submit" class="btn btn-lg btn-primary pull-right" id="btnContactUs">
                                Send Message
                            </button>
                        </div>
                    </div>
                </form>

Phone number validation

Hi,

Is it possible to remove the validation from the phone number form. I would still like the phone number field, but ive found issues using iOS browsers.

Cheers

POST is not allowed

Hi! Thanks for providing this helpful code. I got the recaptcha and everything else (I think) working, but when I click 'send' it gives an error (in red font with a pink background) below the form on the webpage that says

POST is not allowed

The javascript console says:
Failed to load resource: the server responded with a status of 405 (Method Not Allowed)
http://127.0.0.1:62140/content/JeBf4dQBRMV_M_PMAAAG/4G4FdfW/S5Rsr7A/3nvbxFg/RRSwf1C/y5u4VNL/w61FBPP/xaTwicQ/library/sendmail.php

I'm testing this on my local machine. I have php installed on macOS BigSur.

I don't see anything obvious in the sendmail.php file that would return this error message. I'm hoping this is something obvious that I'm overlooking!

Please help - thanks!

Using Form in a Modal

Thanks for this wonderful contact form, Jon! :-)

I have the form working fine on a regular web page. However, I still can't get the form to work in a Bootstrap 4 modal after spending the better part of the last two days trying to find a solution. When attempting to submit the form when its displayed in a modal, everything works fine up to and including the reCaptcha, but then nothing happens upon clicking the send button. I'm learning, but at this point my knowledge of JS is rudimentary at best, so I haven't had any luck with troubleshooting the problem. Among the things I have tried is adding $("#myModal").on('shown.bs.modal', to the beginning of contact-form.js, but it made no difference. Any ideas on how I can make the form work in a modal?

1and1 hosting - problems with smtp auth.

I had some SMTP auth error problem at 1and1 hosting.

Finally I've found the solution here:
https://webolio.wordpress.com/2008/03/02/phpmailer-and-smtp-on-1and1-shared-hosting/

"After googling for a solution and trying different smtp servers, accounts and smtp ports, I decided to switch to sendmail and it worked like a charm! All I needed to do was replace $mail->isSmtp() with:
$mail->isSendMail()"

Email verification

Email verification have a fail because if i write some thing is valid. should be if i write [email protected] is valid.

Question: How to use bootstrap validator

I would prefer to use bootstrap validator. How can I integrate it instead of using the one you built?

https://1000hz.github.io/bootstrap-validator/

Attachment

How about to add support of attachments ?

Small edit to work with smtp.yandex

Hello!
In their web projects I'm using as SMTP to send mail - mail from Yandex. https://yandex.com/support/mail/mail-clients.xml
But there is little restriction, Yandex sends mail only if the mail sender coincides with the mail account has been authorized on the server smtp.yandex.com .
The mail is sent successfully only if the email address of the sender in a contact form (Email Address *) will match the email address of the account to which distribution is authorized on the server ($mail->Username) SMTP yandex.
https://hsto.org/files/1c3/236/f61/1c3236f61ff347aaa736f0178cf37bc6.png

If the contact email of the sender does not match the email through which the sending SMTP server, emails are not sent.
An error occurs:
https://hsto.org/files/97b/73c/8d0/97b73c8d09884118b78c9117b7cb8196.png
https://hsto.org/files/f5c/d85/62f/f5cd8562f8ca4ab68a3f16f5be9538b6.png

As I understand it, this is to prevent spamming attempts.

How can I solve this issue? In the email from the contact form in the "sender" field was added the same email via SMTP which is sending letters.

By the way, on their WordPress sites to send through SMTP I use a plugin https://ru.wordpress.org/plugins/wp-mail-bank/ , through his perfect sent emails with smtp yandex, as this plugin automatically sets the email message's sender to the email which are sent out via SMTP.

I hope it is clear explained. Sorry for my English, I use auto-translator.

To email address

I've looked all through the code... where to you put the email address you want this form to send to? I'm assuming it will be sent to the same address that you set-up to send as on the mailserver?

typo in error message

I think it was meant to say "unexpected" and not "expected"

What to use for FEEDBACK_SKIP_AUTH

What var should I set for FEEDBACK_SKIP_AUTH to skip auth?

Error

Jon,
Thanks for your efforts. I'm a real beginner so js is a mystery.

The form is working sort of: I receive test emails sent from the form but the contact form page never finishes sending. Console info:
Firefox console:
SyntaxError: Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:1
Error: http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js is being assigned a //# sourceMappingURL, but already has one
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery.min.js:5
TypeError: response.responseJSON is undefined contact-form.js:46

Chrome:
Failed to load resource: the server responded with a status of 504 (Gateway Time-out) http://partnersinbpc.com/library/sendmail.php
Uncaught TypeError: Cannot read property 'message' of undefined contact-form.js:46

Any suggestions appreciated!

Thanks for sharing

phpmailer 5.2.7

Phpmailer 5.2.1 has security issuses - phpmailer is now 5.2.7
https://github.com/DMKEBUSINESSGMBH/typo3-mkmailer/tree/master/phpmailer

Beginner reCaptcha issue

I believe I followed all the step in readme file but I get this issue error:invalid-input-secret
Check it out here: http://mycodehobby.com/contact_test.html

Compatibility/security: Replace file_get_contents with cURL function

Many web servers now force allow_url_fopen=0 and allow_url_include = 0 due to security concerns and this creates an incompatibility with the form (PHP warning: file_get_contents(): https:// wrapper is disabled in the server configuration by allow_url_fopen=0 in) when accessing the Google Captcha URL.

second mail user

Hi,

I have implemented your form in a website and all is working fine!

Would it be very difficult to let a second mail send to the user of the form!?

Can you please point me out how to do that?

Thanks! David

Captcha doens't work

Captcha doesn't work (PHP 5.5.9)

http://puu.sh/9RgXO.png

ELI5 Configuration?

I apologize if I should've known this already, but I haven't really ventured much outside of HTML and CSS.

In an attempt to set up this for someone I made an easy website for a while ago, I can't figure out what to configure sendmail.php. I am not using Environment Variables.

//attempt to send email
  $messageBody = constructMessageBody();
  require './vender/php_mailer/PHPMailerAutoload.php';
  $mail = new PHPMailer;
  $mail->CharSet = 'UTF-8';
  $mail->isSMTP();
  $mail->Host = "smtp.gmail.com";
  $mail->SMTPAuth = true;
  $mail->Username = "[email protected]";
  $mail->Password = "my!password";

  $mail->SMTPSecure = 'tls';
  $mail->Port = 587;

  $mail->setFrom($_POST['email'], $_POST['name']);
  $mail->addAddress("[email protected]");
  $mail->Subject = $_POST['reason'];
  $mail->Body  = $messageBody;

What exactly do I put into "Host", "Username", "Password" and "addAddress"? This is out of my comfort zone to say the least.

Issue With Form Dont Finish sending email and dont display sucess massage

Issue With Form Dont Finish sending email and dont display sucess massage.

Stopping XSS attacks.

What features are in place to stop XSS attacks as I do not see any currently.