# Submitting form problem

**URL:** <https://forum.freecodecamp.org/t/submitting-form-problem/674590>\
**Category:** Curriculum Help\
**Created:** [February 23, 2024, 2:32pm UTC](https://forum.freecodecamp.org/t/submitting-form-problem/674590 "2024-02-23T14:32:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ridgerunner](https://avatars.discourse-cdn.com/v4/letter/r/e36b37/32.png) [@ridgerunner](https://forum.freecodecamp.org/u/ridgerunner)\
**Post date:** [February 23, 2024, 2:32pm UTC](https://forum.freecodecamp.org/t/submitting-form-problem/674590/1 "2024-02-23T14:32:42Z")

</div>

[https://codepen.io/Peter-Castine/pen/rNRRVmZ](https://codepen.io/Peter-Castine/pen/rNRRVmZ)

I have created a form for my members only page and want the form submitted to my email.  
When I fill out the form and press submit, I get the following message: “This content is blocked. Contact the site owner to fix the issue”. What am I doing wrong? Here is the code for my form:

 Please enter name   
  

```
      <label for="email" type="email-label"> Please enter email</label>
      <input id="email" id="email-label" required placeholder="rocks@rockhounder.com">
      <br><br>

      <select id="dropdown">
        <option>McDermitt</option>
        <option>Bruneau Wood Pile</option>
        <option>Texas Springs</option>
      </select>
      <br><br>

      <label for="number" id="number-label">Please select number of adults</label>
      <input id="number" type="number" min="0" max="15" required placeholder="adults">
      <br><br>

      <label for="number" id="number-label">Please select numnber of minors</label>
      <input id="number" type="number" min="0" max="15" required placeholder="minors">
      <br><br>

      <label>Day Trip or Overnight:</label>
      <input type="checkbox" value="0" id="day trip">
      <label for="day trip">Day Trip</label>

      <input type="checkbox" value="1" id="Overnight">
      <label for="overnight">Overnight</label>
      <br><br>

      <textarea>Please enter anything else we should know.</textarea>
      <br><br>
      <input id="submit" type="Submit">

    </form>

```

---

<div class="post-metadata">

**Author:** ![hasanzaib1389](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hasanzaib1389/32/377602_2.png) [@hasanzaib1389](https://forum.freecodecamp.org/u/hasanzaib1389)\
**Post date:** [February 23, 2024, 3:10pm UTC](https://forum.freecodecamp.org/t/submitting-form-problem/674590/2 "2024-02-23T15:10:33Z")

</div>

Your HTML form looks well-structured, but there are a few minor issues that need to be corrected:

1. **Duplicate IDs** : You have used the same ID (`number-label`) for two different elements (`<label>` elements). IDs must be unique within the HTML document. You should use different IDs for these labels.

2. **Label for Email Input** : The `type` attribute is specified as `email-label` for the `<label>` element intended for the email input field. However, the `type` attribute is not valid for `<label>` elements. You should remove `type="email-label"` from the label.

3. **Checkbox IDs** : The `id` attribute for the “Overnight” checkbox is incorrectly capitalized (`id="Overnight"`). It should match the `for` attribute in the corresponding `<label>` element, which is lowercase (`for="overnight"`).

Here’s the corrected HTML code:

```html
<form>
  <label for="email">Please enter email</label>
  <input id="email" type="email" required placeholder="rocks@rockhounder.com">
  <br><br>

  <select id="dropdown">
    <option>McDermitt</option>
    <option>Bruneau Wood Pile</option>
    <option>Texas Springs</option>
  </select>
  <br><br>

  <label for="adults">Please select number of adults</label>
  <input id="adults" type="number" min="0" max="15" required placeholder="adults">
  <br><br>

  <label for="minors">Please select number of minors</label>
  <input id="minors" type="number" min="0" max="15" required placeholder="minors">
  <br><br>

  <label>Day Trip or Overnight:</label>
  <input type="checkbox" value="0" id="day-trip">
  <label for="day-trip">Day Trip</label>

  <input type="checkbox" value="1" id="overnight">
  <label for="overnight">Overnight</label>
  <br><br>

  <textarea placeholder="Please enter anything else we should know."></textarea>
  <br><br>

  <input id="submit" type="submit">
</form>

```

These changes should resolve the issues you encountered.  
@ridgerunner

---

<div class="post-metadata">

**Author:** ![hasanzaib1389](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hasanzaib1389/32/377602_2.png) [@hasanzaib1389](https://forum.freecodecamp.org/u/hasanzaib1389)\
**Post date:** [February 23, 2024, 3:11pm UTC](https://forum.freecodecamp.org/t/submitting-form-problem/674590/3 "2024-02-23T15:11:31Z")

</div>

The issue you’re experiencing could be due to various reasons. Here are some common possibilities and solutions:

1. **Missing Form Action** : Make sure your form includes the `action` attribute with the URL where the form data should be submitted. For example:

2. **Security Restrictions** : Some web browsers block form submissions to email addresses (`mailto:`) due to security concerns. This is because submitting form data directly to an email address can be exploited by spammers. Instead, you should submit the form data to a server-side script (e.g., PHP, Node.js) that processes the data and sends it via email.

3. **Server-Side Script** : You need a server-side script to handle the form submission and send the email. If you’re using a server-side language like PHP, you can create a PHP script to handle the form submission. Here’s a basic example:

4. **HTTPS Requirement** : If your website is served over HTTPS, submitting a form to an email address (via `mailto:`) may not work due to security restrictions. In this case, you should use a server-side script to handle the form submission.

5. **Cross-Origin Resource Sharing (CORS)**: If you’re submitting the form data to a different domain or origin, ensure that CORS is properly configured on the server to allow cross-origin requests.

6. **Browser Extensions** : Sometimes, browser extensions or ad blockers may interfere with form submissions. Try disabling any extensions temporarily and see if the issue persists.

7. **Firewall or Antivirus** : In some cases, firewall or antivirus software may block form submissions to email addresses. Check your security settings to ensure they are not blocking legitimate form submissions.

By addressing these possibilities, you should be able to resolve the issue and successfully submit your form data to your email.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [August 24, 2024, 3:12am UTC](https://forum.freecodecamp.org/t/submitting-form-problem/674590/4 "2024-08-24T03:12:21Z")

</div>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.