DevGang
Авторизоваться

Создание полностью адаптивной контактной формы с использованием formspree в html, javascript и css 

Начните с создания бесплатной учетной записи на https://formspree.io/. Затем выберите новую форму

После выбора новой формы заполните необходимые поля и нажмите «Создать форму».

Скопируйте конечную точку формы и вставьте ее в код формы в части действия. Также убедитесь, что ваша форма использует method = "post".

Убедитесь, что каждый вход является атрибутом имени.

Создание вашей формы

Для создания нашей формы мы будем использовать html, css и javascript. Вы узнаете, как создавать контактные формы без бэкэнда.

Давайте начнем

Давайте начнем с написания нашего html-кода, который определит структуру нашей контактной формы.

index.html

<html>
<head>
<title>Contact Form</title>
</head>
<body>
<section class="contact" id="contact-section">
    <h2 class="heading">Contact<span class="highlight"> me</span></h2>
    <p class="sub-heading">Lets connect. </p>
    <div class="seperator"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<form action="https://formspree.io/f/xxxx" method="post">
<input name="_gotcha" style="display: none" type="text">
<div class="contact-form">Name<input name="name" placeholder=" Name" id="name" required type="text">
</div>
<div class="contact-form">Topic<input name="topic" placeholder="topic" id="topic" required type="text">
</div>
    <div class ="contact-form">E-mail
    <input name="E-Mail Address" required placeholder="email" />
</div>
<textarea class="message" placeholder="message" required></textarea>
    <br/>
<button class="btn contact-btn" type="submit">contact me</button>
    <input type="hidden" name="referrer" id="referrer_field" />
<input type="hidden" name="body" />
</section>
</body>
</html>

Обязательно замените действие конечной точкой, созданной на первом шаге.

Давайте добавим CSS для стилизации контактной формы, что сделает ее более привлекательной.

index.css

.contact-form{
    width: 100%;
    margin-top: 20px;
    position: relative;
}
.contact-form input, .message{
    width: 100%;
    display:block;
    height: 50px;
    margin:5px 0;
    padding: 10px;
    background: #000;
    color: #fff;
    outline: none;
    resize: none;
}
.message{
    margin:30px 0;
    height: 200px;
}
.contact-form .name{
    display: flex;
    justify-content: space-between;
}
.name input{
    width: 49%;
    margin: 0;
}
.contact-form .btn{
    display: block;
    margin: auto;
    cursor: pointer;
}

Давайте теперь добавим немного JavaScript для функциональности.

index.js

$('form').submit(function () {
// Get the Login Name value and trim it
    var fname = $.trim($('#fname').val());
    var lname = $.trim($('#lname').val());
    var email =$.trim($('#email').val());
// Check if empty of not
    if (fname === '') {
        alert('First name is empty.');
        return false;
    }
    else if (lname === '') {
        alert('Last Name is empty.');
        return false;
    }
    else if (email === '') {
        alert('email is empty.');
        return false;
    }

Проверьте результат 

Удачного кодирования!

Источник:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Vladimir Shaitan - Видео блог о frontend разработке и не только

Посмотреть