form

import React, {useState} from 'react';
import axios from 'axios';
import './forms.css';

const baseUrl = '';


const Personal = () => {
  const [ContactData, setContactData] = useState({
		'sfull_name': '',
		'rfull_name': '',
		'semail': '',
		'remail': '',
		'sphone': '',
		'rphone': '',
		'package_details': '',
		'submission': '',
		'status': ''
	});
  const handleChange=(event) => {
		setContactData({
			...ContactData,
			[event.target.name]: event.target.value
		})
	}

	const submitForm=()=> {
	const contactFormData = new FormData();
	contactFormData.append("sfull_name", ContactData.s_full_name)
	contactFormData.append("rfull_name", ContactData.r_full_name)
	contactFormData.append('s_email', ContactData.s_email)
	contactFormData.append('r_email', ContactData.r_email)
	contactFormData.append('r_phone', ContactData.r_phone)
	contactFormData.append('s_phone', ContactData.s_phone)
	contactFormData.append('package_details', ContactData.package_details)
	contactFormData.append('submission', ContactData.submission)

  try {
		axios.post(baseUrl, contactFormData).then((response) =>{
			setContactData({
			'sfull_name': '',
		    'rfull_name': '',
		    'semail': '',
		    'remail': '',
		    'sphone': '',
		    'rphone': '',
		    'package_details': '',
				'status': 'success'
			});
		});
	} catch(error){
		console.log(error);
		setContactData({'status': 'error'})

	}
}
  return (
    <>
     <section className='form_sect'>
     <div className='form__section'>
     <div className="accounts__container">
          <form action ='#'>
               <div className='form first'>

                 <span className="title">CONTACT DETAILS</span>
                  <div className='fields'>
                   <div class="input__field">
                          <label>Sender's Full Name</label>
                          <input type="text"
                          placeholder="Enter full name"
                          onChange={handleChange}
                          value={ContactData.sfull_name}
                          name="Full Names"
                          required/>
                    </div>

                    <div class="input__field">
                            <label>Sender's ID/ems NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            onChange={handleChange}
                            value={ContactData.id}
                            required/>
                    </div>

                        <div class="input__field">
                            <label> Sender's Email</label>
                            <input type="text"
                              placeholder="Enter Email"
                              onChange={handleChange}
                              value={ContactData.email}
                             required/>
                        </div>

                        <div class="input__field">
                            <label>Sender's Phone Number</label>
                            <input type="text"
                             placeholder="Enter phone number"
                             onChange={handleChange}
                             value={ContactData.phone}
                             required/>
                        </div>

                        <div class="input__field">
                            <label> Recipient's Full Name</label>
                            <input type="text"
                            onChange={handleChange}
                            value={ContactData.rfull_name}
                            placeholder="Enter full name"
                            required/>
                        </div>

                        <div class="input__field">
                            <label>Recipent's ID/ems NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            onChange={handleChange}
                            value={ContactData.rno}
                            required/>
                        </div>
                        <div class="input__field">
                            <label>Recipent's PHONE NUMBER</label>
                            <input type="text"
                            onChange={handleChange}
                            value={ContactData.rphone}
                            placeholder="Enter your NO."
                            required/>
                        </div>
                    </div>
               </div>

              <div className='form second'>
                 <div className="details-package">
                 <span className="title">PACKAGE DETAILS</span>
                  <div className='fields'>
                   <div class="input__field">
                          <label>Sender's Full Name</label>
                          <input type="text"
                          placeholder="Enter full name"
                          onChange={handleChange}
                          value={ContactData.sfull_name}
                          name="Full Names"
                          required/>
                    </div>

                    <div class="input__field">
                            <label>Sender's ID/ems NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            onChange={handleChange}
                            value={ContactData.id}
                            required/>
                    </div>

                        <div class="input__field">
                            <label> Sender's Email</label>
                            <input type="text"
                              placeholder="Enter Email"
                              onChange={handleChange}
                              value={ContactData.email}
                              required/>
                        </div>

                        <div class="input__field">
                            <label>Sender's Phone Number</label>
                            <input type="text"
                             placeholder="Enter phone number"
                             onChange={handleChange}
                             value={ContactData.phone}
                             required/>
                        </div>

                        <div class="input__field">
                            <label> Recipient's Full Name</label>
                            <input type="text"
                            onChange={handleChange}
                            value={ContactData.rfull_name}
                            placeholder="Enter full name"
                            required/>
                        </div>

                        <div class="input__field">
                            <label>Recipent's ID/ems NUMBER</label>
                            <input type="text"
                            placeholder="Enter your NO."
                            onChange={handleChange}
                            value={ContactData.rno}
                            required/>
                        </div>
                        <div class="input__field">
                            <label>Recipent's PHONE NUMBER</label>
                            <input type="text"
                            onChange={handleChange}
                            value={ContactData.rphone}
                            placeholder="Enter your NO."
                            required/>
                        </div>
               </div>
              </div>
               <div className='buttons'>
                  <button className='backBtn'>
                      <span className='btnText'>Back</span>
                  </button>

               <button className='nxtBtn'>
                   <span className='btnText'>Next</span>
                </button>

               </div>
            </div>
          </form>
      </div>
      </div>
      </section>
    </>
  )
}

export default Personal