Required attributes for input not working on form submit - html

I wrote this simple form that should require the users to input their phone number if the submit button is hit. Instead, nothing happens. Can someone please help me?
Here is the code for my form:
<form id="subscribeForm" method="POST" novalidate="novalidate">
<div class="payment margin-top-30">
<div class="payment-tab payment-tab-active">
<div class="payment-tab-trigger">
<input checked id="{PAYMENT_TYPES.folder}"
class="payment_method_id" name="payment_method_id"
type="radio"
value="{PAYMENT_TYPES.id}" data-name="m-pesa2">
<label for="{PAYMENT_TYPES.folder}">{PAYMENT_TYPES.title}</label>
<img class="payment-logo {PAYMENT_TYPES.folder}"
src="{SITE_URL}includes/payments/{PAYMENT_TYPES.folder}/logo/logo.png"
alt="{PAYMENT_TYPES.title}">
</div>
<div class="payment-tab-content">
<p>
A Push notification shall be sent to the Phone
Number to complete payment.
</p>
<div class="payment-tab-content">
<div class="row payment-form-row">
<div class="col-12">
<div class="card-label form-group">
<input type="text" class="form-control"
name="phone" placeholder="Phone Number" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="Submit" class="button big ripple-effect
margin-top-40 margin-bottom-65 subscribeNow"
id="subscribeNow">submit</button>
</form>

Remove novalidate="novalidate" from <form>

Related

how to get message using post method in HTTP

In my web application there is a contact form where users can contact me, and send me messages but I don't know how to handle this and receive those messages.
I am attaching the screenshot of the particular "contact-me" section as well as code below.
Thanks in advance for helping me out !
<div class="text">Message me</div>
<form class="contact-form" action="#" method="POST">
<div class="fields">
<div class="field name">
<input type="text" class="fullname" placeholder="Name">
</div>
<div class="field email">
<input type="text" class="email-input" placeholder="Email">
</div>
</div>
<div class="field">
<input type="text" class="subject" placeholder="Subject">
</div>
<div class="field textarea">
<textarea class="message" cols="30" rows="10" placeholder="Message.."></textarea>
</div>
<div class="button-area">
<button class="send-msg" type="submit" name="send">Send message</button>
<div class="error-box"></div>
</div>
</form>
[contact me screenshot]
[1]: https://i.stack.imgur.com/64qQH.png

Html 5 required field validator is not showing validation message

I am having a simple html form with the required validator set to one of its input field, but I do not get the validation message
Can you please help where am I going wrong??
<form id="newrentalform">
<div class="form-group">
<label>Customer</label>
<div class="tt-container">
<input id="customer" type="text" class="form-control" required>
</div>
</div>
<div class="form-group">
<label>Movie</label>
<div class="tt-container">
<input id="movie" type="text" value="" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul id="movies" class="list-group"></ul>
</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>

Form redirect to same page, but showing that not exist

Hello I have a really strange problem with html form. I am using Wordpress and I created my custom html form. When i submit the form it redirects me on the same page url, but showing me that the page doesnt exist.
My form:
<form action="" method="post">
<div class="form-group">
<input type="text" name="name" class="form-control input-text" placeholder="Vaše jméno a příjmení" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" placeholder="Váš e-mail" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control input-text" name="subject" placeholder="Předmět zprávy" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="message" rows="5" placeholder="Vaše zpráva pro nás..."></textarea>
<div class="validation"></div>
</div>
<div class="row">
<!-- Google reCAPTCHA widget -->
<div class="col-lg-8 col-sm-8">
<!-- recaptcha here -->
</div>
<div class="col-lg-4 col-sm-4" style="padding-right: 0; padding-left: 0;">
<div class="text-center" style="margin-right: 7px;"><button name="submit" style="width: 135px; height: 75px; padding:0 !important;" type="submit" class="input-btn">Odeslat</button></div>
</div>
</div>
</form>
I tried to hide all my php code behind, also hide google recaptcha, but nothing works and the problem is elsewhere. My action is also empty, just set method.
What is wrong, any suggestions?
You have to change the name of your field name="name" to something else.
for more information you can read here
https://wordpress.stackexchange.com/questions/11749/why-when-i-submit-a-form-in-wordpress-it-loads-a-404-page-though-url-is-correct
Perhaps the problem is the submit button.
When you create a form, the submit button is an input as well.
You may try
<input type="submit" value="submit" yourtags="yourvalue">
See https://www.w3schools.com/html/html_forms.asp for more data.
EDIT: if you are trying to send the action to the same page, omit the action attribute. Perhaps leaving it blank causes an error.

how to make mailto: code work in custom submission for template?

So i was given a custom submission form HTML and CSS code template as shown below
I want to add the HTML mailto: script, so that anytime a employee enters a ticket, it will send to our help desk ticket email. My issue is i am completely lost on where to put it in the code itself so that when they click the submit now icon, it will send to the given address.
<!-- Main -->
<section id="main" class="container 75%">
<header>
<h2>Help Desk Ticket</h2>
<p>Submit a Help Desk Ticket to IT</p>
</header>
<div class="box">
<form method="post" action="#">
<div class="row uniform 50%">
<div class="6u 12u(mobilep)">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="6u 12u(mobilep)">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
</div>
<div class="row uniform 50%">
<div class="12u">
<input type="text" name="subject" id="subject" value="" placeholder="Subject" />
</div>
</div>
<div class="row uniform 50%">
<div class="12u">
<textarea name="message" id="message" placeholder="Description of Problem" rows="6"></textarea>
</div>
</div>
<div class="row uniform">
<div class="12u">
<ul class="actions align-center">
<li></a><input type="submit" value="Submit Ticket" /></li>
</ul>
</div>
</div>
</form>
</div>
</section>
All i want is for them to be able to click "submit ticket" and it will send to our company IT help desk email.
change this
<form method="post" action="#">
to this
<form action="mailto:someone#example.com" method="post" enctype="text/plain">
editing the email address with the recipient you want to send the mail to

Formspree form not working on custom designed contact form

I am hosting a site on github i.e. githubpages.AS It is a static site I used Formspree for my contact form but unfortunately it is not working with custom designed Contact form (with required parameters put in specified fields).
But finally the clicking of submit button does no action at all..
Here is the code I am implementing for the form.
<div class="col-lg-6">
<form action="action="https://formspree.io/jmscb56#gmail.com" method="POST" role="form" class="contactForm">
<div class="row">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<div class="col-lg-6">
<div class="form-group contact-block1">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<textarea class="form-control" name="message" rows="6" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
</div>
<div class="col-lg-12">
<!-- <input type="submit" class="btn btn-defeault btn-send" value="Send"> -->
<button type="submit" value="Send">Send</button>
</div>
<input type="hidden" name="_next" value="https://ghac-2017.github.io/#contact" />
</div>
</form>
</div>
Any help would be appreciated..As I cannot find what i felt short of..
Actually You cannot use formspree form as per your own customization , i.e. editing the basic (given/allotted) form values. It will work well when you use the given form values without your own customization , it will loose its functionality if you edit the basic layout of the given form by formspree.