Design a Contact Form - Design a Contact Form

HTML-CSS
1

Tell us what’s happening:

everything looks right but for some reason the test doesnt recognize my button and list the last three steps as uncompleted

Your code so far

<!-- file: index.html -->
<!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>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="form-container">
        <form>

            <h2>Contact Us</h2>
            <!-- <fieldset> -->

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

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

            <label for="textarea">Message: </label>
            <textarea id="textarea" name="textarea" rows="4" cols="50" maxlength="500" minlength="10"
                required></textarea>


            <!-- </fieldset> -->
            <input type="button" name="submit" id="submit" value="Submit">

            <button type="submit" name="submit" id="submit">Submit</button>
        </form>

    </div>

</body>

</html>

/* file: styles.css */
body {
    background: linear-gradient(to right, #7fd0e8, #bee7f3);
}

.form-container {
    width: 400px;
    margin: 100px auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    font-family: Sans-serif;
    font-size: 40px;
}

/* fieldset {
    border: none;
    padding: 20px 0;
    margin: 20px 0;
    border-radius: 10px;
} */

label {
    color: rgb(62, 60, 60);
    display: block;
    margin: 1em 0 0.2em 0;
    text-align: center;
    font-size: 20px;
    font-family: Sans-serif;
}

input,
textarea {
    margin-top: 1em;
    font-size: 15px;
    width: 300px;
    height: 50px;
    padding: 10px;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    max-width: 400px;
    max-height: fit-content;
    font-family: sans-serif;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
}

input:focus,
textarea:focus {
    appearance: none;
    outline: none;
}

textarea {
    height: 100px;
}

input[type="button"] {
    background-color: green;
    font-size: 1.11em;
    width: 50%;
    margin: 10px auto;
    padding: 10px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    font-family: Verdana, Tahoma;
}

input[type="button"]:hover {
    background-color: #45a049;
}

button[type="submit"] {
    background-color: green;
    font-size: 1.11em;
    width: 50%;
    margin: 10px auto;
    padding: 10px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    font-family: Verdana, Tahoma;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 OPR/118.0.0.0

Challenge Information:

Design a Contact Form - Design a Contact Form

2

An id attribute should always be unique.

3

it wasnt that i used only one of these first than i tried deleting it and using an input type button that didnt work neither so i used both and it also didnt worked.

I figured its freecodecamp autocorrector thats wrong because it doesnt take in account the specific targeting of a button i used in my css stylesheet
button[type=“submit”] {
}
but it expects only
button {
}
so they should prob fix that for the future reference as my syntax is correct

4

Within the form , you should have a button element with a type attribute of submit.

This user story specifically says your form should have a button element with a type of 'submit', not an input element with a type of 'button'.

5

well as u can see in my code i had button type submit and it didnt worked than i tried input type that didnt work either the problem was in the CSS file because i specificaly targeted the SUBMIT button and not just a BUTTON because in previous courses i was tought how to target specific button so i used that knowledge but the autocorrector didnt accept that syntax for some reason so again to whoever have the same issue dont use: button[type=“submit”] { }
just use: button { }
freecodecamp might fix that in the future hopefuly because the syntax is right

6

The way you use atrribute selector is absolutely correct.

Maybe It just the curriculum have`t taught you any detailed knowledge about attribute selector yet.

Also,you only have one button element in this page.So,use the type selector might be the best practice which is the thought of FreeCodeCamp curriculum desginers.

7

While the attribute selector syntax is correct, it is also unnecessary. In this project, you do not need to use an attribute selector to provide more specificity because there is only one button element. Also, the Full Stack Developer CSS curriculum has not yet covered attribute selectors based on where this project is located in the stack.

If you still think fCC should accept a button attribute selector here, please create an issue at https://github.com/FreeCodeCamp/FreeCodeCamp/issues