Membuat alert dengan modal bootstrap

Bootstrap membantu untuk merancang dan membangun tombol atau link popup tanpa menggunakan kode JavaScript tambahan, sehingga akan memudahkan pekerjaan kita dan tidak memakan waktu yang banyak untuk membuatnya.

Nội dung chính Show

Bootstrap & jQuery Library
HTML Code: Bootstrap Modal Popup Form
JavaScript Code: Validate and Submit Form
Send Contact Request Email (submit_form.php)

Dalam tutorial ini kita akan belajar integrasi form modal popup untuk website menggunakan Bootstrap dan mensubmit form dengan jQuery, Ajax, dan PHP. Sebagai contoh, kita akan membangun form kontak dengan Bootstrap modal popup dan mensubmit form tersebut dan mem-validasi menggunakan jQuery, Ajax, dan PHP.

Modal popup dengan form kontak menggunakan Bootstrap.
Memvalidasi data form sebelum mengirimkan menggunakan jQuery.
Mengirimkan data form dengan jQuery, Ajax, dan PHP.
Kirim email ke situs web admin menggunakan PHP.

Bootstrap & jQuery Library

Bootstrap is used to create modal popup and design HTMl form, include the bootstrap and jQuery library first.

Bootstrap digunakan untuk membuat popup modal dan desain form HTML, termasuk bootstrap dan perpustakaan jQuery pertama.

HTML berikut membuat dialog popup window menggunakan bootstrap. Tombol digunakan sebagai trigger modal window dan membuka form untuk submit permintaan kontak. Tombol atau link membutuhkan dua data-* attributes, data-toggle="modal" dan data-target="#modalForm". Modal div dan atribut id yang harus sama dengan atribut data-target yang men trigger link atau tombol.

Open Contact Form

Contact Form

Name

Message

JavaScript Code: Validate and Submit Form

Fungsi SubmitContactForm() mengklik form tombol submit. Dalam fungsi submitContactForm(), form popup data divalidasi sebelum mengirimkan dan mengirim file ke submit_form.php untuk diproses lebih lanjut menggunakan jQuery dan Ajax.

Send Contact Request Email (submit_form.php)

Dalam file

Open Contact Form

Contact Form

Name

Message

0, berikut cara kerja yang akan dilakukan untuk memproses form submit request.

Memeriksa apakah formulir yang diajukan tidak kosong dan memvalidasi email dengan FILTER_VALIDATE_EMAIL filter dalam PHP.

Mendapatkan form data dengan menggunakan metode

Open Contact Form

Contact Form

Name

Message

Mengirim email HTML dengan rincian kontak ke situs admin menggunakan fungsi PHP

Open Contact Form

Contact Form

Name

Message

Setelah aksi yang diperlukan selesai, status pesan akan ditampilkan dengan metode Ajax dengan sukses.

Contact request has submitted at CodexWorld, details are given below.
    
        
            Name:'.$name.'
        
        
            Email:'.$email.'
        
        
            Message:'.$message.'
        
    ';
    
    // Set content-type header for sending HTML email
    $headers = "MIME-Version: 1.0" . "
";
    $headers .= "Content-type:text/html;charset=UTF-8" . "
";
    
    // Additional headers
    $headers .= 'From: CodexWorld' . "
";
    
    // Send email
    if(mail($to,$subject,$htmlContent,$headers)){
        $status = 'ok';
    }else{
        $status = 'err';
    }
    
    // Output status
    echo $status;die;
}

Kesimpulan

Ini adalah contoh script yang mudah dan cara gampang mengintegrasikan form popup dalam mengirmkan sebuah email. jika ingin menyimpan form data ke database mysql gunakan fungsi insert sebelum mengirimkan email.