> For the complete documentation index, see [llms.txt](https://docs.web3forms.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.web3forms.com/getting-started/customizations/email-subject.md).

# Email Subject line

## `subject`

There are two ways you can setup Email Subject.

## 1. Pre-defined Subject

You can add a pre-defined subject by adding a form `input` with `type="hidden"` along with your subject in `value`. See the code below.

```markup
<input type="hidden" name="subject" value="New Submission from Web3Forms">
```

## 2. User Generated Subject

In this case, the subject can be filled by the website visitor. For that, you can use an input `type="text"`. See Code below.

```markup
<input type="text" name="subject" />
```

{% hint style="info" %}
The Name attribute must be called `subject`
{% endhint %}

### 3. Custom Subject with User Input Value

You can also customize the subject value to include user submitted value such as their first name. This will be easier to manage in emails when you have multiple emails coming from different users.

Below is a **javascript** example for creating custom subject. For react, [check this example](/how-to-guides/js-frameworks/react-js/react-js.md).

<pre class="language-javascript"><code class="lang-javascript">const form = document.getElementById('form');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(form);
    
    // Get the name input value
<strong>    const name = formData.get('name');
</strong>    
    // Create a custom subject
<strong>    const subject = `${name} sent a message from website`;
</strong>    
    // Append the custom subject to the form data
    formData.append('subject', subject);
    
    const object = Object.fromEntries(formData);
    const json = JSON.stringify(object);
    
    result.innerHTML = "Please wait...";

    fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: json
    })
    .then(async (response) => {
        let json = await response.json();
        if (response.status == 200) {
            result.innerHTML = json.message;
        } else {
            console.log(response);
            result.innerHTML = json.message;
        }
    })
    .catch(error => {
        console.log(error);
        result.innerHTML = "Something went wrong!";
    })
    .then(function() {
        form.reset();
        setTimeout(() => {
            result.style.display = "none";
        }, 3000);
    });
});
</code></pre>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.web3forms.com/getting-started/customizations/email-subject.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.