• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

AJAX Contact Form: Sending Emails Without Refreshing Page (Source Code)

Modified on: December 27, 2020

In this video tutorial, we will make an AJAX contact form for simple use.

This form has three fields: Name, Email and Message. It lets others send you an email through a web platform without refreshing the webpage using AJAX (Asynchronous JavaScript And XML).

What are used: HTML, CSS, AJAX, PHP. Workspace: Cloud9. All links to resources used in this article are provided below.

Because of the loud noise from the keyboard, I need to mute the voice in some parts, that’s why it might sound sometimes not nature. Sorry about that.

Updated:

Hi guys, because the code in this project was quite old (Bootstrap already has v.4 and in these videos I am using v.3), so I updated my code but not yet releasing any video about the changes. Here are things that now different than the code mentioned in this video series:

  • About the email server, I no longer use Gmail SMTP, but use my custom domain’s email. If you use Gmail and encounter any issues, it probably because Google requires manual approval on using SMTP on third party app. Please check this link for Gmail SMTP config.
  • Some Bootstrap classes no longer work if you use v.4, for example:
    • Bootstrap no longer has “well” class, so I move to use “card” system
    • Similarly, the class “col-md-offset” changed into “offset-md-“. See here for Bootstrap class migration
  • Finally, I add extra fields of checkboxes into the code.

1. What includes in this tutorials

  • Setup a workspace in Cloud9 for the project (Part 1)
  • Create a Bootstrap form with Name, Email and Message fields (Part 1)
  • Add a cover fixed background image (Part 2)
  • Set up an AJAX request that communicates with a PHP file where the forms will be validated (Part 2 + 3)
  • Validate empty fields and email (Part 3)
  • Integrate PHPMailer to send email (Part 4)

2. Demo

You can also contact me from here: AJAX contact form demo

3. Resources

Cloud9

Bootstrap download | CDN | CSS

Unsplash free HD background photo

PHPMailer Github project

W3School Email Validator PHP

4. Video

Part 1 – Create an HTML Form with Bootstrap style (subtitle on the way)

Part 2 – Add cover background, set up an AJAX request

Part 3 – Empty fields and email validation

Part 4 – Send email with PHPMailer

5. AJAX Contact Form – Source Code Download

You are free to use and modify these codes to meet your purposes.

Github download ->>

6. Translation Contribution

You can contribute different languages translation and subtitles to these videos by visiting:

For Part 1: Youtube Translate Channel 

For Part 2: Youtube Translate Channel

For Part 3: Youtube Translate Channel

For Part 4: Youtube Translate Channel

Filed Under: Front-end Tagged With: ajax, bootstrap, css, html, jquery, php

Recent posts

WordPress: Create custom post type programmatically

[WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

Mangools Review: A Productive SEO tool for The Affiliates

Reader Interactions

You are here: Home / Front-end / AJAX Contact Form: Sending Emails Without Refreshing Page (Source Code)

Comments

  1. smaryd says

    May 21, 2020 at 12:20 am

    Hi Anh
    Very good your post.
    How do I include a field of type File in this form?

    Reply
    • Anh Karppinen says

      May 21, 2020 at 7:58 pm

      Hi,
      Thank you for your comment. I haven’t done file attachment to this project yet, but steps maybe:
      – Add a file upload field to your form (https://getbootstrap.com/docs/4.0/components/forms/#form-controls)
      – Add “enctype=’multipart/form-data'” to the form tag element
      – Follow PHPMailer instructions for file attachment (https://github.com/PHPMailer/PHPMailer/wiki/Tutorial#using-attachments)

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Hello! My name is Anh. I am a front-end developer in Oulu, Finland. Currently, I work with PHP, HTML, CSS, JavaScript and love writing about them. Please feel free to join the discussion!

FOLLOW MY BLOG

Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.