<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class MyController extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->model('page_model');
}

public function contact()
{
$data['title'] = "Contact";
$this->load->view('header', $data);
$this->load->view('contact-form', $data);
$this->load->view('footer', $data);
}

public function Submit_Form()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('name', 'Name', 'trim|required');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
$this->form_validation->set_rules('message', 'Message', 'trim|required');

if ($this->form_validation->run() == false) {
$response = array(
'status' => 'error',
'message' => validation_errors()
);
}
else {
$contactData = array(
'name' => $this->input->post('name', true),
'email' => $this->input->post('email', true),
'phone' => $this->input->post('phone', true),
'message' => $this->input->post('message', true),
'created_at' => date('Y-m-d H:i:s')
);

$id = $this->User_model->insert_contact($contactData);

$response = array(
'status' => 'success',
'message' => "<h3>Message send successfully.</h3>"
);
}

$this->output
->set_content_type('application/json')
->set_output(json_encode($response));
}
}
?>

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class User_model extends CI_Model
{
public function insert_contact($contactData)
{
$this->db->insert('contacts', $contactData);
return $this->db->insert_id();
}
}
?>

<div class="row justify-content-center">
<div class="col-md-6">
<div id="message"></div>
<?php echo form_open('contactSubmit', array('id' => 'contactForm')) ?>
<div class="form-group">
<input type="text" name="name" id="name" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" name="email" id="email" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" name="phone" id="phone" class="form-control" placeholder="Phone">
</div>
<div class="form-group">
<button type="submit" class="btn btn-info">Send Message</button>
</div>
<?php echo form_close() ?>
</div>
</div>


<script>
$(function() {
$("#contactForm").on('submit', function(e) {
e.preventDefault();

var contactForm = $(this);

$.ajax({
url: contactForm.attr('action'),
type: 'post',
data: contactForm.serialize(),
success: function(response){
console.log(response);
if(response.status == 'success') {
$("#contactForm").hide();
}

$("#message").html(response.message);

}
});
});
});
</script>

CREATE TABLE `contacts` (
`id` int(10) UNSIGNED PRIMARY KEY AUTO_INCREMENT NOT NULL,
`name` varchar(30) DEFAULT NULL,
`email` varchar(50) DEFAULT NULL,
`phone` varchar(20) DEFAULT NULL,
`message` text,
`created_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;