Data input not populating in email

After filling out the form, Gmail pops up with no data entered. How can I ensure that the information I input in the form is transferred to the email?

<form class="" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3a273e322f331f38323e3633713c3032">[email protected]</a>" method="post">

  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117f707c74517469707c617d743f727e7c">[email protected]</a>">
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
htmlcssbootstrap-5

Answer №1

Ensure to include the name attribute for each field, which will be displayed in the email message body. It will be structured as mail={your_message} and so forth.

Your updated code should look like this:

<form class="" action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b6abb2bea3bf93b4beb2babffdb0bcbe">[email protected]</a>" method="post" enctype="text/plain">
    <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label">Email address</label>
        <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="731d121e1633160b121e031f165d101c1e">[email protected]</a>" name="email">
    </div>
    <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve CSS hover values using jQuery

When the page is loaded, I need to execute a function that retrieves the CSS background image settings as well as the hover background image setting, which I intend to use in a different way. The only technique I have come across requires an actual mouseo ...

jquerycssbackground-image

Utilize Bootstrap 3 Datepicker version 4 to easily set the date using Moment.js or Date objects

I'm currently utilizing the Within my project, I have a datetime picker labeled as dtpFrom <div class='input-group date ' id='dtpFrom'> <input type='text' class="form-control" /> <span c ...

javascriptjqueryhtmltwitter-bootstrap-3

What can I do to stop my list items from dropping below the menu even when there isn't enough space?

I'm facing an issue with my menu and despite several attempts, I can't seem to resolve it. In Firefox, everything looks fine, but in other browsers, the last anchor tag inside my menu keeps collapsing underneath. I've tried various solutions ...

csscss-float

Can we access global variables directly in an Angular 2 HTML template?

After setting the app.settings as shown below public static get DateFormat(): string { return 'MM/DD/YYYY';} I need to utilize it in one of my HTML templates for a component. This is what I want to achieve. <input [(ngModel)]="Holiday" [dat ...

htmlangulartypescript

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

htmlcsstypescriptprimeng

Use of number type input on mobile devices in HTML

My goal is to display the up/down arrows alongside an input element with type="number" in Chrome on Android. I've adjusted the CSS to set opacity=1, but unfortunately, they are not appearing. On desktop, however, they show up without any iss ...

htmlcssinput

The basic CSS container fails to properly align its elements as intended

Recently, I created a CSS div using Bootstrap and added some custom styling. You can check out the fiddle for a live demo of the code: https://jsfiddle.net/w9gyc0t5/. Here's the actual code: <!-- Bootstrap docs: https://getbootstrap.com/docs -- ...

htmlcss

Can child elements be centered using their pseudo-elements using CSS alone?

Consider the code snippet below: <div class="example-container"> <p class="example">a</p> <p class="example">bbb</p> <p class="example">cc</p> </div> and the cor ...

htmlcss

You are unable to extract data from an HTML table

I have been encountering an issue while trying to extract data from an HTML table. Every time I attempt to do so, I am faced with an ERROR Message 13 "Type Mismatch". I suspect that the problem lies in my use of incorrect HTML tags. Despite spending severa ...

htmlexcelvbaweb-scraping

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Recently, I incorporated the Basic jQuery slider into my website, which can be found at . As a novice in jQuery but well-versed in HTML and CSS, I have managed to make it work seamlessly on my site. However, I am curious to know if there is a way to displa ...

javascriptjqueryhtmlcsscarousel

Tips for aligning specific items to the right side of the navigation bar

I've been grappling with creating a navigation bar for a website, aiming to position 4 elements on the left side of the screen and 2 on the right. Despite knowing that there's likely a straightforward solution, I'm struggling to get the elem ...

htmlcss

Proper techniques for enlarging a background image using CSS

When utilizing the CSS scale() function along with a transition and transform on a div element that contains a high-quality background image, I noticed that the image becomes blurry when zoomed in. How can I achieve a smoother zoom effect for high-quality ...

htmlcsszooming

- Bullet point: Table heading alignment variation

When it comes to centering a <th> element inside an <li>, different browsers have different approaches. In Internet Explorer, Edge, and Safari, the <th> is center-justified. However, in Chrome, Firefox, and Opera, it's left-justifie ...

csshtmlcross-browser

Differences in functionality across various browsers when dealing with complex subgrid structures

After nesting a subgrid inside a padded subgrid within a grid, I noticed varying behavior across different web browsers. Chrome/Edge (Windows) Firefox (Windows) Safari MacOS https://i.stack.imgur.com/uHlto.png https://i.stack.imgur.com/SGxuC.png ht ...

csscross-browsersubgrid

Ways to eliminate the blue outline on a checkbox in bootstrap 4.1

Bootstrap 4.1 Is there a way to get rid of the blue border on a checkbox that shows up when it is in focus? https://i.sstatic.net/e77BV.png I attempted to use outline, but it didn't work as I had hoped. This is the code I have been using: <div ...

csstwitter-bootstrapbootstrap-4

What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have ...

htmlcsscpanelgodaddy-api

Looking to adjust the width of a Bootstrap dropdown menu?

I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

Is there a way to ensure a Javascript alert appears just one time and never again?

I struggle with Javascript, but I have a specific task that needs to be completed. I am participating in a school competition and need an alert to appear only once throughout the entire project, not just once per browsing session. The alert will inform ...

javascriptjqueryhtmlcssalert

Why isn't offsetTop working for a div within a table in HTML and Javascript?

When using the offsetTop property to get the absolute position of an object, it works fine when the objects are outside of tables. However, if the object is inside a table, it always returns 1. Why does this happen and how can it be avoided? To see an exa ...

javascripthtml

Why is my CSS not recognizing the animation I specified for it to play?

I can't seem to get the simple animation I added to my code working properly. <div class="phone-center"> <div class="phone"> </div> </div> .phone-center { display: flex; justify-content: ce ...

csscss-animations