Bootstrap 3 Contact Modal

In this tutorial we’ll create a Bootstrap 3 Contact Modal.

We’ll also link this to a PHP script that will send the input from the contact modal to ‘your’ e-mail address.

Bootstrap 3 Contact Modal

The contact modal consists of two Bootstrap 3 components:

  1. A Modal
  2. The Form

 

The Modal

The markup you need for the modal is:

Insert the markup above into a div with class ‘container’.

If you’re not yet familiar with how to create a Bootstrap 3 Modal you can find an introduction in this tutorial Bootstrap 3 Modals.

A tutorial how to create a basic Bootstrap 3 template which will load the required Bootstrap and jQuery libraries can be found here: Bootstrap 3 Template with a CDN.

Next we’ll create the contact form that will replace line 12 above (with the ‘…..’) inside the modal-body.

Contact Form

The contact form contains 4 input fields:

  • First Name
  • Last Name
  • Email address
  • Question/Comment

The markup I used for the contact form is:

Each combination of a label and an input field is styled with a class ‘form-group’.

In Bootstrap 3 we set the width of each element with grid classes (‘col-md-4’ etc.).

The input fields in the form will align correctly with Bootstrap version up till 3.0.3. With the release of Bootstrap version 3.1 however the alignment of input-group (used for the e-mail input field) has been changed. To get this input field aligned correctly with version 3.1 you need to add this CSS rule to your style section:

For most of the input fields validation is done with the PHP script that will be the topic of the next section. For the email address field the validation is (also) done is another way. As you can see in the form above the type="email" and the class ‘form-control’ were used to achieve this validation. In the image below you can see the message that appears when a user inserts something other than a correct email address.
E-mail validation

To link our contact form to the PHP script we inserted method="post" and action="send_form_email.php" in line 1. The file name you insert (e.g. ‘send_form_email.php’) should be the same as the name for the PHP file that we’ll create next.

PHP Script

The PHP script will pull the input from the contact form, insert this into an e-mail. This e-mail will be send to the address you insert in line 5 of the PHP script below:

The PHP script above is based on a free PHP script provided by FreeContactForm.

Essential is that you replace the non-existing email address (“your_email@.address.here“) in line 5 with ‘your’ real email address.

Optionally you can also replace the text ‘Your email subject line’ in line 6 with something more appropriate. This text will be inserted into the subject field of the e-mail.

After completion of the script the user is directed to another page. Make sure that you replace the url in line 66 with the url of the page that you want to direct your users to. To make the script
pause for 2 seconds before redirecting to this url I have added a sleep command (line 65).

Save the file (make sure the name you use is the same as that in line 1 of the form e.g. ‘send_form_email.php’.)

Upload the files to a hosting server

Save both files – the HTML file (with the Bootstrap modal and its contact form section) and the PHP file – and upload them to a hosting server (the mail command in the script will only work on a hosting server and not on localhost).

After uploading these files you can fire the modal plugin by inserting the URL for the HTML file into the address bar of your browser.

The demo below shows what the contact modal will look like:

DEMO - Contact Modal

For obvious reasons I haven’t included an e-mail address where the input from the contact form would be send to. With this demo you can see how the PHP validation works etc. After clicking on the ‘send’ button in the demo you will be directed to the home page of this blog (unless the input in the email input field doesn’t meet the validation criteria for that field. Then the form will pause).

In the PHP script validation rules are already included. But my recommendation is to add client-side validation to the form in the Contact Modal. With client-side validation users can first correct any mistakes while filling in the form. There is another tutorial where you can learn how to add client-side validation (and dynamic Bootstrap validation states) to the form in the Contact Modal.

54 comments

Rob - June 19, 2016 Reply

Worked! Nice demo!

Pascal Guillon - May 12, 2016 Reply

Great material.. again! Directly usable, it’s really impressive. So different from all these webpages that try to explain… for people who already master the subject! Many thanks!

John M - January 9, 2016 Reply

Sorry Theo
got my code all messed up .Will try to clean it up and get back to you. Appreciate the reply!!

John M - January 8, 2016 Reply

Hi Theo,
Thanks for the most thorough tutorial on modal php hat I have found yet, however I have a problem. It just won’t send the email!!. I have even resorted to copy and paste the source code from the Demo making the necessary changes, email,(php) and script (html), but still no success – Link provided – if this is any help. Thank you in anticipation (loosing hair quickly)

Theo - January 9, 2016 Reply

Hello John,

looked at your html and php file (through the link you provided): the php file (“send_form_email.php”) doesn’t contain the php code from the tutorial. It only contains a script which refers to a ‘count.php’ file.

David - December 12, 2015 Reply

Hello Theo , thank you for this tutorial . Can you help me ? When I click ” send” , I have an error page . Did I put the PHP? It is called ” form- process.php ” and is in a PHP file. I also changed html two lines ( two errors recognized by W3C).
But I think it comes from the PHP file (identical to yours ) because there is no reativity when I open the form. Thank you for your help, David

Theo - December 13, 2015 Reply

Hello David,

you wrote that the php file is identical to mine, but you get an error(?) page Unfortunately I cannot help you based on this (lack of) information.

John O'Neil - November 8, 2015 Reply

hi,
fantastic work and a great tutorial, BUT, would there be a way to redirect to the present page url or simply make the modal vanish as it does when clicked off and no data is submitted ?

Theo - November 8, 2015 Reply

Hi John,

thanks!

Not sure why you want to direct a visitor to the same page even though they submitted data. Might confuse them. But of course if you want to do this you can. Simply insert the url of the page – that contains the button that will open the modal – into line 66 (with the echo command).

Eivind - November 10, 2015 Reply

Im wondering about the same thing. When I submit the form, I would like it to just disappear and not have to redirect to a URL. How can this be achieved? Its already saying “Thank you”, so I dont see the need to load another page. Im sure thats what John was asking about as well. Thank you for the fantastic guide btw. 🙂

Theo - November 10, 2015 Reply

Hi Eivind,

even if you want the user to have the impression that he/she is staying on the same page you need to insert the url of that page in the echocommand. When the user hits enter the php script is invoked. At the end of the php script you need to insert a step with the instruction what to do next (return to the html page that contains the trigger for the modal).

Cheers, Theo

Eivind - November 10, 2015 Reply

Never, mind. I had made an error while inserting my url.

Frank - November 5, 2015 Reply

Hi Theo,

the script just doesn’t work for me. When I press the send button in just redirects me to siteurl/send_form_email.php even though I have set a different url in the echo line.

And I don’t recieve any email either.

Any ideas? Could give you site url if you’d be willing to check it.

Thanks

Theo - November 5, 2015 Reply

Hi Frank,

the redirect you get means that the action (in the html file) which should run the php file isn’t working. So it has nothing to do with the url mentioned as part of the echo command. Because the php file doesn’t run correctly this also explains why you do not receive the email.

There are several things you should check: check the line with the name of the php file for any typos; did you give the same name to the php file as what you inserted in the html file; are the html file and the php file in the same directory; did you run the files on a server?

Regards,

Theo

Tony - November 1, 2015 Reply

Very good guide.
However the send mail function in php seems to be blocked to some email service.
Is there a way to setup authentication to avoid send mail been blocked or marked as spam?

Thanks a lot for the guide, very very useful.

Theo - November 1, 2015 Reply

Hi Tony,

thanks!

Since I didn’t immediately recognize your problem I tried to replicate it. Based on my replications the blocking / being send to the spam folder has nothing to do with the php script.

I ran 4 different trials:

In two of those trials I inserted existing email addresses in the contact form. Both of these messages arrived in my inbox.

For the third trial I inserted a non existing email address (‘notvalid@mail.com’). This message was marked as spam by my email service.

For the fourth trial I also inserted a non existing email address but ‘from’ an existing email service (‘theotutsme@gmail.com’). This messages was also diverted to my spam folder.

Did you insert a valid email address in the contact form for your trials?

Theo

LordLiverpool - October 3, 2015 Reply

Hello Theo

Is this tutorial missing some CSS? My modal form is a blank grey, not the nice shades of green as in your demo.

Cheers

Theo - October 3, 2015 Reply

Hi Michael,

If you’d like to use the exact same shades of green: #73BFC1 as background-color for the modal-body; #1ABC9C as background-color for the modal-header and the button.

LordLiverpool - October 3, 2015 Reply

Hi Theo

1. Thanks for replying.

2. Thanks for the CSS.

3. Thanks very much for the excellent tutorial, keep up the good work!

One other question, is there any way I can line up the left of the submit button with the fields above it?

I’ve tried all the usual CSS tricks. I’m thinking maybe it’s to do with the bootstrap grid?

Cheers

Mike

Theo - October 4, 2015 Reply

Hi Michael,

Thanks!

you wrote “I’ve tried all the usual CSS tricks.”. Have you tried a right margin of 10px for the class btn-custom? When I added this CSS-rule the left side of the send button was aligned with the input fields.

Cheers, Theo

LordLiverpool - October 4, 2015

Hey Theo

That worked perfectly.

I was messing around with margin-left, I didn’t think to adjust the margin right.

Thanks very much for your help Theo.

Cheers

Mike

Bill - May 12, 2015 Reply

I am not receiving my email. Any idea why? where do i go to check my code?

Theo - May 12, 2015 Reply

Hi Bill,

You check your code by comparing it with the code in the tutorial. If you run into problems the best way is to simply copy my code and insert your e-mail address in line 5 of the PHP script. Then upload the files to your server and try it. Make sure you use the same name for the PHP file as in the tutorial. This should always work. Then make step by step modifications to customize it.

Cheers, Theo

aidan - March 25, 2015 Reply

Theo
got everything running fine but once php runs line 66 is redirecting to http://www.xxx.yyy/send_form_email.php which is an absolutely blank and empty page. The code I have entered in line 66 is echo “”; any idea why it is not bouncing back to my website?

Theo - March 25, 2015 Reply

Hi Aidan,

you arrive at an empty page because you didn’t insert anything between the two quotation signs after echo. The script shows an empty page because it has nowhere to go to. Use what I inserted after echo and replace the URL for my website in line 66 with that of your website and the name of the page on your website e.g. index.php).

Cheers, Theo

PS I replaced the UrL in your comment with http://www.xxx.yyy

aidan - March 25, 2015 Reply

Theo
I do have content between the “” and inside the meta tag in line 66 as follows http-equiv='refresh' content=\"0; url=http://www.yyy.xxx/index.php"
but it still turns up an empty page. This is my first attempt at php and a php code checker indicates the following – Parse error: syntax error, unexpected end of file, expecting variable (T_VARIABLE) or ${ (T_DOLLAR_OPEN_CURLY_BRACES) or {$ (T_CURLY_OPEN) in your code on line 69.
Sorry I am not an expert but I am learning slowly

Theo - March 25, 2015 Reply

Hi Aidan,

change ‘index.php’ into ‘index.html\’. Your home page is ‘index.html’ and the backslash is needed for the special ” character.

Cheers, Theo

aidan - March 25, 2015 Reply

Theo thanks for the help – replaced the backslash in front of the speech mark at the end of the url and the redirection was faultless. May try some more php now!!

Salomao - March 18, 2015 Reply

Hi Theo, thank you for the tutorial, great one.
Just one thing, the thank you popover always appear when I click the submit button, even when it gives a error message, is there a way to validate it and appear only when everything is go to go?
Thank you again.

Theo - March 19, 2015 Reply

Hi Salomao,

Thanks!

To first validate and then display the popover I’d suggest using the formvalidation plugin (formerly: BootstrapValidator plugin) as described in my tutorial http://tutsme-webdesign.info/bootstrap-validation-states-dynamically/

If you look at the examples page for that plugin you’ll see a section called “Enabling the submit button”. You can use this to create a form where the submit button is only enabled when input fields contain valid input. And then tie the thank you popover to the ‘success.field.fv’ state.

PS Use a delay option for the popover

Cheers, Theo

Joe A - January 11, 2015 Reply

Thanks for the great tutorial. You helped me solve a couple of user experience issues with using a modal for a contact form.

Daniel - January 9, 2015 Reply

Hi,
thanks for this wonderful tutorial!
I got the contact form working, but I then tried to add a telephone input and now it won’t work!
Instead of redirecting the page to my page after I hit send it will lead me to the send_form_email.php website that is just blank.
I hope someone can help me since a telephone input is necessary for my type of form!

Theo - January 10, 2015 Reply

Hi Daniel,

here’s what needs to be inserted to add a phone number to the form and script:

In contact form use mark up for other div’s with class “form-group” (e.g. used for Last Name) and change to:
for=”telephone”>Phone Number

id=”telephone” name=”telephone” placeholder=”Phone Number”

Insert in PHP script between lines 19 and 20:
!isset($_POST['telephone']) ||

Insert in PHP script between lines 26 and 27 (original numbering):
$telephone = $_POST['telephone']; // not required

Insert in PHP script between lines 56 and 57 (also original numbering):
$email_message .= "Phone Number: ".clean_string($telephone)."\r\n";

Cheers, Theo

Andy L. - December 27, 2014 Reply

Thank you very much for this tutorial, I just now got my version of it to work.

I’m hoping you’ll spare a minute to clear something up: I wanted to plug in my own variable names, i.e. use “contact_name”, “contact_email”, and “contact_msg” in place of “first_name”, “email” and “comments” respectively. After a lot of frustration with error-checking not working and message not being sent at all, I found that I had to leave the ID and Name for the Email Address form-group (in the HTML) as “email”. Can you confirm that this is indeed the case: The ID and Name attributes in the Email Address form-group need to be kept named “email”?
Thanks!

Theo - December 28, 2014 Reply

Hi Andy,

you can change the ID’s to anything you want. But I would advice against changing the name’s since these are related to the php-script. My guess is that your experience has to do with changing the name’s and in that way breaking the links required for the php-script (which will validate and send the info from the contact form).

Cheers, Theo

waqas - December 20, 2014 Reply

Thanks for such a great tutorial bro! i am having a little problem my popover background color is not change it’s always white although text color is changing whatever i wants but background color not working

Theo - December 20, 2014 Reply

Thanks!

About the background-color: usually this is due to a typo. Since the other style rules for the popover are working in your case the selector must by correct. Maybe you forgot the # in the background-color value, or some other typo.

Hugo - November 9, 2014 Reply

Just amazing stuff man!
Hugs from Brazil and Dublin
=)

Gregor - November 8, 2014 Reply

Hi Theo,
thanks for that great tutorial!

Mina Habib - October 16, 2014 Reply

Very nice, i just wanted to know if i wanna add an extra field for Telephone, thanks in advance!

Theo - November 18, 2014 Reply

Hi Mina,

thanks.

To add an extra field for Telephone you can use an extra form-group like those for first name and last name. Use input type “tel”. An example of a field for a phone number can be found in this tutorial:
http://tutsme-webdesign.info/bootstrap-form-with-a-script-sending-data-to-a-database/

Validation of a phone number input field is tricky. Examples that I have seen usually only work for phone numbers for a specific country.

Cheers, Theo

Laurent - August 2, 2014 Reply

Hi! your tutorial is really very good and well explained!!! I would like a little help if anyone could! when the user put something wrong in the inputs (the form has errors) the “error information page” is showing up in a new window and not as a popover window like in many sites! thanks in advance!

Theo - August 3, 2014 Reply

Hi Laurent,

thanks for your comment.

I’ll be writing a tutorial about validation in the next week(s) in relation to another tutorial. But looking at your comment (and since the Contact Modal tut was written some while ago and can be improved) I’ll probably improve this tut at the same time.

In the meantime this could provide a solution for you: you can give users feedback on errors in the form (and catch errors client-side) by adding ‘required’ and a pattern to the HTML (e.g. for the First Name input tag add: ‘pattern=”/^[A-Za-z]/” required’).

With this addition to the HTML the modal will be visible (and input can be edited by users) until errors have been corrected.

Cheers, Theo

Theo - August 21, 2014 Reply

The validation post has been added and can be found here: http://tutsme-webdesign.info/bootstrap-validation-states-dynamically/ .
That tutorial contains examples where validation errors are shown in popovers.

jleon - July 14, 2014 Reply

Thanks, works great!

Rachel - July 7, 2014 Reply

Clear, Concise. Thank you.

Roxy - April 16, 2014 Reply

Hi, thanks so much for this tutorial. I have a question: When I resize the window, the email input extends past the modal window and doesn’t line up with the other input elements. I thought maybe it had to do with some css, but I’m using the bootstrap 3 css. Any thoughts?

Theo - April 17, 2014 Reply

Hi Roxy,

yes with the introduction of version 3.1 the alignment of ‘input-group’ has changed. To remedy this you can either delete the class ‘input-group’ and the span with ‘input-group-addon’ (see lines 16 and 17 in the Form) or you can add this code to your style section:
.input-group[class*=”col-“] {
padding-right: 15px;
padding-left: 15px;
}

Luke - April 8, 2014 Reply

Thanks man, great tut!

Web H - March 7, 2014 Reply

Really a great clear tutorial! Thanks a lot!

Theo - March 8, 2014 Reply

Thanks!

Ray K. - February 10, 2014 Reply

Nice application.

I would like to have a “Thank you” message appear in the modal after someone hits the submit button. Right now, the script issues the Thank you in a new window. Is there a way to have it appear in the modal?

Thanks in advance,
Ray

Theo - February 11, 2014 Reply

Hi Ray,

I will add a popover script later today that will show a Thank You after a user clicks on the submit button and before the modal disappears.

Ray K. - February 12, 2014 Reply

Theo,
I added the popover script and it works like a charm!
Thanks for addressing this issue.

Add your comment

Related Posts