Has the website become "vulnerable" following the addition of a mailto link?

Having added the mailto function to my website, I am now in search of a better alternative or an easy fix.

<section class="about">
    <section>
        <h4>Form</h4>
        <form method="post" action="mailto:(my email)" target="_top">
            <div class="row gtr-uniform">
                <div class="col-6 col-12-xsmall">
                    <input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
                </div>
                <div class="col-12">
                    <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
                </div>
                <div class="col-12">
                    <ul class="actions">
                        <li><input type="submit" value="Send Message" class="primary" /></li>
                        <li><input type="reset" value="Reset" /></li>
                    </ul>
                </div>
            </div>
        </form>
    </section>
</section>
javascripthtmlcssemailmailto

Answer №1

It is advised to refrain from using mailto in the action of forms, and instead utilize JavaScript as demonstrated below:
Revise your HTML code as shown:

<section class="about">
    <section>
        <h4>Form</h4>
        <form method="post" target="_top">
            <div class="row gtr-uniform">
                <div class="col-6 col-12-xsmall">
                    <input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
                </div>
                <div class="col-12">
                    <textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
                </div>
                <div class="col-12">
                    <ul class="actions">
                        <li><input type="button" id="send_email" value="Send Message" class="primary" /></li>
                        <li><input type="reset" value="Reset" /></li>
                    </ul>
                </div>
            </div>
        </form>
    </section>
</section>

Additionally, include this piece of JavaScript for handling the mailto:

your_email = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b6f7e686f5b6f7e686f35787476">[email protected]</a>";
emailSub = "test";
emailBody = document.getElementById("demo-message").innerText; 
var email_btn = document.getElementById('send_email');
email_btn.addEventListener("click",function(e){
    e.preventDefault();
    location.href = "mailto:"+your_email+'&subject='+emailSub+'&body='+emailBody;
});

This methodology should provide the needed functionality.

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

Tips for finding the common elements in arrays within a nested array

I am facing a challenge with an array that was generated by another function and I don't want to make any modifications to it. var d = [[1, 2, 3], [2, 3], [1, 3]]; My goal is to use the _.intersection method on all arrays within the main array like ...

javascriptarraysunderscore.js

What are some ways that we can enhance each other's value?

I am currently delving into the realm of Java-script, with the goal of creating an input field for numbers. My vision is to have a scenario where when a user enters a number in the input field, my script will display it in a paragraph or another text field ...

javascript

Rearranging Twitter Bootstrap Grid Columns

Is it possible to rearrange columns in Bootstrap without using col-sm-pull-12/col-sm-push-12? I'm struggling to achieve the desired layout. Are there any alternative methods to accomplish this task? Check out this JSFiddle for reference. <div cla ...

htmlcsstwitter-bootstrap

Please provide input when selecting an option from the dropdown menu

My invoice form includes a table with 3 columns: kode_barang (ItemID), nama_barang (ItemName), and qty (quantity). Currently, there are only 2 rows in the table: <form name="invoice" action="insert3.php" method="post"> <table id="theTable" border ...

javascriptphpjquery

How do I determine the dimensions of an object in Three.js?

Seeking advice on determining the size of a Three.js object. I am currently loading various objects from files and wish to find a way to automatically adjust scale or camera position to ensure the entire object fits within the frame. Since different files ...

javascriptthree.js

Arrange text and a button side by side in a table cell using an Angular directive and an HTML template

I have successfully implemented an Angular search function on my project. You can find it here to allow users to search for courses. The search function uses a read-more directive that displays a preview of the description and keywords before allowing use ...

htmlcssangularhtml-tablecss-tables

What potential problem is arising from Jest's use of "transformIgnorePatterns" and how does it impact importing scoped CSS in a React application?

Currently facing a challenge with Jest testing in my React application following the addition of transformIgnorePatterns to the Jest settings. The default settings I included in the "jest" section of the root package.json file are as follows: "transfo ...

javascriptreactjsjestjsbabeljsbabel-jest

Tips for sending information to an Express API through AJAX

While working on a website using Express and EJS, I encountered an issue with calling an API via AJAX. The problem arises when passing two values to the AJAX data upon button click, resulting in errors. Despite trying various solutions, I'm still stru ...

javascriptnode.jsjsonajaxexpress

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

javascripthtmlcssdrop-down-menu

Combining multiple elements into a single table row in a React component

I am completely new to React and need some guidance. Currently, I have a component called MonthEntry which consists of multiple instances of MonthPlanEntry. My goal is to display all these MonthPlanEntry components in the list as a single table row. clas ...

javascriptreactjs

"What is the proper way to implement the Increment Operator within the Ngoninit() function

When I try to use the increment operator within ngoninit() to change a variable's value, I encounter the following error from the compiler: error TS2356: An arithmetic operand must be of type 'any', 'number', 'bigint' or ...

javascriptangulartypescriptlocal-storagecommand-line-interface

Childs - A jQuery Stride

I am trying to figure out how to modify a specific child element within an HTML structure. Specifically, I want to target the first anchor tag within a list item of an unordered list. Here is what I have attempted so far: [HTML AND JQUERY] <body> ...

javascriptjqueryhtmlcss

Is there a way to make the iOS Safari address bar shrink when scrolling, all while having a flexbox sticky footer inside a container?

I have implemented a standard flexbox sticky footer solution in my code: <body> <div class="wrapper"> <div class="header">Page Header</div> <div class="body"> <div class="b ...

cssflexboxmobile-safari

Tallying responses of "Yes" and "No" in a React form and storing them

I'm currently working on a React form using Material UI components. To keep track of the responses, I have an empty array called questionAns. My goal is to append an element like yes to the array when the Yes radio button is selected in the form. Belo ...

javascriptreactjsarraysformsmaterial-ui

Issues encountered during the deployment process on Vercel

I've encountered an issue while deploying my Next.js app on Vercel. It seems to be related to an unsupported platform error. I have attached an image displaying the exact error message. npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform f ...

javascriptgithubnext.jssolidityvercel

jQuery can bring life to pseudo elements through animation

Currently, I am utilizing a:after, and it includes right: Ypx. I am interested in employing the animate method within jQuery to transition the element (a:after) from Ypx to Zpx. Is there a way to achieve this? Here is an example: [link-text][after] [lin ...

javascriptjquerycss

Received an unexpected GET request while attempting to modify an HTML attribute

After clicking a button in my HTML file, a function is called from a separate file. Here is the code for that function: function getRandomVideoLink(){ //AJAX request to /random-video console.log("ajax request"); var xhttp = new XMLHttpRequest( ...

javascripthtmlajaxasynchronous

Why is a wrapper essential in jQuery?

Similar Question: What is the significance of (function($) {})(jQuery); in jQuery? Why does the function (function($){})() sometimes include the word jQuery? Seen this code snippet used in various places, and while I know it's essential for s ...

javascriptjquery

Angular React Form: Issue locating control within deeply nested FormArray structure

I am currently developing a nested, dynamic form where users can create groups and nest conditions within those groups or add new group objects within a `group` FormArray. The UI prototype is still under development, with some pieces not fully functional y ...

javascripthtmlangular

Enhance the appearance of your HTMLEditorField in SilverStripe 3.2 by customizing its CSS style using

I have configured the HtmlEditorConfig for a Content HTMLEditorField. The issue I am facing is that I have to refresh or reload the browser page in order to see my custom CSS settings... Here is my code: HtmlEditorConfig::get('cms')->setOpti ...

cssfieldsilverstripe