Can someone please help me with recaptcha that have overflow-y visible, I use netlify form.
here its how its look like:
https://gyazo.com/76ae4df1ed119162bcda5566b956ce63
<form action="POST" data-netlify="true">
<div class="fields">
<div class="field half">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<input type="subject" name="subject" id="subject" placeholder="Subject" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message" rows="7"></textarea>
</div>
<div class="field">
<div class="recaptcha" data-netlify-recaptcha="true" ></div>
</div>
</div>
<ul class="actions">
<li><input type="submit" value="Send Message" class="button primary" /></li>
</ul>
</form>
Related
so im trying to create a popup to input email and name for a subscription but the button to open the popup and close the popup don't work. The first subscription button should open the popup and there is an x that should close the popup could anyone try to debug it?
my code:
<div class="center">
<button id="show-login">Subscribe</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Subscribe for more quizzes!</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Name</label>
<input type="password" id="password" placeholder="Enter name">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Click for email notifications!</label>
</div>
<div class="form-element">
<button>Subscribe</button>
</div>
</div>
</div>
js.:
document.querySelector("#show-login").addEventListener("click", function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
I hope the below answer is suitable for you.
i am just add css like below
document.querySelector("#show-login").addEventListener("click", function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
.popup{
display:none;
}
.active{
display:block;
}
<div class="center">
<button id="show-login">Subscribe</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Subscribe for more quizzes!</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Name</label>
<input type="password" id="password" placeholder="Enter name">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Click for email notifications!</label>
</div>
<div class="form-element">
<button>Subscribe</button>
</div>
</div>
</div>
Thank you...!
How can I make the web address of the page the user is currently on autofill into a box on the page?
On my websites 404 page we have a form for the user to fill out with name, email, etc. I would like one of the form boxes to autopopulate with the page the user is currently on.
Here is the code I currently have:
<form id="contactForm" class="scaffold-form" action="https://mpex.com/contacts/index/post/" method="post">
<div class="fieldset">
<h2 class="legend">Contact Information</h2>
<p class="required">* Required Fields</p>
<ul class="form-list">
<li class="fields">
<div class="field"><label class="required" for="name"><em>*</em>Name</label>
<div class="input-box"><input id="name" class="input-text required-entry" title="Name" type="text" value="" name="name" /></div>
</div>
<div class="field"><label class="required" for="email"><em>*</em>Email</label>
<div class="input-box"><input id="email" class="input-text required-entry validate-email" spellcheck="false" title="Email" type="email" value="" name="email" /></div>
</div>
</li>
<li><label for="telephone">Telephone</label>
<div class="input-box"><input id="telephone" class="input-text" title="Telephone" type="tel" value="" name="telephone" /></div>
</li>
<li class="wide"><label class="required" for="comment"><em>*</em>Comment</label>
<div class="input-box"><textarea id="comment" class="required-entry input-text" title="Comment" name="comment" rows="3" cols="5"></textarea></div>
</li>
</ul>
</div>
<div class="buttons-set"><input id="hideit" style="display: none !important;" type="text" value="" name="hideit" /> <button class="button" title="Submit" type="submit"><span><span>Submit</span></span></button></div>
</form>
<form id="contactForm" class="scaffold-form" action="https://mpex.com/contacts/index/post/" method="post">
<div class="fieldset">
<h2 class="legend">Contact Information</h2>
<p class="required">* Required Fields</p>
<ul class="form-list">
<li class="fields">
<div class="field"><label class="required" for="name"><em>*</em>Name</label>
<div class="input-box"><input id="name" class="input-text required-entry" title="Name" type="text" value="" name="name" /></div>
</div>
<div class="field"><label class="required" for="email"><em>*</em>Email</label>
<div class="input-box"><input id="email" class="input-text required-entry validate-email" spellcheck="false" title="Email" type="email" value="" name="email" /></div>
</div>
</li>
<li><label for="telephone">Telephone</label>
<div class="input-box"><input id="telephone" class="input-text" title="Telephone" type="tel" value="" name="telephone" /></div>
</li>
<li class="wide"><label class="required" for="comment"><em>*</em>Comment</label>
<div class="input-box"><textarea id="comment" class="required-entry input-text" title="Comment" name="comment" rows="3" cols="5"></textarea></div>
</li>
</ul>
</div>
<div class="buttons-set"><input id="hideit" style="display: none !important;" type="text" value="" name="hideit" /> <button class="button" title="Submit" type="submit"><span><span>Submit</span></span></button></div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById('name').value = location.href;
}
</script>
You can add script after form tag like this
When using jQuery effect, my div collapses a little as it is sliding and the div coming in is also collapsed a little. It will be a responsive website, so I do not think I should put a width or height. I tried one suggestion I read about using position: absolute, but it did not produce the result I wanted. Is there a way to keep the div from collapsing any? I want each div to look the same when sliding as it does when not sliding.
This fiddle shows the effect and how the divs look when sliding.
CODE:
<div class="well basicInformation">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Basic Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-5">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" placeholder="First name" ng-model="firstname" required autofocus />
</div>
<div class="col-md-2">
<label for="MI">Middle Initial</label>
<input type="text" id="MI" class="form-control" ng-model="middlename" />
</div>
<div class="col-md-5">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" placeholder="Last name" ng-model="lastname" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address">Address</label>
<input type="text" id="address" class="form-control" placeholder="Address Line 1" ng-model="address" required />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="address2">Address 2</label>
<input type="text" id="address2" class="form-control" placeholder="Address Line 2" ng-model="address2" />
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" placeholder="City" ng-model="city" />
</div>
<div class="col-md-2">
<label for="address2">Locale/State</label>
<input type="text" id="locale" class="form-control" placeholder="Locale/State" ng-model="locale" />
</div>
<div class="col-md-2">
<label for="address2">Region</label>
<input type="text" id="region" class="form-control" placeholder="Region" ng-model="region" />
</div>
<div class="col-md-3">
<label for="address2">Country</label>
<input type="text" id="country" class="form-control" placeholder="Country" ng-model="country" />
</div>
<div class="col-md-2">
<label for="address2">Postal Code</label>
<input type="text" id="postalCode" class="form-control" placeholder="Postal Code" ng-model="postalCode" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="phone">Phone (Default)</label>
<input type="radio" id="radioHome1" /><label> Home</label>
<input type="radio" id="radioMobile1" /><label> Mobile</label>
<input type="tel" id="phone" class="form-control" placeholder="Phone" ng-model="contactData" required />
</div>
<div class="col-md-6">
<label for="phone2">Phone 2 (Alternate)</label>
<input type="radio" id="radioHome2" /><label> Home</label>
<input type="radio" id="radioMobile2" /><label> Mobile</label>
<input type="tel" id="phone2" class="form-control" placeholder="Phone 2" ng-model="contactData2" />
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="email">Email address</label>
<input type="email" id="email" class="form-control" placeholder="Email address" ng-model="emailAddress" required />
</div>
<div class="col-md-6">
<label for="password">Password</label>
<input type="password" id="password" class="form-control" placeholder="Password" ng-model="password" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitBasicInformation" class="btn btn-lg btn-primary btn-block">Next</button>
</div>
</div>
</div>
<div class="well faaInformation" style="display: none;">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">FAA Required Information</h4>
</a>
</div>
<div class="row">
<div class="col-md-6">
<label for="federalRegistrationId">Federal Registration ID</label>
<input type="text" id="federalRegistrationId" class="form-control" placeholder="Federal Registration ID" ng-model="federalRegistrationId" required />
</div>
<div class="col-md-6">
<label for="pilotNumber">Pilot Number</label>
<input type="text" id="pilotNumber" class="form-control" ng-model="pilotNumber" required />
</div>
</div>
<div class="row">
<div class="col-md-offset-10 col-md-2">
<button id="submitRegistration" class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
</div>
</div>
</div>
var hideoptions = { "direction": "left", "mode": "hide" };
var showoptions = { "direction": "right", "mode": "show" };
$("#submitBasicInformation").on('click', function () {
$.when($(".basicInformation").effect("slide", hideoptions, 1250)).then(function (data, textStatus, jqXHR) {
$(".faaInformation").effect("slide", showoptions, 1250);
});
});
It looks like your animation is adding style attributes during the animation. You can see this if you slow down the animation and inspect the element. It's adding a static height and width during the animation. I was able to fix the height and width by adding this to your .faaInformation css
height: auto !important;
width: auto !important;
I have this form that has a lot of validation in place.
What i'm struggling with is, when all fields have been filled out correctly I want the values of the fields to be displayed in an alert box.
Here is my code
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
My HTML is
<form method="post" name="form" id="form" class="form" action="">
<div class="info align-right"><span class="error">*</span> Required</div>
<fieldset>
<div class="group">
<label for="name">Name</label>
<input id="name" name="name" type="text" required />
</div>
<div class="group">
<label for="UserEmail">Email <span class="req">*</span></label>
<input type="text" name="UserEmail" id="UserEmail" value="" size="32" />
</div>
<div class="group">
<label>Password: <span class="req">*</span></label>
<input type="password" name="password" id="password" value="" size="32" />
</div>
<div class="group">
<label>Confirm Password: <span class="req">*</span></label>
<input type="password" name="password-check" id="password-check" value="" size="32" />
</div>
</fieldset>
<fieldset class="clearfix">
<div class="group options">
<legend>Country</legend>
<div class="group--left">
<input id="usa" name="country" type="radio">
<label for="usa">United States</label>
<input id="argentina" name="country" type="radio">
<label for="argentina">Argentina</label>
</div>
</div>
<div class="group">
<label>Phone Number</label>
<div class="group--left">
<input id="phone" name="phone" class="phone" type="tel" />
<em>Example: <span id="example">123-456-7890</span></em>
</div>
</div>
</fieldset>
<div class="group--right">
<input type="submit" value="Submit" id="submit" class="right" />
<input type="reset" value="Clear" id="clear" class="left" />
</div>
</form>
I have also provided a Fiddle - http://jsfiddle.net/barrycorrigan/vzdp64m4/
Any help is greatly appreciated
try something like this,
$("#form").submit(function(){
var x = $(this).serializeArray();
$.each(x, function(i, field){
alert(field.name + " : " + field.value);
});
});
demo in FIDDLE
I have a form which has three input fields.Its working fine in jsfiddle but if I run in any browser then part of the input text field is coming out.However if i decrease the browser size then works fine.As i am using bootstrap so all the field must work same in all screen size whether its mobile or tab or computer.Please tell me how to make it function properly in all screen sizes.
This is the screen shot showing mobile text field coming out of the div
This is screenshot showing proper function of text fields in small size
this is code for the input fields
<div class="tab-pane" id="tab2">
<form class="well span9" action="insertNew" method="post">
<table border="1" id="mytable"/>
<tr>
<th>Add</th>
<th>Username</th>
<th>EmailId</th>
<th>Mobile No</th>
</tr>
</table>
<div class="row">
<div class="span3">
<label>Name</label>
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required>
</div>
<div class="span3">
<label>Email Address</label>
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required>
</div>
<div class="span3">
<label>Mobile</label>
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required >
</div>
</div>
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
</form>
<div class="well span9"> <input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>
</div>
try something like this,FIDDLE
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" >Name</label>
<div class="controls">
<input type="text" id="fields" class="span4" placeholder="Your full Name" name="username" required />
</div>
</div>
<div class="control-group">
<label class="control-label" >Email Address</label>
<div class="controls">
<input type="email" id="fields1" class="span4" placeholder="Your email address" name="email" required />
</div>
</div>
<div class="control-group">
<label class="control-label" >Mobile</label>
<div class="controls">
<input type="tel" id="fields2" class="span4" placeholder="+756762462182" name="mobile" maxLength="13" required />
</div>
</div>
<div class="control-group">
<input type="button" id="btn1" class="btn btn-lg btn-primary" value="Add">
<input type="button" id="btn2" class="btn btn-lg btn-primary" value="Group">
</div>
</form>