Breaking News: Grepper is joining You.com. Read the official announcement!

on contact form have email, name, contacts and comment section, start it from the beginning

Thoughtful Thrush answered on October 4, 2023 Popularity 1/10 Helpfulness 1/10

answer on contact form have email, name, contacts and comment section, start it from the beginning

on contact form have email, name, contacts and comment section, start it from the beginning

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <style>
        .contact-form {
            max-width: 400px;
            margin: auto;
        }
        .contact-form label, .contact-form input, .contact-form textarea {
            display: block;
            width: 100%;
            margin-bottom: 10px;
        }
        .contact-form textarea {
            height: 100px;
        }
        .contact-form button {
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="contact-form">
    <h2>Contact Us</h2>
    <form id="contact-form">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone" required>

        <label for="comments">Comments:</label>
        <textarea id="comments" name="comments" required></textarea>

        <button type="submit">Submit</button>
    </form>
</div>

<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the form from submitting the traditional way
    
    const formData = new FormData(this);

    fetch('https://formspree.io/your-email@example.com', {
        method: 'POST',
        headers: {
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        alert('Form submitted successfully!');
    })
    .catch(error => {
        console.error('Error:', error);
        alert('There was an error submitting the form. Please try again later.');
    });
});
</script>

</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: contact-form contacts typescript

Link to this answer
Share Copy Link

Contributed on Oct 04 2023

Thoughtful Thrush

0 Answers Avg Quality 2/10

on contact form have email, name, contacts and comment section, start it from the beginning

Contents

More Related Answers

on contact form have email, name, contacts and comment section, start it from the beginning

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.