I have created a form that uses formsubmit.co to forward the message to my email account. When I tested it on my local computer using VS Code and Live Server it worked flawlessly. After I uploaded to the web it only partially works. I get the message data but lose the name and email data. Formsubmit activated successfully in both cases.
Here is my code:
<form
action="https://formsubmit.co/john.herring#hrtinspection.ca"
method="POST"
>
<div class="input-group">
<input name="name" type="text" id="name" required />
<label for="name"><i class="fa-solid fa-user"></i> Name: </label>
</div>
<div class="input-group">
<input name="email" type="email" id="email" required />
<label for="email"
><i class="fa-solid fa-envelope"></i> Email:
</label>
</div>
<div class="input-group">
<textarea
name="message"
id="message"
cols="35"
rows="8"
required
></textarea>
<label for="message">
<i class="fa-solid fa-comment"></i> Details:
</label>
</div>
<button type="submit">
<i class="fa-sharp fa-solid fa-paper-plane"></i> Send
</button>
</form>
I have tried removing the icons, changing the order the attributes are listed in, and deleting and replacing the file on the server.
Related
I just started implementing the mollie api to handle payments on my website.
You need a url to redirect to and a url as a webhook to update payment states.
I'm still developing the website locally, but localhost as a url isn't an option ofcourse.
I installed ngrok and tried the HTTPS URL assigned to me when running the ngrok http command.
when i access my website with the HTTP link everything looks fine, But when i go to my website via the HTTPS link my website fails to load in my own css scripts and chrome tells me the website is not secure, but my ssl certificate is valid (probably not secure because its self-signed)?
i tried to test the api anyhow by ordering something on the (broken https) website but after confirming the order i get a 419 error response (i develop my website in laravel 8).
So sorry if i left out crucial information, i'm the biggest noob when it comes to networking and i didn't even know where to begin.
EDIT: Here is additional information on what my problem is.
Im testing the payment api from mollie in my laravel controller where i create an order.
public function order(CreateOrderRequest $request){
$baseUrl = 'https://xxxx-xxx-xx-xxx-xx.ngrok.io/';
$payment = $this->mollie->payments->create([
"amount" => [
"currency" => "EUR",
"value" => "10.00"
],
"description" => "My first API payment",
"redirectUrl" => $baseUrl."/order/besteld",
"webhookUrl" => $baseUrl."/order/betaalupdate/".$id,
]);
dd($payment);
return redirect()->to($payment->getCheckoutUrl(), 303);
}
this controller is called from the route:
Route::post('/winkelwagen/bestellen/bevestig', [CartController::class, 'order'])->name('orderConfirmed');
which is called from the following form:
<form action="{{route('orderConfirmed')}}" method="post" class="d-block">
#csrf
<div class="row">
<div class="col-12 col-lg-6">
<h4 class="fat-title display-4 text-center mt20 text-white"><span class="text-color-light">AFLEVER</span>ADRESS</h4>
<hr class="hrdark mb40 mt40">
<div class="row">
<div class="col-12 col-md-6 mb20">
<label for="naam" class="fat-title">Volledige Naam</label>
<input id="naam" type="text" class="form-control" placeholder="Mary Fuego" name="naam"
#if($user != null) value="{{$user->naam}}" #endif required>
</div>
<div class="col-12 col-md-6 mb20">
<label for="email" class="fat-title">Email</label>
<input id="email" type="email" class="form-control" placeholder="Example#fuego.nl" name="email"
#if($user != null) value="{{$user->email}}" #endif required>
</div>
<div class="col-12 col-md-6 mb20">
<label for="tel" class="fat-title">Telefoonnummer</label>
<input id="tel" type="tel" class="form-control" placeholder="0612345678" name="tel">
</div>
<div class="col-12 col-md-6 mb20">
<label for="plaats" class="fat-title">Plaats</label>
<input id="plaats" class="form-control" type="text" placeholder="Holten" name="plaats" required>
</div>
<div class="col-6 col-md-3 mb20">
<label for="postcode" class="fat-title">Postcode</label>
<input id="postcode" class="form-control" type="text" minlength="4" maxlength="6" placeholder="7451PJ" name="postcode" required>
</div>
<div class="col-6 col-md-3 mb20">
<label for="huisnummer" class="fat-title">Huisnummer</label>
<input id="huisnummer" class="form-control" type="text" placeholder="1" min="1" name="huisnummer" required>
</div>
<div class="col-6 col-md-3 mb20">
<label for="toevoeging" class="fat-title">Toev. (opt.)</label>
<input id="toevoeging" class="form-control" type="text" placeholder="A" min="1" name="toevoeging">
</div>
<div class="col-6 col-md-3 mb20">
<label for="straat" class="fat-title">Straat</label>
<input id="straat" class="form-control" type="text" placeholder="Handelsweg" name="straat" required>
</div>
#if($user != null)
<div class="col-12 mb20">
<button class="btn darkgraybg text-white w-100 btn-widetxt"
data-bs-toggle="dropdown" aria-expanded="false" type="button">laad adress</button>
<div class="dropdown-menu softgreybg pb20 pt20 pr20 pl20">
<label for="addresscopy" class="fat-title">Adress</label>
<select class="form-select form-control" id="addresscopy" onchange="loadAdress(parseInt(this.value))">
<option value="0">Geen Adress Laden</option>
#foreach($addresses as $address)
<option value="{{$address->id}}">{{$address->plaats}} {{$address->straat}} {{$address->huisnummer}} {{$address->toevoeging}}</option>
#endforeach
</select>
</div>
</div>
<input type="hidden" name="user_id" value="{{$user->id}}">
#endif
</div>
</div>
<div class="col-12 col-lg-6">
<h4 class="fat-title display-4 text-center mt20 text-white"><span class="text-color-light">BETAAL</span>METHODE</h4>
<hr class="hrdark mb40 mt40">
<button type="submit" class="btn btn-orange btn-widetxt w-100">
BESTELLEN
</button>
</div>
</div>
</form>
After submitting this form on the https page i get a 419 PAGE EXPIRED, which isnt logged. After submitting it via http i get an error in the mollie client that i have to have an SSL
I'm trying to use Recaptcha v3 on my form but submitting the form only works when Recaptcha is removed.
When Recaptcha is enabled, I can click on the submit button but nothing happens. I don't even get an error message in the console even though I can see the protected by reCAPTCHA logo in the frontend on the bottom right.
I'm using Laravel 6.
My form template looks like this:
<div class="row mt-150">
<div class="col-12 text-center text-white">
<h1>Contact</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-4 col-sm-12">
<form action="{{route('contact_form')}}" method="POST">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
</div>
</div>
<script src="https://www.google.com/recaptcha/api.js"></script>
There is also an app.js included which contains the captcha callback function:
function onSubmit(token) {
document.getElementById("submitButton").submit();
}
window.onSubmit = onSubmit;
Can someone give me a hint what I'm doing wrong implementing recaptcha?
I tried to do it just like this:
Google reCaptcha v3
This will not work because you are trying to trigger submit() on a button. Give the form an id and then trigger submit() on the form
<form action="{{route('contact_form')}}" method="POST" id="contactForm">
#csrf
<div class="form-group">
<label for="email" class="text-white">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="form-group">
<label for="textarea" class="text-white">Message</label>
<textarea class="form-control" id="textarea" rows="3" name="message" required></textarea>
</div>
<input type="submit"
id="submitButton"
class="g-recaptcha btn btn-primary"
data-sitekey="MY-PUBLIC-KEY"
data-callback='onSubmit'
data-action='submit'
name="submit">
</form>
Then in javascript get the form and trigger submit on it
function onSubmit(token) {
document.getElementById("contactForm").submit();
}
window.onSubmit = onSubmit;
I'm using blade templates and this is how my form looks:
<form action="{{ route("user-sessions.store") }}" method="POST">
#csrf
<div class="form-group">
<label for="e-mail">E-mail Address</label>
<input name="email_address" class="form-control" type="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" />
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" />
</div>
</form>
Does back()->withInput() only work with {{ Form::open() }}? If so, the 7.x documentation doesn't say that it seems. I would think if you need a 3rd party library to get this to work, the documentation should say so. If that's not the issue, then what am I doing wrong?
I'm using Laravel 7.x.
if you use html collective, it automatically puts old values in form inputs. But when use pure html to create form inputs you have to use old method for input values. like this:
<form action="{{ route("user-sessions.store") }}" method="POST">
#csrf
<div class="form-group">
<label for="e-mail">E-mail Address</label>
<input name="email_address" class="form-control" type="email" value="{{old('email_address')}}"/>
</div>
<div class="form-group">
<label for="password">Password</label>
<input name="password" class="form-control" type="password" value="{{old('password')}}"/>
</div>
<div class="form-group">
<input class="btn btn-primary" type="submit" />
</div>
</form>
I am trying to test web application build in Angular with Cypress.
On clicking a button it should navigate to the next page. However this is not working in Cypress. The application is working fine. Below is the html page.
<h2>Login</h2>
<div class="div1">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Username</label>
<input type="text" formControlName="username" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
</div>
</div>
<div class="form-group">
<button [disabled]="loading" type="submit" class="btn btn-primary">Login</button>
<img *ngIf="loading" src="data:image/gif" />
<a [routerLink]="['/register']" class="btn btn-link">Register</a>
</div>
</form>
</div>
Added html code
I am trying to implement Paystack in Laravel; I'm using their suggested documentation for Laravel. The issue is that the amount and email get passed onto the Paystack database, but the customer's name and phone details aren't. How do I get it to be passed along to Paystack?
I have configured the checkout process as mentioned in the documentation based on https://github.com/unicodeveloper/laravel-paystack. I'm using Windows 10 and running Laravel 5.6 and PHP 7.3.
<form class="needs-validation" action="{{ route('pay') }}" method="POST">
<div class="row">
<div class="col-md-6 mb-3">
<label for="first_name">First name</label>
<input type="text" class="form-control" id="first_name"
placeholder="first name" value="" name="first_name" required="">
</div>
<div class="col-md-6 mb-3">
<label for="last_name">Last name</label>
<input type="text" class="form-control" id="last_name"
placeholder="last Name" name="last_name" value="" required="">
</div>
</div>
<div class="mb-3">
<label for="email">Email <span class=" text-danger"> * </span>
</label>
<input type="email" class="form-control" id="email" name="email"
placeholder="you#example.com" required>
</div>
{{ csrf_field() }}
<hr class="mb-4">
<button class="btn btn-success btn-lg btn-block" type="submit"
value="Pay Now!">
<i class="fa fa-plus-circle fa-lg"></i> Complete Payment!
</button>
</form>
I expected that after the payment is complete, the customer data should contain the customer email, and name. But it returns only the email in the customer array.
you have to implement it yourself, before the pay button try to have a form like this
<form action="/myform" method="post">
<input type="text" name="fullname">
<input type="number" name="phone_number">
<button>submit</button>
</form>
Route::post('/myform','controllerhere#form1')->name('name');
Route::get('/pay','controller#function')->name('pay');
Route::post('/pay','controller#function')->name('pay');
then your controller to look like this
public function form1(Request $request){
$request->validate([....]);
save the form and return redirect to your payment form like this
..
return redirect('/pay');
}
then payments can be made, please the above codes are just samples to help
Alternatively if you check the https://github.com/unicodeveloper/laravel-paystack package, there is a commented section in the paystack.php; this contains a sample of how to add custom_fields to the metadata.
`<input type="hidden" name="metadata" value="{{ json_encode($array) }}" >`
$array = [ 'custom_fields' => [
['display_name' => "Cart Id", "variable_name" => "cart_id", "value" => "2"],
['display_name' => "Sex", "variable_name" => "sex", "value" => "female"],
]
]
Edit this to add name of the customer and amount then if you dd($paymentdatails) you will see the details in metadata.