I am new to AMP for Email and I am trying to create some interactive forms to be send as Email to my customers. Now I am facing an issue in the linked drop down implementation in AMP for Email. My requirement is based on the country drop down selection I have to fill the city drop down for my users to select their city.
But as per the documentation in <amp-list>
Binding to the [src] attribute is not allowed.
So how can I do my linked drop down functionalities in my amp for email
Please suggest!
One solution is to use amp-form instead of amp-list and bind to a hidden input element:
<form id="myForm" method="post" action-xhr="https://example.com">
<input type="hidden" name="param" value="" [value]="state.param">
<div submit-success>
<template type="amp-mustache">
<!-- your server response template -->
</template>
</div>
</form>
<button on="tap:AMP.setState({ state: { param: 'hello' } }), myForm.submit">Bind</button>
Also see the Advanced Server Request example on amp.dev: it demonstrates how you can replace an amp-list with an amp-form seamlessly on user interaction.
Related
I am using a simple form that was taken from one of the Netlify related docs:
<form name="contact" action="/" method="post" data-netlify="true">
<div className="field">
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" value="dave"/>
</div>
<div className="field">
<label htmlFor="email">Email</label>
<input type="text" name="email" id="email" value="email#email.com" />
</div>
<div className="field">
<label htmlFor="message">Message</label>
<textarea name="message" id="message" rows="6"></textarea>
</div>
<input type="submit" value="Send Message" className="" />
</form>
In using gatsby develop and working with/submitting the form, things seem to work fine. I get no errors and get redirected to the home page as expected.
After deploying the site with Netlify and trying to submit the form, I get the following page error:
In my Netlify backend, the form appears in the console but I cannot/do not receive submissions.
I am using a barebones gatsby-config.js, only incorporating gatsby-source-wordpress and gatsby-plugin-google-analytics.
I also tried adding /no-cache=1 to form action.
Can anybody advise?
It might also be worth noting that I have coded my form as a component and am importing it into my footer as such. In that way, it may be imported multiple times on different pages as mentioned in point 3 of this StackOverflow answer.
Thanks.
I learned that because I'm using Gatsbyjs, and Gatsby + Netlify = javascript forms, I needed to add another input type="hidden" to my form:
<form name="my-form" ... >
<input type="hidden" name="form-name" value="my-form" />
The documentation for this wasn't immediately clear but below are some links that address this:
Here's a link to an article that pointed me to the answer: How to
Integrate Netlify’s Form Handling in a React App
Here's another one if you're building in Vue: How to Integrate
Netlify Forms in a Vue App
And all about Netlify Forms
If you are using any redirect method then you have to add _redirects file in your root folder and add paths to it so that redirect can work.
It's may be confusing but you can visit this link for more help.
I know mkdocs is meant to be a static site without third-party integrations/forms.
I need to add a newsletter sign-up form to an mkdocs-generated page.
How can I do this? There seems to be 0% information about this online.
MkDocs uses Markdown and Markdown can accept raw HTML and pass it through unaltered. Therefore, include an HTML form in one of your Markdown pages. Perhaps something like this:
Some Markdown text.
<form action="http://someothersite.com/" method="post">
<P>
<label for="name">Name: </label> <input type="text" id="name"><br>
<label for="email">Email: </label> <input type="text" id="email"><br>
<input type="submit" value="Send">
</P>
</form>
More Markdown text.
Of course, as MkDocs is a static site, it will not be able to process the submission of the form. Therefore, the form will need to be submitted to some other service and/or script separate from MkDocs. For information on how to submit your form to a separate service, see the answers to Cross Domain Form POSTing.
I'm new to the Ionic framework, and I'm using Ionic 3.
Even though I use a form in my app, I'm still getting this warning in the browser:
[DOM] Password field is not contained in a form:
Why is that, and how can I fix it?
What is it?*
Chromium project (mostly Google Chrome) wants to change the world and make all passwords, as well as all form data autosaved and autofilled by default. The people behind this decision claim that will make the web safer†. While Firefox also promotes autosaved and autofilled form data, Chrome goes further admonishing web developers to comply with form element scoping that's more convenient for the browser.
At the same time, Google Chrome uses heuristics to determine what a "form" is on the web page and doesn't actually need individual form elements to be wrapped in a <form> element.
Additionally, Google Chrome treats all web pages, all forms and all form fields as if they are filled by the end user, where password is user's own password. A use-case where e.g. company administrator fills in new joiner's initial password is not supported.
The shortened URL in the form takes you to Create Amazing Password Forms page the the Chromium projects. Today the text there is very patronising, thus I'll omit the link.
†I neither claim to agree with Chrome/Chromium, nor claim that Google is in the position to profit from autofill via lock-in or access to user data; that's out of scope.
How can I fix it?
Simple: ignore it.
It's only a notice in developer tools in one of the major browsers.
Solution 1:
I think you are using Chrome browser. If you will try on Mozilla, it will not give the error. Please refer to this link for more details:
https://github.com/aws-amplify/amplify-js/issues/165
Here is the example:
<div className="myform" onSubmit={this.validateLogin()}>
<div className="myformgroup">
<label>Email</label>
<input type="text" placeholder="Email" id="email"></input>
</div>
<div className="myformgroup">
<label>Password</label>
<input type="password" placeholder="Enter the Password" id="mypassword" value=""/>
</div>
<div className="myformgroup">
<button type="submit" id="loginButton">Login</button>
</div>
</div>
Is returning the password field is not contained in a form.
Solution 1:
After changing the master div tag to a form as I have in the following:
<form className="myform" onSubmit={this.validateLogin()}>
<div className="myformgroup">
<label>Email</label>
<input type="text" placeholder="Email" id="email"></input>
</div>
<div className="myformgroup">
<label>Password</label>
<input type="password" placeholder="Enter the Password" id="mypassword" value=""/>
</div>
<div className="myformgroup">
<button type="submit" id="loginButton">Login</button>
</div>
</form>
it will not return the warning.
Solution 2:
Install aws-amplify in your project directory as explained in https://github.com/aws-amplify/amplify-js.
When creating a custom view in joomla with multiple forms, there is a conflict because each form has the id="adminForm" name="adminForm".
Renaming the form causes incompatibility with joomla.
How can I display multiple adminForm's on a single view?
Restructure the form elements into a single page-encompassing form
and remove the &task=controller.task portion from the form action
URL, e.g.
<form
action="<?php echo JRoute::_(''); ?>"
name="adminForm" id="adminForm" class="form-validate"
method="post" enctype="multipart/form-data">
On each submit button use the joomla method: onclick="Joomla.submitbutton('controller.task')" e.g.
<button type="submit"
onclick="Joomla.submitbutton('group.join')">Join</button>
Joomla will automatically update a hidden field with the name="task" and value="controller.task" which will get submitted with the form.
You need to have this element in your form for it to work, e.g.
<input type="hidden" name="task" value="" />
</form>
In my webapplication, a JSP page outputs to the webpage, the list of users logged in that day. I want to mail the same output to specifics mail-ids. What all Struts2 tags do I need to use?
Grab the HTML using JavaScript and send it as request parameter.
<div id="content">
... (here you should put content which you'd like to mail)
</div>
<form action="mail" method="post" onsubmit="html.value = encodeURIComponent(document.getElementById('content').innerHTML)">
<input type="hidden" name="html" />
<input type="submit" value="Mail this document" />
</form>
It'll be available as request parameter with name "html" in Struts2/Servlet side. The emailing job can be done with help of JavaMail.