I just want to ask a question
Im a Preact user, never tryed React, I only did a course a couple of months ago. But now I have to use React for a project and I'm trying to port one of my libraries: https://github.com/k1r0s/preact-bind-group
This library aims for easy form setup
<FormGroup watch={change => this.setState({ ...change })}>
<div className="field">
<label className="label">Email</label>
<div className="control">
<input data-bind="mail" className="input"/>
</div>
</div>
<div className="field">
<label className="label">Contraseña</label>
<div className="control">
<input data-bind="pass" type="password" className="input"/>
</div>
</div>
<div>
<a onClick={_ => this.doLogin(this.state)} className="button is-primary">Submit</a>
</div>
</FormGroup>
My code works perfecly on Preact but Im facing issues on React, for example input is loosing focus everytime I time on the form rather than update field value.
This is the React example: https://codesandbox.io/s/9jv6n8mnrp
This is the Preact which is working: https://codesandbox.io/s/wmpv1o4z8
This library keeps an internal state to manage field values and events.. what Im doing wrong? help appreciated
Removing keys example worked :\
But warnings keep appearing
Related
We implemented a simple nuxt app with a basic form and deployed it to netlify.
When pressing the "Submit" Button of the Form, we receive a 404.
Here you can find the link to the deployed netlify app:
EDIT -> Removed Link
After looking through the troubleshoot guide, they listed that the added "netlify" or "data-netlify="true" attributes should not be visible if netlify recognized your form, but they are.
Plus the form can't be found in the "form" configuration tab of the netlify backend.
Nuxt config:
SPA
Tailwind
We tried to add the necessary attributes for netlify:
netlify or
data-netlify="true" & netlify-honeypot="bot-field"
We also added a "pre-render" library called prerender-spa-plugin.
Here you can find the contact.vue page content.
Simple form with "name" attributes set according to netlify documentation.
<template>
<div>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<p class="hidden">
<label
>Don’t fill this out if you're human: <input name="bot-field"
/></label>
</p>
<p>
<label
>Name
<input
type="text"
name="name"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<label
>Email
<input
type="email"
name="email"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<button
type="submit"
name="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Send
</button>
</p>
</form>
</div>
</template>
<script>
export default {};
</script>
<style>
.hidden {
display: none;
}
</style>
It would be great if we can manage to fix this, so that netlify finally recognizes our form.
Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.
The form is required to be in the rendered files at deploy time. The problem with SPA mode is that none of your pages are actually rendered as HTML. You can check this by right clicking the page, and clicking "View Page Source". You won't be able to find the form.
Netlify addresses this problem here in their docs.
They have a specific post for fixing this for a Vue app here
A little more digging on the the issue and we find a Nuxt solution here:
Place the following in static/form-dummy/index.html:
<form name="MYFORM" action="/form/success" netlify>
<!-- form controls here -->
</form>
Place the following in pages/form/index.vue (Or whenever you've named your Vue file)
<form name="MYFORM" action="/form/success" method="post">
<input type="hidden" name="form-name" value="MYFORM" />
<!-- form controls here -->
</form>
From the post:
You just need to make sure you add that hidden in the Vue component so that Netlify recognises the form submission as associated with the form called MYFORM. I think you also need to ensure all the inputs you want to receive data for are on both forms.
Laravel Spark has a number of forms in its settings area. Here's one that adds teams.
If I look at the source code of this form, I see the following.
The HTML source for this form looks like the following
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">
Team Name
</label>
<div class="col-md-6">
<input type="text" id="create-team-name" name="name" class="form-control">
<!---->
<span class="help-block" style="display: none;">
</span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-6">
<button type="submit" class="btn btn-primary">
Create
</button>
</div>
</div>
</form>
Specifically, the form itself has no action or type parameter
<form role="form" class="form-horizontal">
My assumption is there's some javascript running that handles all this (a Vue JS component), but it's not clear
Where the Team Creation javascript source lives, and/or where Spark creates the component
How I can backtrack how a particular form to its javascript
Experienced programmer here -- just new to Spark and hoping this is simple/obvious for an experienced Spark developer.
Each <form> in Spark is typically handled by a Vue.js component containing its definition, and although they don't have action or method attributes, they do have special Vue directives, such as #submit (or #click if it's a <button type="submit">). The reason you don't see them in HTML in dev tools, is because those directives are compiled before rendering.
So the form you're referring to is wrapped into a <spark-create-team> tag. You can find the code that initializes this component in /resources/assets/js/spark-components/settings/teams/create-team.js; you'll also note that it simply requires the component definition from Spark's /vendor directory. In other words, component and form definitions are stored in Spark vendor files at /vendor/laravel/spark/resources/assets/js/settings/teams/create-form.js. Can you see that settings/teams/create-form.js part is identical? This should help you locate the underlying JS code for any component or form -- just search Spark's JS assets, and eventually its folder structure will become a second nature to you.
As for the SparkForm class, it's a helper class designed for working with form errors. Its definition is in vendor/laravel/spark/resources/assets/js/forms/form.js file, although I don't think you'll ever need to make any modifications to it; just follow Taylor's examples with forms using Axios, and you shouldn't have any problems with submissions or validation. Although for the later point, validation, I'd suggest using an external package, instead of defaulting to server-side validation, but that's a bit off topic here.
Hope this helps.
I have a client that uses hubspot for their tracking and thank you pages. I have created a landing page using bootstrap and within the page I have two forms. Both forms are the same and I want them to go to the same thank you page. The client has provided me with an embedd code but I am not sure how I can bridge the gap. Below I have listed my form code and the embed code. I basically want the user fields to be submitted into hubspot and for it to trigger the thank you page but I am not entirely sure this is possible. Any help would be appreciated.
<div class="col-lg-12 contact-form">
<div class="container">
<div class="formContainer">
<form role="form">
<div class="form-group">
<div class="col-sm-6 left-field">
<input type="text" class="bottom-form" id="firstname" placeholder="First Name">
</div>
<div class="col-sm-6 right-field">
<input type="text" class="bottom-form right-field" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="bottom-form email" id="email" placeholder="email">
</div>
<div class="col-sm-12">
<button type="submit" class="submit bottom-submit">Download Now</button>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the hubspot embedd code.
<!--[if lte IE 8]>
hbspt.forms.create({
css: '',
portalId: '2030148',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
});
Are you just looking to set the redirect with the embed code? If so, here is the addition to the embed code:
portalId: 'xxxxxx',
redirectUrl: 'url goes here',
formId: 'd9005302-a859-4a39-9d47-74d8a1d25fb0'
I actually figured out a proper solution without having to do any redirects or hairy coding.
First I setup a local host, which was my biggest issue, this helps with getting the actual hubspot form to show within my page (using a local show the embedd code does not appear, although obvious to others, it took me a sec). Oh, I should mention that the code is not necessary.
Once you have it showing you basically inspect the element and then add to the classes that hubspot spits out get it to look that way you want too.
We are using magento 1.8.1 and hosting it both locally in an iis/mysql environment and also testing in an ubuntu lamp environment, so we can verify it is not an iis issue. It happens on both environments.
I got up to the point of integrating the product listing page, where we want to show product reviews and the product review fonts, so users can give their reviews without clicking on a link to go to a different page to add it. I managed to load the product reviews blocks. At first the form element of the add to product button was mixing up with the product review form, which i solved by closing the previous form before starting the review form. I can see in Fiddler the request going through and the action on the form element looks like this
http://localhost/index.php/review/product/post/id/2/
While this will actually make the browser send the request (as seen on fiddler, with the right amount of parameters), the review is never stored in the database, so i cannot see it in the pending reviews part of the admin section. After examining both my store's html source and the online demo, i could see there was a hidden form field on the official demo storing the form_key , which i added since, but it still will not work.
Any hints where to look at?
the whole reviews form block looks like this:
<form action="http://localhost/index.php/review/product/post/id/2/" method="post" id="review-form">
<fieldset class="">
<h3>You're reviewing: <span>Powermonkey extreme 2</span></h3>
<ul class="form-list">
<li>
<label for="nickname_field" class="required"><em>*</em>Nickname</label>
<div class="input-box">
<input type="text" name="nickname" id="nickname_field" class="input-text required-entry" value="">
</div>
</li>
<li>
<label for="summary_field" class="required"><em>*</em>Summary of Your Review</label>
<div class="input-box">
<input type="text" name="title" id="summary_field" class="input-text required-entry" value="">
</div>
</li>
<li>
<label for="review_field" class="required"><em>*</em>Review</label>
<div class="input-box">
<textarea name="detail" id="review_field" cols="5" rows="3" class="required-entry"></textarea>
</div>
</li>
</ul>
</fieldset>
<div class="buttons-set">
<button type="submit" title="Submit Review" class="button"><span><span>Submit Review</span></span></button>
</div>
</form>
We have the same problem, and I solved it.
Magento has a form key when submitting any information to the database. To generate the form key, add this code:
<?php echo $this->getBlockHtml('formkey') ?>
I have form, which I use for users to login to the site. It works in Chrome, but for some reason not in IE 9.
Here is the form:
<cfform name="loginform" action="login.cfm" method="post">
<div class="span12">
<div class="span2">
User Name:
</div>
<div class="span2">
<cfinput type="text" name="username" required="yes">
</div>
</div>
<div class="span12">
<div class="span2">
Password:
</div>
<div class="span2">
<cfinput type="password" name="password" required="yes">
</div>
</div>
<div class="span12">
<div class="span2">
<cfinput name="submit" class="btn btn-primary" value="login" type="submit">
</div>
</div>
</cfform>
I am normally accessing the variable as #form.username#, but it is empty if being used in IE.
The simplified use here:
<cfif isdefined("FORM.submit")>
username: #form.username#
</cfif>
I can't see anything wrong with your code above when I run it I have the username field available to me in the form scope correctly. What version of Internet Explorer are you using?
To better debug this I would suggest the following:
Look at the source of the first page and see if there is anything
strange there.
Install Fiddler2 (http://www.fiddler2.com/) then use this to see
exactly what is being posted to login.cfm.
Other things to look at:
Are you using a javascript or CF framework that might be interfering with things?
I don't see anything overtly wrong with your code either. Did you try this in Firefox as well? Sometimes you can get better debugging information there. Possibly an actual error message with it. Both IE and Chrome can do a bit too "good" of a job of obscuring errors on the page.
My suggestion would also be to use plain form tags. Don't use cfform tags. There's not much need for them here. They aren't really helping you much. You could do your own validation on those fields and know exactly what it is that you are validating. You could also test your field that way. Simply change that cfinput to an input and see if that field becomes available in your post. That would pretty quickly let you know that there's an issue with your implementation of the CFFORM tags.
And it's getting a little OT, don't forget to trim the input and wrap it in XMLFormat() and add cfqueryparams to your SQL lookups to minimize scripting and injection attacks. You can also use CF's scriptProtect or rewriting URLs in IIS to help. Allowing free-form entry to FORMs or URLs without any validation is VERY dangerous.