Form Submit - Open New Tab at same time - forms

I have a contact form on my website. I'm using a free bootstrap template that I've been editing and configuring because I don't know much about coding.
I want a new tab to open and go to a specific website when the user hits the submit button (so both submit the form, and take them to a new web page). How can I do that?
<form name="sentMessage" id="contactForm" target="blank" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<br><br>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl">Send Message</button>
</div>
</div>
</form>

You just need to add in the
action="/newpage.php" method="post"
so in your example, it would look like:
<form name="sentMessage" id="contactForm" action="/newpage.php" method="post" novalidate>
Hope that helps... Note the /newpage is the page (wherever it is) which will process your POST request.

Please use the javascript like this.
then will open new tab as you said
function func1(){
window.open('https://google.com', '_blank');
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form name="sentMessage" id="contactForm" onsubmit="func1()" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name *" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Your Email *" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Your Phone *" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<textarea class="form-control" placeholder="Your Message *" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="clearfix"></div>
<br><br>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" class="btn btn-xl">Send Message</button>
</div>
</div>
</form>
And also you can add action property to form tag.
then if you click the button then will open the new tab as your request, and then will send request to file you specified in action property.
if your purpose is only to open new tab, and don't need to submit form, then please add
return false
at the end of func1 function in my code

Related

FormSubmit.co is redirecting to an infinite (presumably) loading screen

Whenever I try sending an email through an email form I made, it redirects me to another page that keeps loading for several minutes. After a random amount of time (from minutes, to even days), I get the email I sent.
I'm not sure why this is happening and have not yet found a solution. This is my code for the form:
<div class="mail">
<h1 style="font-size: 50px;">Contact Us</h1>
<form target="_blank" action="https://formsubmit.co/xxxx#gmail.com" method="POST">
<div class="form-group">
<input type="hidden" name="_template" value="table">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Full Name" required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Email Address" required>
</div>
</div>
</div>
<div class="form-group">
<textarea placeholder="Your Message" class="form-control" name="message" rows="10" required></textarea>
</div>
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit Form</button>
</form>

How to pass a date from a static site form to a Google Form?

I have a simple form on an HTML site. The form is integrated with Google Form and then on with Google Sheets. To give you more details: when a user submits a form on my website the data is passed to fill the Google Form and then are saved in the Google Spreadsheet.
The problem I have is passing a date field. How should I pass a date field to a Google Form?
With a text field there is no problem as I match them by using for example name="entry.77808571"
BUT,
for a date Google Form has three entries, e.g.:
name="entry.1307321649_year" name="entry.1307321649_month" name="entry.1307321649_day"
So 3 "name" properties for one input field.
I provide my code for the form, so hopefully you can see what I mean above:
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfglf8uoaPBwXQNZb44C3qyDfxV7mv4wIlSTamUfHwolsJ0Lg/formResponse">
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label class="control-label" for="date">Date</label>
<input type="text" class="form-control datepicker" name="entry.1307321649" placeholder="Zameldowanie" id="date" required data-validation-required-message="Please enter dates." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label class="control-label" for="date">Date</label>
<input type="text" class="form-control datepicker" name="entry.77808571" placeholder="Wymeldowanie" id="date" required data-validation-required-message="Please enter dates." autocomplete="off">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Imię i Nazwisko" id="name" name="entry.191476008" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Adres Email" id="email" name="entry.1612291661" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="number" class="form-control" placeholder="Numer Telefonu" id="phone" name="entry.199915649" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Wiadomość" id="message" name="entry.948216718" data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<button type="submit" class="btn btn-primary" id="sendMessage">Rezerwuj</button>
</form>
So far I used a workaround and passed the date as a text. But then I'm having a problem with integrating it with Google Calendar (the data goes from Google Sheets to Calendar), as I need to have a date not text to do so.
Please shout if you have any questions and counting for your help.
Many thanks!
Justyna
You can pass a date that will be reconized as such correctly as following:
Just pass the full netry for the date, without separating into year, month and day - just as you are doing now. So:
<div class="form-group floating-label-form-group controls">
<label class="control-label" for="date">Date</label>
<input type="text" class="form-control datepicker" name="entry.1307321649" placeholder="Zameldowanie" id="date" required data-validation-required-message="Please enter dates." autocomplete="off">
</div>
When filling out your custom HTML form, paste the full date into the corresponding input field in the format 2020-10-15.
In this format your date will be recognized in the destination spreadsheet correctly as a date object.
Btw, if you create a Prefill URL for your Google form, it will look e.g. like following:
https://docs.google.com/forms/d/e/XXX/viewform?entry.1141768477=Option+1&entry.1199891753=mail#mail.com&entry.1037962790=2020-10-20&entry.2138552921=Option+1
This allows you to see the correct formatting for dates, multiple-choice options etc.

Center Bootstrap Contact Form

I'm setting up a contact form and I want this form to be centered on my page. But I don't want the full width (col-md-12) of the page. I only want the width of a col-md-6 at the center of the page. Problem is that because I select col-md-6, the form display on the left hand side of the page. How can I center it?
HTML:
<div class="container">
<div class="row">
<div class="col-md">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>
</div>
The easiest way I see is adding two more divisions with col-md-3 on either side of your form div like this:
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
<div class="cold-md-3">
</div>
</div>
Try adding "m-auto" class in your col-md-6 div. Like this:
<div class="container">
<div class="row">
<div class="col-md-6 m-auto">
<form action="contact" method="post"> {{--action = where the data must go--}}
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address:</label>
<input t`enter code here`ype="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="mobile">Mobile Nr:</label>
<input type="email" class="form-control" id="mobile" placeholder="Mobile Nr should start with 08, 07 or 06">
</div>
<div class="form-group">
<label for="message">Your message...</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</form>
</div>
</div>

Form in a modal box is not posting on submiit

I have a contact form in a modal box and a php file to process the data and send it as an email.
For the life of me I can't get the modal to send any information - it just closes as if nothing happened.
Here is the modal box code
<div id="quoteme" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="boxmod">
<div class="row">
<div class="modal-body">
<div class="col-sm-8 col-sm-offset-2 text-center bfh-form-modal">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
<form id="myForm" action="" method="POST" action="formtest.php">
<h1>Quick Quote</h1>
<p>Contact us today, and get a reply with in 24 hours!</p>
<fieldset>
<input class="monicker" name="name" placeholder="Your name" type="text" tabindex="1" required>
</fieldset>
<fieldset>
<input placeholder="Your Email Address" name="email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Phone Number" name="telnum" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Your Web Site starts with http://" name="userurl" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Type your Message Here. To save time, please include as much detail as possible about the work you wish us to quote on." name="comments" tabindex="5" required></textarea>
</fieldset>
<fieldset>
<input name="submitbutton" type="submit" id="contact-submit" data-submit="...Sending" value="Submit"></input>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
What am I missing to make this send information to formtest.php?

Bootstrap submit button won't work

I have the below code where I'm trying to submit data from a form into my back-end. Whenever I press the button it doesn't do anything and it's supposed to route to the specified place. I have looked at several examples and still hasn't worked. Below is my form. Any suggestions?
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h1>Sign Up</h1>
<form action ="/adduser" method="POST" id="adduser">
<fieldset class="form-group">
<label for="InputUsername"> Username </label>
<input type="text" class="form-control" name="username" id="InputUsername" placeholder="Enter username">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="email"id="exampleInputEmail1" placeholder="Enter email">
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="password"id="exampleInputPassword1" placeholder="Password">
</fieldset>
<button class="btn btn-default" form="signup" type="submit">Sign up</button>
</form>
</div>
</dv>
</div>
Here is my route
#app.route('/adduser', methods=["POST"])
def adduser():
print(request.form, file=sys.stderr)
username = request.form['username']
password = request.form['password']
email = request.form['email']
models.User.create_user(email, password, username)
login_user(user)
return redirect_url('index.html')
Your button has a form attribute of signup but your form has an id of adduser, so the button does not belong to the form. Try changing these values to match.