Hello I have a divi contact form module. website is not wordpress. I want to display a success message after user submits form. How can I go about it. Tried many ways.
The form appears below.
<div class="et_pb_module et_pb_contact_form_0 dct-contact-forn et_pb_contact_form_container clearfix"
data-form_unique_num="0"
id="et_pb_contact_form_0">
<div class="et-pb-contact-message"><p>Thanks</p></div>
<div class="et_pb_contact">
<form action="contact.php" class="et_pb_contact_form clearfix"
method="post">
<p class="et_pb_contact_field et_pb_contact_field_0 et_pb_contact_field_last"
data-id="name_2" data-type="input">
<label class="et_pb_contact_form_label"
for="name">Name</label>
<input class="input" data-field_type="input" data-required_mark="required" id="name"
name="name" placeholder="Name"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_1 et_pb_contact_field_half"
data-id="email" data-type="email">
<label class="et_pb_contact_form_label" for="email">Email
Address</label>
<input class="input" data-field_type="email" data-required_mark="required" id="email"
name="email" placeholder="Email Address"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_2 et_pb_contact_field_half et_pb_contact_field_last"
data-id="subject" data-type="input">
<label class="et_pb_contact_form_label" for="subject">Subject</label>
<input class="input" data-field_type="input" data-required_mark="required" id="subject"
name="subject" placeholder="Subject"
type="text" value="">
</p>
<p class="et_pb_contact_field et_pb_contact_field_3 et_pb_contact_field_last"
data-id="message" data-type="text">
<label class="et_pb_contact_form_label"
for="et_pb_contact_message_0">Message</label>
<textarea class="et_pb_contact_message input" data-field_type="text"
data-required_mark="required"
id="message"
name="message"
placeholder="Message"></textarea>
</p>
<input name="et_pb_contactform_submit_0" type="hidden"
value="et_contact_proccess">
<div class="et_contact_bottom_container">
<button class="et_pb_contact_submit et_pb_button" name="submit"
type="submit">Submit
</button>
</div>
<input id="_wpnonce-et-pb-contact-form-submitted-0"
name="_wpnonce-et-pb-contact-form-submitted-0"
type="hidden"
value="7dbdd1dfcb"><input name="_wp_http_referer"
type="hidden"
value="/?page_id=1750">
</form>
That is what it looks like. I really need assistance. Anyone here that could help, would appreciate your time and efforts. thanks in advance.
This is what I'm currently using to trigger it
GET FREE QUOTE
then this is the html code
<div id="demo" class="collapse">
<br><br><br><br><br><br><br><br>
<div class="wrap-type-input">
<form id="get_free_quote" class="contact-form" method="post" action="contact/contact-process.php">
<div class="input-wrap name">
<input type="text" value="" tabindex="1" placeholder="Name (*)" name="name" id="name" required="">
</div>
<div class="input-wrap name">
<input type="text" min="0" value="" accept="*/phone" tabindex="1" placeholder="Phone (*)" name="phone" id="name" required="">
</div>
<div class="input-wrap email">
<input type="email" value="" tabindex="2" placeholder="Email (*)" name="email" id="email" required="">
</div>
<div class="textarea-wrap">
<textarea class="type-input" tabindex="3" placeholder="Items you Need" name="message" id="message-contact" required=""></textarea>
</div>
<div class="subscribe">
<button type="submit" id="submit" class="button" name="submit">Send Message</button>
</div>
</form>
</div>
</div>
I will really be grateful for an answer
I have the following form that I want to use the bootstrap-validator:
<form method="POST" action="http://localhost:8000/register/researcher" accept-charset="UTF-8" data-toggle="validator" novalidate="true">
<input name="_token" type="hidden" value="v5VF4sgb0zOrxzAihpEhkezccUWHPpXO5CnnmIK7">
<div class="from-group">
<input class="form-control" placeholder="Nome" required="required" name="name" type="text">
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Email" data-error="O email inserido é inválido." required="required" name="email" type="email">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Senha" data-minlength="6" id="inputPass" required="required" name="password" type="password" value="">
<span class="help-block">Senha de no mínimo 6 caracteres</span>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="Confirmar senha" data-match="#inputPass" data-match-error="Senhas inseridas são diferentes" required="required" name="password_confirmation" type="password" value="">
<div class="help-block with-errors"></div>
</div>
<br>
<div class="from-group">
<input class="form-control" placeholder="CPF" required="required" name="cpf" type="text">
</div>
<br>
<div class="text-center">
<input class="btn btn-primary disabled" type="submit" value="Enviar">
</div> </form>
I'm importing the validator.js and somehow it's working (it disables the submit button) but no erros are shown when I test the form. Can you help me to find where I'm doing something wrong?
(Plus: I'm using the laravel HTML Form Facades to generate this form)
Update the class from-group to form-group.
Init bootstrapValidator instance by the following code.
$(function () {
$("#your form id").bootstrapValidator();
);
I am trying to do a simple form validation using angular js. But it doesnt seems to work and I am not getting what I am missing.
HTML
<form role="form" class="ng-pristine ng-valid" name="registerForm">
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" type="text"
autofocus="" required ng-class="{'has-error': registerForm.firstname.$invalid}">
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-class="{'has-error': registerForm.email.$dirty}">
<div ng-show="registerForm.email.$dirty">Email Invalid</div>
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit"/>
</fieldset>
</form>
Now the issue is, I am expecting that if I start entering invalid email then it will show me error message "Email Invalid". But that doesn't happen.
Also when i put a debug before submitting blank form, it says "registerForm.$valid = true"
Any guess what am I missing. Any module that i need to include ?
Here is Plunker
First, you need registerForm.email.$error.email to trigger the 'invalid email' alert.
Second, I guess you have to bind these input fields with ng-models, but I am not sure if this is necessary.
One more thing, add 'novalidate' to the form element.
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" type="email" value="" ng-model="" >
<div ng-show="registerForm.email.$error.email">Email Invalid</div>
</div>
You are missing a bunch of stuff. First of all, you need to have your fields associated with a model for them to be validated. Second, your syntax for accessing errors is incorrect.
Here is a working plunkr for what you are trying to do.
This is the relevant code:
<body ng-controller="MainCtrl">
<form role="form" name="registerForm" novalidate>
<fieldset>
<div class="form-group">
<input class="form-control" placeholder="First Name" name="firstname" ng-model="firstname" type="text" autofocus="" ng-class="{'has-error': registerForm.firstname.$error.required}" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Last Name" name="lastname" ng-model="lastname" type="text" value="">
</div>
<div class="form-group">
<input class="form-control" placeholder="E-Mail" name="email" ng-model="email" type="email" value="" ng-class="{'has-error': registerForm.email.$error.pattern}" ng-pattern="/^\S+#\S+\.\S+$/i" required />
</div>
<div class="form-group">
<input class="form-control" placeholder="Password" name="password" ng-model="password" type="password" value="" autocomplete="off">
</div>
<div class="form-group">
<input class="form-control" placeholder="Organization Name" name="organizationName" ng-model="organizationName" type="text" value="">
</div>
<div class="form-group">
<select data-ng-options="item.Display for item in OrganizationTypes track by item.Value" data-ng-model="SelectOrganizationType" class="form-control">
<option value="">-Select Organization Type-</option>
</select>
</div>
<input type="button" value="Register" class="btn btn-lg btn-success btn-block" data-ng-click="Submit()" name="btnSubmit" />
</fieldset>
</form>
<div ng-show="registerForm.firstname.$error.required">You must enter a first name.</div>
<div ng-show="registerForm.email.$error.pattern || registerForm.email.$error.required">Email Invalid</div>
</body>
Well, I am not sure but I think you also have to use $error with $dirty like this:
<div ng-show="registerForm.email.$dirty && registerForm.email.$error.email">Email Invalid</div>
Also, add novalidate to disable default browser validation like this:
<form role="form" class="ng-pristine ng-valid" name="registerForm" novalidate>
I've recently been working on a website's user registration system and I just finished the front end, it is using parsleyjs to validate the values in the form.
The problem I have is when the form is submitted no values are passed, is there any reason for this happening?
Form Code
<form role="form" method="get" data-validate="parsley" id="register" action="register/2/">
<div class="form-group">
<label for="userFirstName">Frist Name</label>
<input type="text" class="form-control" id="userFirstName" placeholder="John" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userLastName">Last Name</label>
<input type="text" class="form-control" id="userLastName" placeholder="Newman" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="NewJohn101" data-required="true" data-trigger="change" data-usernamecheck="true">
</div>
<div class="form-group">
<label for="userEmail">Email address</label>
<input type="email" class="form-control" id="userEmail" placeholder="Email" data-trigger="change" data-required="true" data-type="email">
</div>
<div class="form-group">
<label for="userPassword">Password</label>
<input type="password" class="form-control" id="userPassword" placeholder="Password" data-required="true" data-trigger="change">
</div>
<div class="form-group">
<label for="userPasswordRetype">Re-Type Password</label>
<input type="password" class="form-control" id="userPasswordRetype" placeholder="Re-Type Password" data-required="true" data-equalto="#userPassword" data-trigger="change">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Both POST and GET assign values to keys that are equivalent to the name attribute of your inputs. For example:
<input type="text" name="input1" value="test">
Will build the array
"test" => $_GET["input1"]
No name attribute. No array.