Warning: Use of undefined constant MDB_STRIPE_SUB_WEBHOOK_SECRET - assumed 'MDB_STRIPE_SUB_WEBHOOK_SECRET' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/stripe/class-mdb-stripe-webhook.php on line 26

Warning: Use of undefined constant MDB_PAYPAL_WEBHOOK_ID - assumed 'MDB_PAYPAL_WEBHOOK_ID' (this will throw an Error in a future version of PHP) in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/mdb-subscriptions/mdb-payments/paypal/class-mdb-paypal-webhook.php on line 23

Notice: Undefined index: HTTP_REFERER in /var/www/tst02/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Bootstrap 5 Contact Form with PHP

Contact Form - PHP MDB Pro component

Bootstrap 5 Contact Form with PHP

This is a step-by-step guide tutorial on how to easily create beautiful contact forms using the Bootstrap framework, PHP and JavaScript. It also covers validation of data, sending requests using AJAX and other form related topics.

For creating Contact Forms using NodeJS environment please follow the link

Final code for examples of this tutorial you can find inside integrations folder of the MDB Advanced package


Form HTML

First, create basic contact form which will be our base for validating and sending data.

Within this tutorial we are using the Material Design for Bootstrap library, you can download it for free from here. Without the library, the form will still work — however it may look and behave differently. It's recommended to use this library along with the tutorial.

Contact us

Copy and paste the following HTML and JavaScript code into your file (e.g. index.html):


Create PHP file

Create a new file called mail.php within the same folder as the contact form and place within it the following code:

Now just replace youremail@here.com with your email address and it's done. Remember that in order for the script to work you will need to keep it on PHP-supporting server such as Apache.


Frontend validation

Our form now works fine. However currently if the user makes a mistake by clicking send without filling in the form first, this will result in sending an empty email. The other potential problem is that user might make a mistake in his email address so he would never get a response from us.

MDB Validation

MDBootstrap form components provide built-in validation which can be used to validate user data before sending email via PHP script. Read more about MDBootstrap form validation here.

In the example below all inputs were marked as required, and JavaScript code enabling custom MDB Form Validation was added.

Contact us

Please provide your name.
Please provide your email.
Please provide mail subject.
Please provide a message text.

Custom Validation

If you don't want to use MDB default validation and want to create your own functionality instead, you have to change the behavior of the form submission. So first change the existing code in our JavaScript

with the following code, which instead of directly submitting the form will call our validation function:

Now we have to create our validation function. Example of the form with the custom validation function could be looking like this:

Contact us


Server-side validation

Since user can easily disable Javascript on his side, it's very important to also validate the submitted form on the server side. In order to add similar validation as we did in the previous point, update the mail.php file by adding the following code:


Sending email without reloading the page using AJAX

Our contact form is working correctly, however the user experience leaves much to be desired. Instead of reloading the page, we would like to send contact form on the same page. Let’s replace following JavaScript code

We also need to adjust our PHP code. Instead of sending a simple string with the message, we will send a slightly more complex object which will contain both status and the message. If everything goes fine and the email was successfully sent. We will return status 1 and clean our form to make sure that user does not send it multiple times. In case of validation errors we will return 0 and keep the data within the form.


Anti-spam

Once you create your contact form it's worth adding an anti spam mechanism. Unfortunately, there are hundreds of thousands of spambots browsing the Internet every second looking for unsecured forms and submitting them. How they work? They simply fill typical inputs like name or email and automatically submit the form. In the best case you will get occasional frustrating spam messages. In worst they can bring down your website by submitting the contact form hundreds of times a second.

The simplest (but also the weakest) way to secure a contact form is to add a custom field, then ask the customer to fill it in a certain way, and submit the form only if the entered value is correct. Real humans will easily perform this task, but bots most probably won't be able to pass the check.

Other questions

  • Q: How many eyes does a typical person have? (ex: 1) A: 2
  • Q: How many legs on a typical dog? (ex: 5) A: 4
  • Q: How many units in a dozen? (ex: 11) A: 12
  • Q: Name of the actor Di Caprio? (ex: Rafaelo) A:Leonardo
  • Q: How many days in a week? (ex: 8) A: 7
  • Q: How many days in July? (ex: 28) A: 31

If you want a more sophisticated solution read about Google's reCAPTCHA service


Other inputs

We've already used text inputs as well as the text area for larger pieces of text but there are yet more useful input types we can use to enhance our contact form.

Checkbox

Multiple checkboxes

How did you get to know about us?

Radio/Option buttons

What is your preferred contact method?