Хотите, чтобы данные формы сначала проверялись с использованием HTML5, а затем отправлялись на адрес электронной почты, выглядя проще всего через HTML или JS

Question

Для моего сайта свяжитесь с нами. Я хочу после нажатия на кнопку отправить / отправить.

1) проверка записей с использованием HTML5 (который я пробовал, но не смог сформировать правильный шаблон, поэтому нужен правильный шаблон)

2) если все поля верны, отправьте данные формы на адрес электронной почты (адрес Gmail) (это я добавил из другого поста на stackoverflow, здесь я ищу простейший подход с использованием HTML или JavaScript, но содержимое получаемой электронной почты должно быть правильно структурирован)

3) После этого он должен очистить текстовые поля формы и показать временное сообщение «Мы успешно получили ваше сообщение и скоро свяжемся с вами. Спасибо».

, а также, если это возможно, хотите отправить данные этой формы в зашифрованном виде. делает 'enctype = "multipart / form-data' будет шифровать данные моей формы при отправке в мой почтовый ящик. (Я думаю, что это будет сложно, если почтовый сервис получателя не сможет расшифровать, если функциональность шифрования добавляет сложность, тогда я не буду предпочитаю шифрование) Я буду развертывать свой статический веб-сайт на диске Google, поэтому я не думаю, что серверный скрипт php будет работать, поэтому для отправки по электронной почте может использоваться любой код JavaScript на стороне клиента или, если возможно, тогда мой первый приоритет будет основан на примере кода HTML. внутри тега кнопки со свойством - form-id.sendMailTo (mymail@web.com), идентификатор формы будет включать все значения формы.

		function sendMessage(){

			var name = document.getElementById('name');
			var email = document.getElementById('email');
			var phone = document.getElementById('phone');
			var varmsg = document.getElementById('message');

			const message =
			"From:" + email + "\r\n" + 
			"To: mygmail@gmail.com\r\n" +
			"Subject: Send from Direct Website by "+ name +"\r\n\r\n" +
			"This is message" + varmsg;
			


			// The body needs to be base64url encoded.
			const encodedMessage = btoa(message)

			const reallyEncodedMessage = encodedMessage.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')

			gapi.client.gmail.users.messages.send({
				userId: 'me',
				resource: {
			        // same response with any of these
			        raw: reallyEncodedMessage
			        // raw: encodedMessage
			        // raw: message
			    }
			}).then(function () { console.log("done!")});
		}

.form {
  position: relative;
}

.form-wrapper {
  transition: all .2s linear;
}

.form-item {
  margin-bottom: 1.5rem;
}

.form-item .form-control {
  display: block;
  position: relative;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  outline: none;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transition: all .2s linear;
  width: 100%;
  padding: .75em;
  font-size: 1em;
  line-height: 1.25
}

.form-item .select .form-control {
  cursor: pointer;
  z-index: 2
}

.form-item textarea.form-control {
  min-height: 8em
}

input.form-control[type=text],
input.form-control[type=email],
input.form-control[type=phone],
textarea.form-control {
  background: rgba(56, 56, 56, 0.1);
}

input.form-control[type=text]:focus,
input.form-control[type=email]:focus,
input.form-control[type=phone]:focus,
textarea.form-control:focus {
  background: #fff;
  border: 1.5px solid rgba(77, 144, 254, 0.7);
  /* padding:5px; */
}

.form-control {
  background: rgba(56, 56, 56, 0.1);
  color: #383838;
}

.form-control.placeholder {
  color: rgba(56, 56, 56, 0.8);
}

.form-control:-moz-placeholder {
  color: rgba(56, 56, 56, 0.8);
}

.form-control::-moz-placeholder {
  color: rgba(56, 56, 56, 0.8);
}

.form-control:-ms-input-placeholder {
  color: rgba(56, 56, 56, 0.8);
}

.form-control::-webkit-input-placeholder {
  color: rgba(56, 56, 56, 0.8);
}

.hero-content .form-control {
  background: rgba(231, 164, 19, 0.1);
  color: #e7a413;
}

.footer-content .form-control {
  background: rgba(20, 20, 20, 0.1);
  color: rgba(20, 20, 20, 0.733);
}

.footer-content .form-control.placeholder {
  color: rgba(20, 20, 20, 0.8);
}

.footer-content .form-control:-moz-placeholder {
  color: rgba(20, 20, 20, 0.8);
}

.footer-content .form-control::-moz-placeholder {
  color: rgba(20, 20, 20, 0.8);
}

.footer-content .form-control:-ms-input-placeholder {
  color: rgba(20, 20, 20, 0.8);
}

.footer-content .form-control::-webkit-input-placeholder {
  color: rgba(20, 20, 20, 0.8);
}

.error .form-control {
  border-bottom-color: #93b832;
}

	                    	<form id="form" class="form" method="post">


		                        <div class="form-wrapper">

		                            <div class="form-item"><label>Name*</label>
		                                
		                                <input 
		                                	type="text" id="name" class="form-control" 
		                                	required aria-required=”true” 
		                                	minlength="2" maxlength="60" 
		                                	pattern="^[A-Za-z_\-\.\s]{2,60}$" 
		                                	title="Only Alphabet are accepted for Full Name">

		                            </div>

		                            <div class="form-item"><label>Email*</label>
		                                
		                                <input 
		                                	type="email" id="email" class="form-control" 
		                                	required aria-required=”true” 
		                                	minlength="7" maxlength="100" 
		                                	pattern="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$"
		                                	title="Type your correct email address">
		                                	<!-- pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" -->
		                                	<!-- pattern="/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/" -->

		                            </div>

		                            <div class="form-item"><label>Phone*</label>
		                                
		                                <input 
		                                	type="phone" id="phone" class="form-control" 
		                                	required aria-required=”true”
		                                	minlength="6" maxlength="15" 
		                                	pattern="^([0-9_\-\.\+]{6,15})$"  
		                                	title="Phone Number can include '- . + and 0 to 9' with maximum limit of 20 characters">
		                                	<!-- pattern="/^[0-9]{6,15}$/" -->

		                            </div>

		                            <div class="form-item"><label>Message*</label>
		                                
		                                <textarea 
		                                	id="message" class="form-control" 
		                                	required aria-required=”true” 
		                                	minlength="10" maxlength="250" 
		                                	pattern="" 
		                                	title="Message must not be left empty or excede more than 250 Characters"></textarea>

		                            </div>

		                            <div class="form-item">

		                                 <button 
		                                 	type="submit" id = "btnSend" form="form" class="btn contact-submit" 
		                                 	data-submit-text="Sending..." 
		                                 	onclick="sendMessage();">Send</button>
		                                <!-- <input type="submit" value="SEND" class="submit" name="send" id="send" > -->

		                            </div>

		                        </div>
		                    </form>