I have a form which includes the input field and submit button.
<form class="subscribe">
<div class="">
<input type="text" placeholder="Your e-mail adresss">
<span>
<button type="button">Subscribe</button>
</span>
</div>
</form>
What is the easiest way to make this functional using front-end only so that when new email is entered I will receive an email with the new signup info. Is this possible with JS/Jquery only?
Yes this is possible now! You dont even need javascript/jquery to implement this.
There is a good API Endpoint that you can use to send an email such
as this one: https://formsubmit.co
You can read through the documentation for more information. But here is
a little snippet that you can use:
<!--
*Provide your email address on action attribute
*The email you provide on action attribute will be the one to receive an email.
-->
<form action="'https://formsubmit.co/yourEmail#email.com" method="POST">
<input name="email" type="email" required>
<!-- You can add more input/fields, this message input is just to notify you about the subscribers-->
<input hidden name="message" value="Hey! I want to subscribe on your news letter." type="text">
<button type="submit">Subscribe</button>
</form>
That's not possible in the front end. You have to do this server side.
The only thing possible with pure javascript is bringing up the users default email client with a predefined message. But the user will still have to send it.
function sendMail() {
var link = "mailto:me#example.com"
+ "?cc=myCCaddress#example.com"
+ "&subject=" + escape("This is my subject")
+ "&body=" + escape(document.getElementById('myText').value)
;
window.location.href = link;
}
If you want to sent any mail you have to use server side function, But javascript/jquery is client side script.
you can do this make a ajax request and send all data then send mail with your need.
javascript or jquery cant provide that facility because it will be loaded and executed in client side browser. To send a mail you need protocal(SMTP) and server help.
Solution:
1.Use AJAX and serialize your form elements and post it to server file
2.Create your server side file and in that get the posted value and send a mail.ex: php(server side)
mail("youremailaddress#gmail.com", "subject" .$email, $message);
Need more stuff see this ..
Related
I want users to be able to enter custom amounts in order to be redirected to paypal. I already have a form for myself to generate payment links that then generate buttons to be sent there but I want a client form to automatically send them to PayPal.
The user should fill out the form and then be sent to paypal.me/username/12 if 12 was the entered amount entered.
function process()
{
var url="https://paypal.me/username/" + document.getElementById("url").value;
location.href=url;
return false;
}
<form onsubmit="return process();" autocomplete="off">
<input type="text" name="pay" id="payamount" autofocus="">
<br><br>
<input type="submit" value="Make Payment" id="pay">
</form>
It does send the user to PayPal but to paypal.me/username/?pay=12 when it needs to be paypal.me/username/12 Not too sure how to fix this but help would be appreciated.
Thanks in advance.
This is where the problem is:
var url="https://paypal.me/username/" + document.getElementById("url").value;
where is the element with "url" id?
Now with regards to this:
It does send the user to PayPal but to paypal.me/username/?pay=12 when
it needs to be paypal.me/username/12 Not too sure how to fix this but
help would be appreciated.
The reason you're getting ?pay=12 is because your form is by default submitting with get method and that is how properties are embedded into your submitted url. so pay is the name attribute value of the payamount element.
By understanding your code, below is what should happen:
target the id="payamount" input and not id="url" which does not exist on the html you provided.
var url = "https://paypal.me/username/" + document.getElementById("payamount").value;
I have a registration form wherein one of the field is username which needs to be unique. So, I am checking it first in my database before insert proceeds. If username exists, I put the below line. My problem is after clicking OK, it refreshes the page and clears all the inputted data of the user. I know I can use return false but how do I put this on my echo?
else if(mysql_num_rows($result)>0)
{
echo '<script>alert("Username is not available")</script>';
}
else
{
insert goes here
<form id="appform" action="register.php" method="post" onsubmit="return validateform('appform');">
<input type="text" class="textarea1" name="stdname" size="30" onkeyup="isallnospace(this)" /> .
}
You are validating in the worst way possible. If you want to validate using both client side and server side script, please use ajax.
Uses of Ajax:
Update a web page without reloading the page
Request data from a server - after the page has loaded
Receive data from a server - after the page has loaded
Send data to a server - in the background
For more details, visit AJAX Tutorial
best way is to check with ajax before submit, but if you want you can add the $_POST values to the form when it returns to it like so
<input type="text" name="username" value="<?php if(isset($_POST['username'])){echo $_POST['username'];}?>" />
I want to send my data form that user type to a specific email. Example:
<form>
<input type="text" placeholder="Your name"/>
<input type="email" placeholder="Your email"/>
<textarea name="content"></textarea>
<input type="button" onclick="sendmail()"/>
</form>
When user clicks the button, an email will be sent to a specific address like admin#admin.com with email's content is what user type in the form. Can we reach that result with only JavaScript or jQuery?
You can't do it without additional modules :
This is a good tutorial , you could create a dedicated address reported#yoursite.com and have it email your admin address when a user registers
<a id="emailLnk" >send mail</a>
<script type="text/javascript">
$(document).ready(function() {
$("#emailLnk").click(function(){
document.location.href = "mailto:xyz#something.com";
});
});
</script>
No, unless someone took the time to rewrite a SMTP client or sendmail in JavaScript, which is not the case. Moreover, that would mean giving away the SMTP password (which is bad) or not using a SMTP at all, meaning that almost all free/commercial providers will reject your e-mail.
You should set up a minimal PHP script to receive a POST request and forward the body as e-mail to your designed account. You should be able to do it in a handful of lines.
For example, the website https://talky.io/ has a form on its homepage. When you enter text into the form and hit the button, you're taken to a page that's https://talky.io/[your text]. How do you do this? What's the best way to do it?
Thank you!
You can use onSubmit and change the action attribute of the form via javascript, then return true. The code could look like this:
HTML from linked page:
<form id="createRoom">
<input id="sessionInput" placeholder="Name the conversation" autofocus="autofocus">
<button type="submit">Let’s go!</button>
</form>
Js code:
document.getElementById("crateRoom").onsubmit = function(){
var url = encodeURIComponent(document.getElementById("sessionInput").value);
document.getElementById("crateRoom").action = "/" + url;
return true;
}
It is server-side script job. You can look at some MVC framework and the url parameters
You can use GET method of form;for example:
<form action="index.php" method="get">
Page: <input type="text" name="page">
<input type="submit" value="Submit">
</form>
that after submit will go to index.php?page=yourEnteredPage.
You can use PHP symfony or codeignitor, if you use .net then create a new MVC project.
But if you only need to change urls like
www.mysite.com/mypage.php?something=value
to
www.mysite.com/value
You can do a mod rewrite in apache or if you're using .net then use RegisterRoutes in your global.asax.cs
Using a form you can submit data to a location/url that was given in the action attribute of the for, for example
<form method="POST" action="http://example.com">
<input name="first_name" type="text" value="" />
<!-- Form elements -->
<input type="submit" name="mySubmitButton" value="Submit">
</form>
This form will submit the form data to the given action url when submit will be pressed and on the derver data could be retrieve using
$first_name = $_POST['first_name';];
and so on. The method POST is used to submit the form in the post array so you can retrieve data using $_POST['formfieldname'] and if you use method="GET" then you can get submitted data from $_GET variable, like, $fname=$_GET['first_name']. GET has limitation of amount when submitting data (safe to use up to 2000 characters IE's limit) and is visible to address bar of the browser and not being used for login (password) and POST can send more data than GET and also not visible to address bar.
You may read this.
Fairly possible with URL Rewriting
http://en.wikipedia.org/wiki/Rewrite_engine
I recently created a simple site for a friend's business using an HTML 5 template. It contained some cutesy Javascript elements too. The website URL is www.michianamemories.com
One of the elements is a Contact Form at the bottom of the page. It looks like the "Send Message" button is coded to do absolutely nothing. How simple is it to have this form forward the user-entered values (ie: their name, e-mail, and their message) to a dedicated e-mail inbox?
If it's not that simple, what other options are available to make the form functional but also integrated with the site's general theme?
I'm assuming the answer is very simple, but I'm a novice at HTML 5 and am totally clueless about Javascript. Your help is appreciated in advance.
HTML doesn't allow you to submit a form to an email.
You could use mailto but it's not the friendliest piece of functionality. It will open up Outlook and dump the form data into the email content. Has a lot of issues though.
More info on mailto
My recommendation is to use a "form mail script". This is only done on server side though so you'll need to have a web server. You'll need to google and read up on them.
Reference about form submit options
It's not possible in pure Javascript. Sending email requires server-side processing.
There are several websites that will let you generate simple email forms, check out: http://www.google.com/search?hl=en&safe=off&q=email+form+generator&aq=5&aqi=g10&aql=&oq=email+form
In my opinion the best thing you can do is to create a simple Back-End App in PHP.
Create file mail.php in your root directory.
In your HTML form tag you need to add the action attribute with the path to mail.php file and the method attribute, so that the form knows which HTTP Request Method use to send the data <form action="mail.php" method ="post">. This will add the action to trigger for the 'Send Message' button, that you said is not working.
This happens because now the button knows what to do if you click it. It takes all of your data from the form input fields and send them to the mail.php file. This file needs to fetch them and validate them. (You should at least create the validation for the required fields in your form, to check if they're not null. You can make some extra validations in your build-in html attributes or with some help of the JavaScript)
The most important thing now, is to create the Mail function in your mail.php. Here is all the documentation you need to do this: PHP Mail Documentation.
Here is the code (your site is not working so I'm just improvising with the input fields):
HTML:
<form action="mail.php" method="post">
<label for="name-field">Name:</label>
<input id="name-field" name="name" type="text" required>
<label for="surname-field">Surname:</label>
<input id="surname-field" name="surname" type="text" required>
<label for="message-field">Message:</label>
<textarea id="message-field" name="message" required></textarea>
<label for="mail-field">Your e-mail:</label>
<input id="mail-field" name="mail" type="mail" required>
<button type="submit">Send Message</button>
</form>
PHP:
// Validating if everything is filled
if(isset($_POST['name']) && isset($_POST['surname']) && isset($_POST['message']) && isset($_POST['mail'])
{
$to = "example#mysite.com";
$subject = "Automatically generated messege from" . $_POST['name'] . ' ' . $_POST['surname'];
$body = $_POST['message'];
$headers = 'To: ' . $to . "\r\n";
$headers .= 'From: ' . $_POST['mail'];
// Send mail function
if(mail($to, $subject, $body, $headers))
{
echo 'Mail sent successfuly!';
} else {
echo 'Error occurred while sending the message';
}
}
As mentioned in the other answers, you can't use HTML5 to send e-mail. This needs to be done on your server.
One easy and free solution is to use Google Apps Script though. You can publish your Apps Script as a Web App and have a doPost method like this:
function doPost(e){
var email = e.parameter.email;
var subject = 'E-mail from website';
var message = e.parameter.message;
MailApp.sendEmail(emailAddress, subject, message);
return ContentService.createTextOutput('E-mail sent!');
}
And in your HTML, you would have a form like this:
<form action="url to your deployed app script" method="post">
<input type="email" name="email"></input>
<textarea name="message"></textarea>
<input type="submit" value="Submit"></input>
</form>
The URL to put in the action attribute will be shown when you deploy your Apps Script as a Web App: