Since adding a contact form to my website, when I refresh the page it constantly scrolls the page to where the form is.
I don't know what could provoke this, so I came to ask. I searched for similar issues but couldn't find any.
Thanks for all.
Form from site:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" autofocus="autofocus" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Corrected form :
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Nom prénom" required="required" />
<input type="email" id="email" name="email" value="" placeholder="email#example.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="00.00.00.00.00" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
When you copy an old form, be sure to properly read each line (my biggest error there).
There was an autofocus attribute in my form and that's what caused the problem.
Your problem seems to be with the 'autofocus' attribute.
http://www.w3schools.com/tags/att_input_autofocus.asp
You should remove it from the following form like so:
<form method="post" action="contact.php">
<input type="text" id="name" name="name" value="" placeholder="Maamar Miloud" required="required" />
<input type="email" id="email" name="email" value="" placeholder="contact.maamar#gmail.com" required="required" />
<input type="phone" id="phone" name="phone" value="" placeholder="06.15.73.0x.0x" />
<textarea id="message" name="message" placeholder="Bonjour,..." required="required"></textarea>
<button type="submit" value="Envoyer!" id="submit-button" >Envoyer</button>
</form>
Here's a fiddle showing an extreme example: http://jsfiddle.net/xefq9t0z/1/
It's much easier to help you when you provide snippets of code so we don't have to dig through your entire site! You're very lucky that I'm very bored!
Related
Please I have these two forms below. The first is the form that submit it's data to my database after my customer buys my product and were redirected to the registration page where the form is, while the second form is the form that submit it's data to my getresponse autoresponder campaign.
Now only the first form is what I wanted to be visible, I don't want the second form to be visible and I want to use one button to submit the two forms at one time, please how will I do that?
Thanks!
<!--====================================================================
Form that submit to my database and register my customers after purchase
======================================================================-->
<form class="form-horizontal templatemo-contact-form-1" role="form" action="sold.php" method="post">
<input type="text" class="form-control" id="name" placeholder="Enter Your First Name Here..." name="fname" required><br>
<input type="text" name="lname" class="form-control" id="name" placeholder="Enter Your Last Name Here..." required><br>
<input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email Here..." required><br>
<input type="text" name="phone" class="form-control" id="name" placeholder="Enter Your Phone Number Here..." required><br>
<input type="password" name="pword" class="form-control" id="website" placeholder="Enter Your Password Here..." required><br>
<input type="password" name="cpword" class="form-control" id="subject" placeholder="Re-enter Your Password Here..." required><br>
<input type="text" name="addrss" class="form-control" id="name" placeholder="Enter Your Address Here..." required><br>
<input type="submit" value="Register" class="btn btn-success pull-right">
</form>
<!--======================================================
Form that submit to my getresponse autoresponder campaign
========================================================-->
<form action="https://app.getresponse.com/add_subscriber.html" accept-charset="utf-8" method="post">
<input type="text" name="name" value="Enter your name here..." type=text style="width: 100%">
<input type="text" name="email" value="Enter your email here..." type=text style="width: 100%">
<!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
<input type="hidden" name="campaign_token" value="ljqOk" />
<!-- Thank you page (optional) -->
<input type="hidden" name="thankyou_url" value="https://www.moneycreativesecret.com/spages/smf-sp1/"/>
<!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
<input type="hidden" name="start_day" value="0" />
<!-- Forward form data to your page (optional) -->
<input type="hidden" name="forward_data" value="post" />
<input type="submit" value="100% Free Access" class="btn btn-success pull-right">
</form>
First of all, I think this question maybe is having an answer somewhere here on site and sorry for being repetitive but I can`t find what I want.
So... I have a form with 4 inputs, I want when someone clicks on the input to type in the value background color to be changed, and when the user clicks somewhere else to change it back to normal.
If anyone has multiple examples please write it down, I want to know more about how javascript works.
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company"
placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone"
placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
Use :focus pseudo-class selector to apply CSS when the element is focused.
input:focus {
background-color: #ddd;
}
<form>
<div>
<label for="name">NAME</label>
<input class="input" type="text" name="name" id="name" placeholder="Please enter your name">
</div>
<div>
<label for="company">COMPANY</label>
<input class="input" type="text" name="company" id="company" placeholder="Leave it empty if you don`t have a name">
</div>
<div>
<label for="phone">PHONE</label>
<input class="input" type="text" name="phone" id="phone" placeholder="Please,enter your mobile phone">
</div>
<div>
<label for="email">EMAIL</label>
<input class="input" type="email" name="email" id="email" placeholder="Your email address">
</div>
<div class="message">
<label for="message">MESSAGE</label>
<textarea class="input" name="message" id="message" cols="54" rows="15"></textarea>
</div>
Send
</form>
UPDATE : If you want to toggle between states on each click then you need to toggle(probably a class) based on click event.
This is my custom build HTML form
<form id="i-recaptcha" action="#" method="POST">
<input class="first_name_popup" id="first_name" maxlength="40" name="first_name" size="20" type="text" placeholder="First Name" required="required">
<input class="last_name_popup" id="last_name" maxlength="80" name="last_name" size="20" type="text" placeholder="Last Name" required="required">
<input class="email_popup" id="email" maxlength="80" name="email" size="20" type="text" placeholder="Your Email" required="required">
<input class="submit_button_popup" id="submit_button" type="submit" name="submit" value="GET A FREE CONSULTATION!">
</form>
how can i make this work on IOS? right now im getting so many blank forms submitted.
Thank you.
I'm working on a contact-footer. The HTML looks like this:
<form action="indexTest.php" method="post">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button" onclick="banner()">
</form>
Now if I click on "submit", the PHP-file is running. But as you see in the code, you see "onclick="banner()". But this doesn't work. Only the PHP works. It would like to run both a Javascript-function and PHP.
I want to achieve that if you click on 'submit'; the PHP-file runs and a banner is displayed by Javascript.
you can use onsubmit() function which first execute function then action event will work
<form onsubmit="return banner();" action="indexTest.php" method="post" name="theForm">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
<script type="text/javascript">
function banner(){
alert('working');
document.theForm.submit();
}
</script>
hope it will help you
The javascript function can be attached to the form onsubmit event.
<form action="indexTest.php" method="post" onsubmit="banner()">
<input spellcheck="false" class="first" type="text" name="name" placeholder="name">
<input spellcheck="false" class="first" type="text" name="email" placeholder="email">
<textarea rows="5" spellcheck="false" class="last" type="text" name="message" placeholder="message"></textarea>
<input type="submit" name="submit" value="" id="button">
</form>
The onclick event maybe just run when the button type is "button".
this is my form
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started </button>
</form>
this is div outside the form
<div class="vgasRit">
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
</div>
I want to access the value of the "fistname" , "lastname" and "phone" as user submit the form,so that i can display it in summary div.
Note: i have tried compact function of php in my controller so that i can send the whole database object in my view but this solution not working , after using compact function i was access the object like this
<input type="text" placeholder="John Smith" value="<?= (!empty($group_data)) ? $group_data->firstname : '';?>">
Any ideas regarding this ? i am new to laravel. I have served several hours on internet but nothing found out.
Assuming everything is on the same page, give your form's inputs an id:
<form id="form" method="post" action="{{url('/vpage')}}">
<label>First Name</label>
<input id="firstname" type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}" >
<label>Email Address</label>
<input id="email" type="text" name="email" placeholder="Email Address" value="{{$user->email}}" >
<label>Phone Number <span> (optional)</span></label>
<input id="phone" type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}" >
Give your summary div inputs an id too:
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$user->firstname}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$user->email}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$user->phone}}">
</div>
Then, use jquery to get those values when the user submits the form:
$('#form').submit(function() {
// set our summary div inputs values with our form values
$('firstname2').val($('firstname').val());
$('email2').val($('email').val());
$('phone2').val($('phone').val());
});
That should be it.
Your view (I assumed that form and summery div in same view):
<form method="post" action="{{url('/vpage')}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>First Name</label>
<input type="text" name="firstname" placeholder="First Name" value="{{$user->firstname}}">
<label>Email Address</label>
<input type="text" name="email" placeholder="Email Address" value="{{$user->email}}">
<label>Phone Number <span> (optional)</span></label>
<input type="text" name="phone" placeholder="(888) 888-888" value="{{$user->phone}}">
<button id="hitme" class="submitBTN getstart" type="submit" onclick='return false;'> Get Started</button>
</form>
#if($Data->input('firstname'))
<p>SUMMARY</p>
<div class="sfieldz w100">
<label>Name:</label>
<input id="firstname2" type="text" placeholder="John Smith" value="{{$Data->input('firstname')}}">
</div>
<div class="w100">
<label>Email Address:</label>
<input id="email2" type="text" placeholder="johnsmith#gmail.com" value="{{$Data->input('email')}}" >
</div>
<div class="w100">
<label>Phone Number:</label>
<input id="phone2" type="text" placeholder="(888) 888-888" value="{{$Data->input('phone')}}">
</div>
#endif
Contoroller
function vpageController(Request $r){
return view("path.to.view",['Data'=>$r]);
}
Route:
Route::Route::match(['POST', 'GET'],'/vpage', 'ControllerName#vpageController');