I have a simple form on my website where it ask the user for their email and the city they're located in like this:
I'm using EmailJS (emailjs.com) and MailJet (mailjet.com) services and while EmailJS and MailJet are doing their jobs, I'm ultimately not able to view the actual form data such as the email and city that was enter anywhere on MailJet, EmailJS or emails that are sent to me. I'm new to web development.
Here's my html code:
<form class="form-inline" type="text" onsubmit="emailjs.sendForm('mailjet', 'myTempNameFromEmailJS', this); return true;" method="get">
<div class="form-group">
<input type="email" class="contactUsEmail" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="contactUsEmail" placeholder="City">
</div>
<button type="submit" class="btn btn-primary contactUsButton">Signup</button>
</form>
What in the world am I doing wrong? I've essentially been working on this since yesterday and can't figure out what I'm doing wrong.
According to the emailjs docs at https://www.emailjs.com/docs/api-reference/emailjs-sendform/ the third parameter of the sendForm method should be "form_id", the id of the form used to collect the parameters. Currently you're sending "this", but that's the variable which (in that particular context) holds the JavaScript representation of the whole form element.
I think you should change it to this.id:
emailjs.sendForm('mailjet', 'myTempNameFromEmailJS', this.id);
Im not familiar with mail jet, however, usually to gain the values out of your forms you need to add the name attribute, for example
<input type="email" class="contactUsEmail" placeholder="Enter email" name="contactUsEmail"/>
name="contactUsEmail"/>
Related
I'm really stuck on this I'm not sure how I would code text being sent or where i could send it to
<div class="comment-box">
<h2> submit quiz </h2>
<form action="#">
<input type="text" name="full_name" placeholder="Full Name...">
<input type="email" name="email" placeholder="Email Address...">
<button type="submit">submit comment</button>
</form>
any help or ideas on how i can do this would be great
Assuming you want to receive this information via email and need a quick and easy solution (however not reccomended), you can use this form tag
<form action=”mailto:contact#yourdomain.com” method=”POST” enctype=”text/plain” name=”EmailForm”>
Ensure you change the email in the form action="" tag.
You can also look into using a more advanced method through PHP.
So I have a registration table in my website that has fields that need to be filled before submission. As far as I know, I have two options to make sure of that. First one is to use the 'required' attribute for each input or to check them at PHP level and using js. Which one is the better practice? Is there a better way to do it? And why?
Here is the way that I do it using HTML:
<form role="form" action="registration.php" method="post" id="login-form" autocomplete="off">
<div class="form-group">
<label for="username" class="sr-only">username*</label>
<input type="text" name="username" id="username" class="form-control" placeholder="Enter Desired Username" required>
</div>
<div class="form-group">
<label for="email" class="sr-only">Email*</label>
<input type="email" name="email" id="email" class="form-control" placeholder="somebody#example.com" required>
</div>
<div class="form-group">
<label for="password" class="sr-only">Password*</label>
<input type="password" name="password" id="key" class="form-control" placeholder="Password" required>
</div>
<input type="submit" name="submit" id="btn-login" class="btn btn-custom btn-lg btn-block" value="Register">
</form>
In the PHP/JS version the code should look like this:
if (empty($username) || empty($email) || empty($password)){
echo "<script>alert('Fields cannot be empty')</script>";
}
I appreciate your help.
My suggestions is to have both, client & server side validation. That way you reduce server load & it's good if you later turn it into the API for eg. Hope this helps.
Client-side validation is the faster way to deal with the validation process than on the server-side because all the tasks happens on the webpage there itself and the network time form client to server is saved.
But in only doing client-side validation there is a risk of attacks clients which can easily bypass the client-side so here it is need to validate the strings submitted by the cilent on the server-side which will save your data from the dangerous inputs.
Note : In short, in terms of faster validation client-side is better and in terms of the security of the data server-side is a better option.
The truth is the server is always out a limitation on every website so as all we can we have to reduce the computing and programs from server to Client-side and to lend the render to user's computer. so if you can use js to do that never interfere PHP on this. just use js and if your problem is going to handle with pure CSS too is going to be very better.
In my polymer 2 app I have something like this:
<form class="styling" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email">
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password">
</div>
<div class="styling">
<a class="styling" on-tap="doRequestFunction">Login<a>
</div>
</form>
My issue is there are a lot of sources saying what works and what doesn't and I've tried removing the outer div, I've tried changing the email to a username, I've tried to change the <a> to an <input type="submit">. I've also tried to add an invisible username input below the email input. I have a database element that does my ajax calls so ideally I'd like to just call the request function on a form submit, but there doesn't appear to be a way to do this because it wants me to perform the action with a file or something like that.
TL;DR is there a way to do this:
<form class="styling" onSubmit="doTheRequestFunction" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email"/>
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password"/>
</div>
<div class="styling">
<input class="styling" type="submit">Login</input>
</div>
</form>
There doesn't appear to be a way to do this in polymer and the ways that do don't request for the users password and are depreciated anyways. Using Chrome primarily.
EDIT: Please, no JQuery, only Javascript. I don't know what JQuery is doing half the time and it's sloppy.
autocomplete is an HTML attribute (https://www.w3schools.com/tags/att_input_autocomplete.asp). It's either on or off. It's designed to tell the browser whether it should attempt to autocomplete a field or not. The default is on so you shouldn't have to set it unless you're trying to prevent the browser from autocompleting.
Try to remove all your autocomplete attributes, and submit your form. The browser should ask you if you want to save your username and password at which point it should be populated next time you come to your form.
Also, you have an bad tag on the end of your submit button: </inoput>
<input type="submit" value="Send Request"> should be fine.
Boys, I found it.
paper-input autocomplete fails to fill
This is a polymer specific issue I was having. Currently polymer requested support for their auto-fill apparently and it's still not there. This is the solution for now. Pop that bad boy into you index.html and weep tears of joy.
Just make it
<input name="password" type="password"/>
So if input field has attribute type as password it will trigger browser to remember.
I'm creating a new website for my company using mobirise. The mobirise templates come with predesigned email forms that were created using formoid. When a user uses the email form to send an email the information is sent to formoid and then formoid sends the information to me at my email address. All of the coding in the email form is behind the scenes, so I can't actually see what it's doing.
On one of my forms I need to have the page redirect to another page where users will be able to upload a file to my server using another script. I have contacted mobirise to ask them if they could tell me how to redirect after the user clicks the submit button, but they said I had to contact formoid. So far I haven't gotten a response back from formoid so I thought I would try to look for a solution on my own.
I have tried adding javascript code to the coding on the page, but as I said, most of the coding of the form is somewhere behind the scenes and I can't figure out exactly which coding is performing the form's submit action.
What I was hoping for is a suggestion about how I could add some additional JavaScript coding that would watch for the submit button in the form being clicked and then redirect the page. I'm not positive this is even possible, but I figured that if anyone would be helpful it would be the people who post solutions here. I'm rather new to JavaScript, so I'm not sure where to start and I don't want to experiment for hours and hours and get frustrated because nothing is working.
So, if anyone can give me an idea here I would greatly appreciate it. Below is the coding for the form in case it helps:
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">Thanks for uploading your audio file!</div>
</div>
<form action="https://mobirise.com/" method="post" data-form-title="FTP Upload">
<input type="hidden" value="NTcF3QgiRzQHgm5xv+UnYlBBGPR27Q6NZwj5EPuecwUNxuL8vndMlaaoM2PpzlkXlNaFBrtr2mU+CfZxfef01mKMpaQkezUMhyWXZgieem0/pt/V/nU0iUetLNqsEpj7" data-form-email="true">
<div class="row row-sm-offset">
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-name">Name<span class="form-asterisk">*</span></label>
<input type="text" class="form-control" name="name" required="" data-form-field="Name" id="form1-3o-name">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-email">Email<span class="form-asterisk">*</span></label>
<input type="email" class="form-control" name="email" required="" data-form-field="Email" id="form1-3o-email">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-phone">Phone</label>
<input type="tel" class="form-control" name="phone" data-form-field="Phone" id="form1-3o-phone">
</div>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="form1-3o-message">One or more files are being uploaded to the WORDsmart server. </label>
<textarea class="form-control" name="message" rows="7" data-form-field="Message" id="form1-3o-message"></textarea>
</div>
<div><button type="submit" class="btn btn-info">CONTACT US</button></div>
</form>
in this case, I would recommend you to use another form. As far as I know form wouldn't work if you would bring any changes to form of Mobirise. Just use another form creator and implement it manually to Mobirise's project after publication to the local folder (the project of Mobirise).
You can read tutorial about publishing here: https://mobirise.com/help/local-host-369.html
Just change the action field in the first line of the form, to the page were you would like to send the data.
The next hidden input line with the public key may be deleted also.
I have a Coming soon page and have a countdown to beta launch and a field where user can enter their email to be added to a mailing list for the beta launch.
How do I receive the email from the field and email myself the user's email upon submit?
Is there a third party service I can use for this? And javascript or jquery plugin?
This is the form with no javascript:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control transparent" placeholder="Your email">
</div>
<button type="submit" class="btn btn-warning btn-fill">Notify Me</button>
</form>
You have to write backed code with whatever you have on server if it is PHP you could store data from form in file or send it to mail.
Form guide with better description of your problem