Why email js not sending mail when using from react app? - html

Email js is not sending any email when i am sending from my react app contact us page , though email is working fine when i am testing it from the website itself . here is the code for email js i have used. I have removed the unncessary part.
function Contactme() {
const form = useRef();
function sendEmail(e){
emailjs.sendForm('gmail', 'template_ppq****', form.current, 'iWxx2qNPr0xxu****')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
e.target.reset();
}
return (
<div>
<div className="contact-box">
<div className="details">
<h2>Contact</h2>
<p>Fill up the form to contact</p>
</div>
<div className="sendmsg">
<form action="" onSubmit={sendEmail} ref={form}>
<div className="contact-right name-input" name="name">
Your Name
<input type="text" className="contact-right-input email-input" name="from_name" />
Your email
<input type="text" className="contact-right-input message-input" name="email"/>
Subject
<input type="text" className="contact-right-input message-input" name="subject"/>
Your message
<textarea id="" cols="30" rows="10" style={{border:"1px solid lightblue"}} name="message"></textarea>
<button className="contact-btn" >Submit</button>
</div>
</form>
</div>
</div>
</div>
)
}

Add an ID to your input field and ensure the ID is the same with the set up on your Emailjs dashboard. I hope this helps

This is what worked for me. At emailjs.sendForm('gmail'.......... instead of 'gmail' use your service IDthis one

Related

How to send data from a HTML form to a Google Apps Script

I am really new to google script and HTML and I am trying to create a program that accepts multiple inputs from a user using a HTML form, and when the user clicks submit, the data is stored inside a variable and can be used inside a .gs file from a .html . I have gotten the form to work but whenever I clicked "Submit" nothing occurs. After some troubleshooting, I think the problem is at my form_data() function. What I would like to know is how to compile the data inputs from the form and send it to my runsies() fucntion. Thank you in advance! Here is my HTML code below:
const ui = SpreadsheetApp.getUi();
function onOpen() {
ui.createAddonMenu()
.addItem('New Entry', 'newEntry')
.addToUi();
};
function newEntry() {
var html = HtmlService.createHtmlOutputFromFile("input")
.setWidth(750)
.setHeight(550);
//Display the dialog
var dialog = ui.showModalDialog(html, "External Organisations");
};
function runsies(info){
//Display the values submitted from the dialog box in the Logger.
Logger.log(info);
};
<html>
<head>
<!--Set the font of the form-->
<style>
body {font-family:Courier;}
</style>
</head>
<!--Main body design of the form-->
<body>
<!--Create text boxes for user input-->
<form action="" method="get" class="form-example">
</script>
<div class="form-example">
<label for="name"><b>Organisation: </b></label><br>
<input type="text" name="name" id= "txt1" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="email"><b>Email: </b></label><br>
<input type="text" name="email" id="txt2" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="phone"><b>Phone: </b></label><br>
<input type="text" name="phone" id="txt3" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="poc"><b>Point of Contact: </b></label><br>
<input type="text" name="poc" id="txt4" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="susmi"><b>SUSMI Contact: <b></label><br>
<input type="text" name="susmi" id="txt5" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="stats"><b>Status: <b></label><br>
<input type="text" name="stats" id="txt6" style="border-radius:3px" required><br><br>
</div>
<div class="form-example">
<label for="note"><b>Notes: </b><br><textarea rows="5" cols="50" id="multiLineInput" style="border:2px solid black;border-radius:3px">
</textarea></label><br><br>
</div>
<input type="button" value="Submit" onclick="form_data()">
<input type="button" value="Close" onclick="google.script.host.close()" />
<!--Once user clicks submit, compile info and send it to main .gs code-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function form_data(){
var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
google.script.run.withSuccessHandler().runsies(info);
closeIt()
};
function closeIt(){
google.script.host.close()
};
</form>
</body>
</html>```
var info = [txt1,txt2,txt3,txt4,txt5,txt6,multiLineInput];
Your array is just a bunch of element id's if you want the data use `document.getElementById().value for the text boxes
Read about client to server communication google.script.run
javascript reference

Not going to specific URL this.router.navigate() in AngularJs

I am making a registration form in angularJS and I use the bootstrap template for design.
This is my form and path to the form page is http://localhost:4200/signup
<form method="post" (submit)='register(username.value,email.value,password.value)'>
<div class="form-group">
<label for="name">Full name</label>
<input type="text" id="name" #username class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="remail">Email address</label>
<input type="email" id="remail" #email class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<label for="rpassword">Password</label>
<input type="password" #password class="form-control" id="rpassword" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
But the problem is that it when I click submit button or hit enter, It automatically refresh the page and shows Cannot POST /signup.
As this is my component.ts file
register(name,email,password) {
this.userService.registerUser(name, email, password).subscribe(data => {
if (data.success) {
console.log('reaches');
this.router.navigate(['user']);
} else {
console.log('error');
}
});
}
It is trying to go to the /signup path in post method but in component.ts file I give the path to '/user'
How can it automatically go-to /signup? And how to stop that.
Your form is trying to post data to a server. It sounds like you don't have a server which can handle the post, so you get the error.
To fix the problem, you need a server which can handle the form post.

Adding destination email to contact form

I have a contact form at codepen.io, but it is not working. I don't know where I must put the email address that messages will be sent to.
<form class="cf">
<div class="half left cf">
<input type="text" id="input-name" placeholder="Name">
<input type="email" id="input-email" placeholder="Email address">
<input type="text" id="input-subject" placeholder="Subject">
</div>
<div class="half right cf">
<textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
</div>
<input type="submit" value="Submit" id="input-submit">
</form>
Thanks in advance for any help.
If you just want a really basic form to send an email, you can set the form action to "mailto:user#email.com". This will open the users default mail client and populate the subject and body with the contents of inputs named "subject" and "body" in the form. The form itself won't send email though - you would need PHP for that.

Form submit is not sending an email

I'm having a problem with hosting24.com and I have a submit form which doesn't seem to be sending the emails no matter what I try.
This is what I've tried
<section id="contact-full-2" class="dark-bg bg-color1 cover-bg" style="background-image:url(images/bg29.jpg)">
<div class="container">
<h2 class="title">Order Service</h2>
<p class="sep-bottom">Paypal will hold the money until both parties agree to full satisfaction.<br>Lets begin! </p>
<form action="scripts/contact.php" role="form" id="contact_form">
<div class="form-group">
<input type="text" class="form-control" id="contact_name" placeholder="Full name" name="name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="contact_email" placeholder="Email Address" name="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="4" placeholder="Your message or question" id="contact_message" name="message"></textarea>
</div>
<button type="submit" id="contact_submit" data-loading-text="•••" class="btn btn-lg btn-block btn-primary">Order</button>
</form>
If you are on localhost the mail will go to a folder named MailOutput. If you are using free hosting most of the hosts disable the mail() function due to its wide misuse. If you are using a paid hosting service and you have't changed the code from its working condition you may have to contact the host provider. It may be due to some server error. Check if any of the above are applicable to you.
According to your reply. This is because you are using a gmail address in the FROM section of your email. Your server does not allow that to prevent fake emails from being send. So you will have to try the following code
<?php
$to = "someone#example.com";
$message = $_POST['message'];
$body = "From: $name_field\n Message:\n $message";
$subject = "Contact";
$name_field = $_POST['name'];
mail($to,$subject,$body);
?>

HTTP POST to web login form. Joomla, INVALID TOKEN

I am trying to create a HTTP POST to a joomla web login form for a web page.
I used this before and I am not new to this but I am stumped, I cannot get any response other than 'invalid token'
The purpose of this is to have a POST that I can use for a mobile application to 'remember' the password as a temporary solution.
I HAVE used Charles to check the difference between the HTTP Requests and I see no difference between if I use the login form manually and if I use a POST in the URL
My Request is
http://www.example.com/member-login?task=user.login&username=SECRET&password=SECRET&return=aW5kZXgucGhwP29wdGlvbj1jb21fdXNlcnMmdmlldz1wcm9maWxl&1132a16eb61f5659e8ff62fb935f6037=1
The HTML code is
<form action="/member-login?task=user.login" method="post" class="form-horizontal" name="login_form">
<div class="joomla_login">
<fieldset class="input">
<h2>Login</h2>
<p>Login using the email address and the password that you used when you registered.</p>
<p>
<span class="add-on">
<label id="username-lbl" for="username" class=" required">User Name<span class="star"> *</span></label> </span>
</p>
<div class="controls">
<input type="text" name="username" id="username" value="" class="validate-username required" size="25"/> </div>
<p>
<span class="add-on">
<label id="password-lbl" for="password" class=" required">Password<span class="star"> *</span></label> </span>
</p>
<div class="controls">
<input type="password" name="password" id="password" value="" class="validate-password required" size="25"/> </div>
<div style="text-align: center; padding-top: 20px; padding-bottom: 20px;">
<button type="submit" class="btn btn-primary dummy-button" >Log in</button>
</div>
<input type="hidden" name="return" value="aW5kZXgucGhwP29wdGlvbj1jb21fdXNlcnMmdmlldz1wcm9maWxl" />
<input type="hidden" name="1132a16eb61f5659e8ff62fb935f6037" value="1" /> </fieldset>
</div>
</form>
Thanks in advance
Try this,
In the Joomla installation site , you have to create a external script(file). the access the Framework there with following code.
define( '_JEXEC', 1 );
define('JPATH_BASE', dirname(__FILE__) );//this is when we are in the root
define( 'DS', DIRECTORY_SEPARATOR );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
$mainframe = JFactory::getApplication('site');
$mainframe->initialise();
Now you will be able to use all Joomla libraries and functions on the page.
simple check your login details with following codes.
$credentials['username'] = $data['username']; //user entered name
$credentials['password'] = $data['password']; //users entered password
$app = JFactory::getApplication();
$error = $app->login($credentials, $options);
if (!JError::isError($error)) {
// login success
}
else{
//Failed attempt
}
Make sure this script is available in public access so pass any secret key to access only with your additional encrypted parameter.
Hope it helps..