Form not submitting values inside <div> - html

I am working with Laravel 5.4 Framework and I get this issue when the form does not submit anything except the csrf_token().
If I put an input outside of those <div> it will work and submit it, otherwise the browser (Chrome) will only submit the token, as if everything inside the <div> is not part of the form.
How can I submit all the data while using Bootstrap's form-group divs? The layout is not the problem as it does not work even when removing it.
#extends('layouts.master')
#section('content')
<div class="container" style="margin-top: 1%">
<p>Welcome, {{$user->name}}, here you can submit a new company for our database.</p>
<form name="suggestCompanyForm" method="post">
{{csrf_field()}}
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" aria-describedby="companyNameHelp" placeholder="Enter company name">
<small id="companyNameHelp" class="form-text text-muted">Enter the company's name you would like to suggest</small>
</div>
<div class="form-group">
<label for="companyEmail">Email address</label>
<input type="email" class="form-control" id="companyEmail" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">Enter the company contact email.</small>
</div>
<div class="form-group">
<label for="selectCategory">Select main category</label>
<select class="form-control" id="selectCategory">
<option>Food&Drink</option>
<option>Cosmetics</option>
<option>Electronics</option>
<option>Consumer Goods</option>
<option>Services</option>
</select>
</div>
<div class="form-group">
<label for="description">Company description.</label>
<textarea class="form-control" id="description" rows="5"></textarea>
</div>
<div class="form-group">
<label for="logo">File input</label>
<input type="file" class="form-control-file" id="logo" aria-describedby="logoHelp">
<small id="fileHelp" class="form-text text-muted">Add company logo.</small>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" id="check" class="form-check-input">
I agree that my submission follows the website rules.
</label>
</div>
<button id="submitCompany" type="submit" class="btn btn-primary" >Submit</button>
</form>
</div>
#endsection

your form inputs are not being submitted because you didn't give them names ...
Try
<textarea class="form-control" name="description" id="description" rows="5"></textarea>

You have to add the action attribute to the form tag.
Edit this line
<form name="suggestCompanyForm" method="post">
to
<form name="suggestCompanyForm" action = "<url-for-the-submission>" method="post">
.You will also need to add this
name="name_of_input_to_submit"
to each input not only the textarea and you are also uploading a file you have to add this to the form tag too.
enctype="multipart/form-data"

Related

I'm using mailto for my forms but when I try to submit the form absolutely nothing happens, am I missing something?

I want to try a simple mailto for my form but it doesn't seem to be working. Once all the details have been added and the submit form is clicked nothing changes at all, it stays on the same page and nothing of the forms change. Am I missing anything? Any help is appreciated, thank you!
<form class="form" id="form" action="mailto:example#gmail.com" method="POST" enctype="text/plain">
<div class="form-control">
<label for="namee">Name</label>
<input type="text" id="namee" name="name">
<small>ERROR MESSAGE </small>
</div>
<div class="form-control">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<small>ERROR MESSAGE </small>
</div>
<div class="form-control">
<label for="phoneno">Phone Number</label>
<input type="tel" id="phoneno" name="phoneno">
<small>ERROR MESSAGE </small>
</div>
<button>SEND REQUEST</button>
</form>

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.

Moving some fields from the form to the right

So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.

Bootstrap form not showing cursor

Hi I have a single page with bootstrap and a form, but the form is like disabled, it doesn't show the cursors to type inside.
I have reviewed the css to see if there was any wrong class but everything seems ok.
Heres my html
<form id="contact-form" method="post" action="contactForm.php" class="contact-form form" role="form">
<div class="controls">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Your firstname *</label>
<input type="text" name="name" id="name" placeholder="Enter your firstname" required="required" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label for="email">Your email *</label>
<input type="email" name="email" id="email" placeholder="Enter your email" required="required" class="form-control">
</div>
<div class="form-group">
<label for="message">Your message for us *</label>
<textarea rows="4" name="message" id="message" placeholder="Enter your message" required="required" class="form-control"></textarea>
</div>
<div class="text-center">
<input type="submit" value="Send message" class="btn btn-primary btn-block">
</div>
</div>
</form>
And the following scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
http://jsfiddle.net/xyroL86j/
You probably have an element laying over the top of your form and links. Use your browser's document inspector to find it. Look for forced heights, absolute positioning, and negative margins.

Bootstrap 3: Two forms on the same line

I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.
<h1>Register</h1>
<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">
here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line
Reference the inline form styling on Bootstrap's site.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
Alternatively, you can also use columns to put form elements next to one another:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>