Simple newsletter subscription form template

Hello guys,

I'm looking for a simple but not archaic email subscription template - one box for entering an email and a button for submitting.

I can handle html, css and some jquery proficiently but doing ajax validation on the user side + php script which should actually send user entered email to my email address is too much beyond my skill right now.

There's always a template, do you have some links please?
Who is Participating?
Marco GasiFreelancerCommented:
Here you find all parts: the php script called sendmail.php, the javascript script called sendmail.js (what a fantasy, uh?); and the html page, maybe sendmail.html?

Feel free to ask you need some further help.

php side:
		$name = $_POST['name'];
		$email = $_POST['email'];
		$message = $_POST['message'];
		$to = 'email address here';
		$subject = 'Newletter subscribing';
		$headers = "From: " . strip_tags($email) . "\r\n";
		$headers .= "Reply-To: ". strip_tags($email) . "\r\n";
		$headers .= "MIME-Version: 1.0\r\n";
		$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
		if (mail($to, $subject, $message, $headers))
			echo 'Thank you for subsribing';
			echo 'Ooops, an error occurred on the server.';

Open in new window

<!DOCTYPE html>
<html lang="en">
           <script src=""></script>
           <script src='sendmail.js'></script>
	<div id="response"></div>
	<form role="form">
		<input type="text" id="name" placeholder="Your name" />
		<input type="email" id="email" placeholder="Your email" />
		<textarea id="message" cols="30" rows="10" placeholder="Your message"></textarea>
		<button id="send" >Send</button>

Open in new window

    <script src=""></script>
	$( document ).on( 'click', '#send', function ( e ) {
		$( '#response' ).hide();
		$( '#privacy' ).css( { "border": "none" } );
		var name = $( '#name' ).val();
		var email = $( '#email' ).val();
		var message = $( '#message' ).val();
		if ( name === '' || email === '' || message === '' )
		$.ajax( {
			type: 'post',
			url: 'sendmail.php',
			data: { name: name, email: email, message: message },
			success: function ( result )
				$( '#response' ).html( result ).fadeIn( 'slow' ).delay( 3000 ).fadeOut( 'slow' );
				$( '#name' ).val( '' );
				$( '#email' ).val( '' );
				$( '#message' ).val( '' );
			error: function ( result )
				console.log( 'result' );
		} );
	} );

Open in new window

Ray PaseurCommented:
Please have a look at this article.  I believe that it contains all of the explanation and code samples you would need to get started.  There is no AJAX involved (and none needed).  Please post back if you have any questions, ~Ray
Fajer39Author Commented:
Thank you very much guys.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.