Multi-step Form When Resizing on Mobile Devices - javascript

So, I'm trying to create a mobile responsive web app, I've already managed to fit it properly on mobile devices, but I don't want the "second form" to go above the first one, but to create a multi-step form when viewing on mobile devices.
Here's my code so far:
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
</form>
</div>
(I have two forms like this one)

Use this code for Multistep Form its easy use for you...
and if you are using bootstrap so multi step form is so easy on bootstrap with fully responsive.
Custome Multistep
Bootstrat Multistep

Related

input field is not eeditable in mobile view

I have made a simple form , you can check it on http://bspldev.review/phpmailer/ , using bootsrap its working fine on desktop but on mobile input field for name and email is not editable, that we can not write anything , only mobile field is working in mobile view, here is simple form code, i have give proper links for bootstrap and jquery library in header, here i will give excerpt of form only,
<form method="POST" name='' id="woohooEmail" action="">
<div class="form-group">
<label class="sr-only" for="fullname">Name</label>
<input type="text" class="form-control" placeholder="name" name="LastName">
</div>
<div class="form-group">
<label class="sr-only" for="mobile">Mobile</label>
<div class="input-group">
<div class="input-group-addon">
+91
</div>
<input type="text" class="form-control" placeholder="mobile" name="Mobile">
</div>
</div>
<div class="form-group">
<label class="sr-only" for="area">Email</label>
<input type="email" class="form-control" placeholder="email" name="Email">
</div>
<div class="pad">
<button type="submit" name="submit" id="submit" value="" class="btn btn-default btn-text ">
Schedule
</button>
<i class="fa fa-circle-o-notch fa-spin" id="icon-load" style="font-size:24px; color:red; display:none"></i>
</div>
<form>
Please check this on mobile and kindly suggest me some solutions
In your mobile image is coming above the form, So increase your z-index of form's parent div or decrease z-index of your image in mobile screen using media query. You haven't add the div in above code so i just add z-index on form.Like :-
#media screen and (max-width: 768px) {
#woohooEmail{
z-index:9999;
}
or here you just can simply add z-index without media query too. it will work for every device
Build the form using boostrap's grid system. you can use one row spanning all the 12 columns and use the col-sm attribute

html5 contact form with PHP [duplicate]

This question already has answers here:
How can I send an email using PHP?
(20 answers)
Closed 6 years ago.
This is the HTML contact form I created and I have been trying to get the PHP code that will make it work however I am not sure the best way to handle this. I have read through other questions and answers where they use separate files I am not an expert in PHP but I can assume the two files must be linked by name this is the HTML form I have:
<section class="our-contacts slideanim" id="contact">
<h3 class="text-center slideanim">Contact Us</h3>
<p class="text-center slideanim">Got a project in mind? Shoot as an email below!</p>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form role="form">
<div class="row">
<div class="form-group col-lg-4 slideanim">
<input type="text" name="name" class="form-control user-name" placeholder="Your Name" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="email" name="email" class="form-control mail" placeholder="Your Email" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="tel" class="form-control pno" placeholder="Your Phone Number" required/>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 slideanim">
<textarea name="message" class="form-control" rows="6" placeholder="Your Message" required/> </textarea>
</div>
<div class="form-group col-lg-12 slideanim">
<button type="submit" href="#" class="btn-outline1">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
The form tag needs to have an action and a method attribute, like this:
<form role="form" method="post" action="path/to/file.php">
The method will normally be post (you can look up the difference between post and get if you like). The action is the path to the php file that will process the data.
In the php file you can access the data through the $_POST global variable which will be an array containing each of the inputs eg $_POST['tel'] will be the telephone number field from your form.
Then you need to send the email. You can try one of the implementations in the php manual (http://php.net/manual/en/refs.remote.mail.php) or you could try using a 3rd party service like mail gun.

Linking PHP/HTML to Javascript using angularJS

I want to be able to link a form I have in "details.php" to a javascript file so that I can in turn write the results of a form to an sqlite database. My PHP code is like this:
<div class="form-group">
<label class="col-sm-3 control-label">Register Tag:</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="singleRegister.RegTag"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Register Number:</label>
<div class="col-sm-7">
<input type="number" class="form-control" min="1" max="65536" ng-model="singleRegister.Register"/>
</div>
</div>
I have tried to link using $scope in the javascript file however it does not seem to be functioning. What would be the correct way of doing this in the javascript file?

How do you get an item from a dropdown and input it as text?

So I'm using bootstrap form helpers to make selecting a country and region easier. Here is some of the code. I want to take this and input it into my db. It currently won't.
<div id="countries_states2" class="bfh-selectbox bfh-countries" data-country="US" data-flags="true" name="country">
<input type="text">
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2" name="stateOrProvince">
<input type="text">
</div>
</div>
However, this does
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="email" placeholder="ironbat#example.com">
</div>
How can I enter the former into the form without wrecking the formatting (its very pretty :) )
As a template, here is a similar setup/strategy:
https://scotch.io/tutorials/easy-node-authentication-setup-and-local

Local Login/Registration Android Phonegap

I'm trying to develop a local registration procedure in my app, so the user will be able to register locally, and login with his personal user and password.
Can someone give me a simple example how can i accomplish this? Meaning how do i store the local username and password input in registration, and later login with this data?
For example this will be my Login and Registarion html pages:
<body onload="init()">
<div id="loginPage" data-role="page">
<div data-role="header">
<h1>Registration/Login Demo</h1>
</div>
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Re-enter Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
How do i construct my js file?
Thanks.
You can use Storage API of Cordova,which Provides access to the devices storage options as you like to keep process locally,
Two options you can use for achieving this goal; one is database and the other one is local storage. Look here for storage API docs

Categories

Resources