Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

Question

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functionality).

My goal is to transfer the entered name and subject from the form to the email upon clicking "send".

Could you please provide guidance on how to achieve this?

Here is the link to the Jsfiddle

Below is my code snippet:

p{
  width:50%;
  color: #666;
  text-align: center;
  margin: 0 auto;
}
.name_input{
  display:block;
  margin : 50px auto;
  padding-left:10px;
  border-radius:5px;
  border:2px solid rgb(255,194,0);
  width: 50%;
  height:30px;
}

.btn{
 text-align:center;
  background-color:rgb(255,194,0);
  padding:10px;
  margin: 10px auto;
  width:30%;
  cursor :pointer;
}

.btn:hover{
  background-color: #666;
}

a{
  text-decoration:none;
  color:#FFF;
}

<form>
  <p>
  Enter the subject and your name, click "send" to have the subject included in the email subject line, and your name in the email body.
  </p>
   <input class="name_input" type="text" name="contact-object" id="contact-object" placeholder="The object"/>
  <input class="name_input" type="text" name="contact-name" id="contact-name" placeholder="Your name"/>
  
  <div class="btn">
  <a  href="mailto:www.myWebSite.com?subject=THE OBJECT DYNAMICALLY &body=THE NAME DYNAMICALLY">send</a>

  </div>
</form>

javascript html css mailto

Answer 1

Answer №1

If you want to use mailto as the action attribute for a form, you can do so by following this example:

<form action="mailto:www.myWebSite.com" method="GET" enctype="text/plain">
  <p>
  Input the desired subject and your name, then click "send" - the subject will be in the email's subject line, and your name will appear in the body of the email.
  </p>
   <input class="name_input" type="text" name="subject" id="contact-object" placeholder="Subject"/>
  <input class="name_input" type="text" name="body" id="contact-name" placeholder="Your Name"/>

  <div class="btn">
  <input type="submit" value="Submit" />

  </div>
</form>

Answer 2

If you want to use mailto as the action attribute for a form, you can do so by following this example:

<form action="mailto:www.myWebSite.com" method="GET" enctype="text/plain">
  <p>
  Input the desired subject and your name, then click "send" - the subject will be in the email's subject line, and your name will appear in the body of the email.
  </p>
   <input class="name_input" type="text" name="subject" id="contact-object" placeholder="Subject"/>
  <input class="name_input" type="text" name="body" id="contact-name" placeholder="Your Name"/>

  <div class="btn">
  <input type="submit" value="Submit" />

  </div>
</form>

Answer 3

Answer №2

If you want your email link to open like a normal mailto link, you'll need some javascript. The first step is to create a function that constructs the link for you.

function buildEmailLink() {
    var recipient = document.getElementById('recipient-email').value;
    var subject = document.getElementById('email-subject').value;

    var emailLink = "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c716559717d75705c7873717d7572327f7371">[email protected]</a>?Subject=Regarding: " + recipient + "From: " + subject;

    // Make sure to URI escape the link
    return encodeURI(emailLink);
}

Next, create a function to insert this link into the appropriate element.

function addEmailLink() {
    document.getElementById('email-element').href = buildEmailLink();
}

Lastly, make sure these functions are triggered whenever there's a change in the input fields.

<input class="email_input" type="text" name="recipient-email" id="recipient-email" placeholder="Recipient Email" onchange="addEmailLink();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange()/>

<input class="email_input" type="text" name="email-subject" id="email-subject" placeholder="Email Subject" onchange="addEmailLink();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange()/>;

Answer 4

If you want your email link to open like a normal mailto link, you'll need some javascript. The first step is to create a function that constructs the link for you.

function buildEmailLink() {
    var recipient = document.getElementById('recipient-email').value;
    var subject = document.getElementById('email-subject').value;

    var emailLink = "mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c716559717d75705c7873717d7572327f7371">[email protected]</a>?Subject=Regarding: " + recipient + "From: " + subject;

    // Make sure to URI escape the link
    return encodeURI(emailLink);
}

Next, create a function to insert this link into the appropriate element.

function addEmailLink() {
    document.getElementById('email-element').href = buildEmailLink();
}

Lastly, make sure these functions are triggered whenever there's a change in the input fields.

<input class="email_input" type="text" name="recipient-email" id="recipient-email" placeholder="Recipient Email" onchange="addEmailLink();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange()/>

<input class="email_input" type="text" name="email-subject" id="email-subject" placeholder="Email Subject" onchange="addEmailLink();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange()/>;

Answer 5

Answer №3

To complete this task, JavaScript (js) will be required.

The first step is to ensure that the href attribute is added correctly to the <a> tag, as shown below:

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e9eee6efc0edf9d7e5e2d3e9f4e5aee3efed">[email protected]</a>?subject=Your Subject&body=Your Body>send</a>

A possible solution would involve creating a function like this:

var mailButton = function mailButton(mailto, title, mailBody){
   var href = "mailto:"+mailto+"?subject="+title+"&body="+mailBody;
   var a = document.createElement(a);
   a.setAttribute('href', href);
   return a
}

Next, include a function to manage form submission and click events for the <a> element

function fakesubmit(e){
   e.preventDefault();
   var title = document.getElementById('contact-object').value;
   var mailBody = document.getElementById('contact-name').value;
   var a = mailButton(<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="731a1d151c331e0a241611201a07165d_101c1e">[email protected]</a>, title, mailBody);
   a.click();
}

Finally, create your form:

<form onsubmit="fakesubmit(e)">
  <p>
  Enter the object and your name, click on "send". The object will be in the email subject and your name will appear in the email body.
  </p>
   <input class="name_input" type="text" name="contact-object" id="contact-object" placeholder="Type the object"/>
  <input class="name_input" type="text" name="contact-name" id="contact-name" placeholder="Your name"/>

  <input type="submit" class="btn" value="Send"/>
</form>

If you require further assistance, feel free to ask.

Answer 6

To complete this task, JavaScript (js) will be required.

The first step is to ensure that the href attribute is added correctly to the <a> tag, as shown below:

<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e9eee6efc0edf9d7e5e2d3e9f4e5aee3efed">[email protected]</a>?subject=Your Subject&body=Your Body>send</a>

A possible solution would involve creating a function like this:

var mailButton = function mailButton(mailto, title, mailBody){
   var href = "mailto:"+mailto+"?subject="+title+"&body="+mailBody;
   var a = document.createElement(a);
   a.setAttribute('href', href);
   return a
}

Next, include a function to manage form submission and click events for the <a> element

function fakesubmit(e){
   e.preventDefault();
   var title = document.getElementById('contact-object').value;
   var mailBody = document.getElementById('contact-name').value;
   var a = mailButton(<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="731a1d151c331e0a241611201a07165d_101c1e">[email protected]</a>, title, mailBody);
   a.click();
}

Finally, create your form:

<form onsubmit="fakesubmit(e)">
  <p>
  Enter the object and your name, click on "send". The object will be in the email subject and your name will appear in the email body.
  </p>
   <input class="name_input" type="text" name="contact-object" id="contact-object" placeholder="Type the object"/>
  <input class="name_input" type="text" name="contact-name" id="contact-name" placeholder="Your name"/>

  <input type="submit" class="btn" value="Send"/>
</form>

If you require further assistance, feel free to ask.

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve a text and save it into a variable

Associate the right-click action with Angular Material

Text arranged in a vertical orientation with a group of text aligned along the baseline

Is it just me, or does the float left - float right combination only break in IE

Is it acceptable to include a checkbox and a hidden input within a label element?

Ways to combine duplicate entries within a column using Ruby on Rails?

Setting up the php/MVC framework on a server

A single list is utilized by multiple HTML5 selects

PHP script to populate a table with images based on certain conditions

Is there a way to make a try-catch block pause and wait for a response before moving

Using Jquery to extract URL parameters

JavaScript: Creating a new entry in a key-value paired array

Is there a way for me to retrieve information from a different website using a URL, similar to how Digg's submit button works

Validating forms using Ajax in the Model-View-Controller

Tips for expanding the content of a blogger page to fill the entire frame of the page

Accessing external data in Angular outside of a subscription method for an observable

Rect cannot be resized using mouse events

Error in Webpack: JSX elements that are adjacent must be enclosed within a wrapper tag

Looking for Assistance with Creating a Non-Adhesive Footer in CSS?

Unable to move cursor in contenteditable section