Until now I have published a lot of forms made with Bootstrap that you can use in your projects: 3 registration forms, 3 login forms and 1 multi-step registration form. Today I’ll add two other forms to this collection, two Bootstrap contact forms that you can download for free.
These forms are responsive and use PHP and AJAX to validate and send the message to your chosen email address. They also come with a fullscreen background, Font Awesome icons and are Retina ready. Below you’ll find the full list of features, the live preview link and the download link.
Features
- Responsive Layout (Bootstrap framework)
- 2 Different Contact Form Templates
- Fullscreen Background (Images Slider also available)
- Form Validation (to prevent users from leaving empty fields)
- Font Awesome icons
- Retina ready
The 2 Contact Templates
Template 1
Template 2
How To Use The Templates
Download the zip package below and extract it. You’ll see that each form template is in its own folder (named “form-1”, “form-2”) with all the needed files.
Use the “index.html” file to modify the HTML code. The style can be changed from the CSS files in the “css” folder (assets/css).
In the “contact.php” file (in assets) you can enter the email address where you want to receive the messages. I have also used some Javascript (jQuery) for the form validation (AJAX), for the text to display when the form is sent correctly and for the fullscreen background. You can find this code in the “scripts.js” file (assets/js).
The images are located in the “img” folder (assets/img). When you change the images, make sure you create also the “@2x” version (double size images) for Retina devices (iPhone, iPad).
Tutorials
How to Add a New Field to These Forms
Demo, Download and License
DOWNLOAD: Bootstrap Contact Forms: 2 Free Templates (15182 downloads)
LICENSE:
You can use these contact form templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.
Photos by: StockSnap.io
Want More?
If you need a template with more layouts, color schemes and features, along with free support and free updates, you should take a look at the Marco template:
Stay Updated
Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:
To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.
Why the form is not sending emails 🙁 .. Btw excellent job i love you work!
I don’t know. Can you give me the link where you’ve uploaded the templates so I take a look?
I’m glad you like my work! 🙂
How about figure it out. You could not be any more vague with you’re question.
Hello,
I have the same issue and can’t figure out why the emails don’t go through even though validation works fine. Can you please help? Nice design by the way
Hi, not really good at PHP
What would I need to add in the PHP file if I want to add another field (name) on the contact site?
Hi Patrick! I’ll write a tutorial soon.
basic HTML
I would like to add the contact form to my index.html page, how can I do that? Thanks!
Hello,
When I’m clicking on send message it is showing message send but i’m not getting any mails on my provided email id in contact.php
Thank you,
Regards,
Manthan Patel
Hello,
I’m trying to use your template, but I get the message:
Missing the stylesheet/style.css
Do you know what I’m doing wrong?
Thanks a lot!
These templates are not for WordPress.
Hi,
What are the steps to install te theme? When i’m installing the theme WordPress says ‘missing style.css’ but it is uploaded. What do I have to do?
Thank you!
These templates are not for WordPress.
I use to have a fixed layout of PHP contact form from a tutorial site. But I needed a responsive one, Luckily I found this one. But unfortunately, I’m having hard time to make the code to have success message sent, until I learned when I changed the contact php to a different name, I need to change the index.html and the script.js. After I gave up for hours and tried finding other responsive, I tried again to understand your design, and luckily I was able to figured it out. Thank You so much. Though I will try not to remove the many css that I don’t need because there are some fonts I’m not using that I can delete from css that will lessen the file size. Thank You so much. This is the image of my contact form. https://tagtd.com/pakitaito.jpg
YOU ARE THE GREATEST! AND i will never remove you on my CREDITS page, thank you.
hI,
GREAT GREAT WORK. THANKS.
i thougt i had it but after some days i tried again but no receiving any e-mails anymore.
i uploaded the index now, everything seems to work but dont receive any email.
i even get the thank you page.
see www . railexbeatz . nl.
i hope you can help me out.
Thanks!
You have to add the controls of the new fields (like “Telefoon”) also in “scripts.js”, not only in “contact.php”.
hi,
thanks ..
i will try..
Great work but does not work unfortunately. I tried other contact form tutorials but without any success as well. Could the problem be host related?
The forms use the PHP “mail” function. Maybe try to ask your hosting providers.
It finally worked, thanks! The only problem now is that it only supports english characters. When people try to send a message in other languages the email comes in symbols and squares. Any ideas on how to fix this?
Hello,
i installed the template and i resive email but just the message filed
no email address and no subject in the email body.
what i’m doing wrong?
great templates, Thank you very much for your great work.
i added above the form url
Do you have full theme’s download link?
Your template work pretty good in my case.
I added a line in the .php in order to open a new successful page, but, how may I just create a message (or modal window) that says “Your message has been sent” or something like that?
Hello Anli,
I got it to work and mails are coming in but when i click on “Send Message” button it takes me to contact.php and gives me this {“emailMessage”:””,”subjectMessage”:””,”messageMessage”:””}. How can I make go to a thank you page after hitting the “Send Button” . Btw, great work and I’ll be using this more often.
James RL
Hi James,
I might create a tutorial about this in the next days.
Hey James,
I was reading the comments for a solution to this and worked it out myself.
The line that is displaying
{“emailMessage”:””,”subjectMessage”:””,”messageMessage”:””}.
is at the end of contact.php:
echo json_encode($array);
Remove that and replace it with this code, that uses Javascript to redirect to any page of your choosing:
echo ‘
window.location = “http://www.google.com/”
‘;
Great contact form, thanks Anli!
Hi Ruairi,
Thanks for the tips.
I removed the following part at the end of contact.php
echo json_encode($array);
and replaced it with the following bit as you said :
echo ‘
window.location = “http://www.google.com/”
‘;
But it is still not showing another landing page. I have an error message.
It’s too bad because the form is working and i receive emails.
What could i do ?
Thanks a lot for your help and feedback.
Best,
Alex
excellent job… but if i try to send message for my mail id its not working why and how to fix it please let me know.
Anli,
Thank you for making these forms and allowing us to use them. Very generous of you! I’m trying to get the form to work, however it does not seem to send email. Can you please let me know what the issue may be.
Many Thanks!
Steve
Hi,
I’m nearly there 😉 The form sends messages (i receive them) but when I click on send, a white page appears with the following code :
{“emailMessage”:””,”subjectMessage”:””,”messageMessage”:””}
How could i repair this ?
Please help me… your form is very nice and i only want this one on my website 😉
Thanks in advance.
Best
Alexandre
It seems that you haven’t included the code in “scripts.js” where I use AJAX to validate and send the message without reloading the page.
Same problem here, emails not getting through, not in spam, validation JS working properly. Have other php on the same server working properly though. Any ideas? thank you