I have a modal with the body section containing input fields as so:

<div className="modal" id="myModal3">
                <div className="modal-dialog">
                    <div className="modal-content">
                        
                        <div className="modal-header d-flex flex-column align-self-center">
                            <h3 className="text-center mt-2">Add New Contact</h3>
                        </div>
                    
                        <div>
                            <form className="mt-2" onSubmit={onSubmitForm2}>
                                <div className="px-5">                       
                                <label htmlFor="contactName">Contact Name</label>
                                <input
                                id="contactName" 
                                type="text" 
                                className="form-control" 
                                value={scontact_name}
                                onChange={e => setName(e.target.value)}
                                /></div> 
                                <button className="btn btn-success">Add</button>
                            </form>
                        </div>
                    
                    
                        <div className="modal-footer">
                            <button type="button" className="btn btn-success" data-dismiss="modal">Add new Contact</button>
                            <button type="button" className="btn btn-danger" data-dismiss="modal">Close</button>
                            
                        </div>
                    </div>
                </div>
            </div>

I want to move form button into the modal footer, but the actual form is placed in the body. How do I move the button to the footer area while still having it function?