On my Wordpress website, I have an input field where the user types their email address and then clicks "Submit" to submit their email to my google spreadsheet (using a google form on Google Drive).
I also have a button that opens a popup when the button is clicked (I'm using the SimpModal plugin for Wordpress).
Is there a way to integrate both functions, so that I will only have 1 button that accomplishes both results? (i.e. When the user fills out their email address and then clicks the submit button, it will submit their email address to the google form, and also open the popup window?)
Here's my code:
<!--This gets rid of the google confirmation page-->
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none; width:0px; height:0px;" onload="if(submitted){window.location='#';}"></iframe>
<form action="https://docs.google.com/forms/d/XXXXX/formResponse" method="POST" id="ss-form" onsubmit="" target="hidden_iframe">
<input type="text" name="entry.2005577686" value="" id="entry_2005577686">
<input type="submit" name="submit" value="Submit" >
<div id="button-to-open-popup"><a href="#">
<img src="/landing-pg-button-black.png" alt="" /></a>
</div>
</form>
Thanks in advance!!!
Really simple! If you don't have jQuery, please import it somewhere in your code:
<script src="http://code.jquery.com/jquery-latest.js"></script>
And then change the onsubmit in the form tag...
<form ... onsubmit="$('#button-to-open-popup').click();return true;" ...>
Tada!
Related
I would like to store the contact us form data in my google form. I have created contact us form in my webpage and copied the google form link in my form link. Kindly tell the steps to make the form work
Here the code that I have written
<div class="form-group">
<form action="https://docs.google.com/forms/d/e/1FAIpQLSedlnzPGGIwjq_C3W0KCev-WexWs6SFdf7nk0sWT3v2wP6fA/viewform?usp=sf_link" class="comment-form contact-form" novalidate="novalidate">
<input type="text" class="form-control" placeholder="Name" name="name">
<input type="text" class="form-control" placeholder="Mail Address" name="email">
<textarea name="message" class="form-control" placeholder="Comment"></textarea>
<button type="submit" class="contact-us thm-btn"><span>Post Now</span></button>
</form>
My google form link is placed n the action which is https://docs.google.com/forms/d/e/1FAIpQLSedlnzPGGIwjq_C3W0KCev-WexWs6SF-df7nk0sWT3v2wP6fA/viewform?usp=sf_link
The google form data is accessible via google sheets.
You also have the ability to create a trigger that will do something with the data when the form is posted, more information on this can be found at.
https://developers.google.com/gsuite/add-ons/concepts/editor-triggers
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.
I am trying to use Dreamweaver CC 2017.5 to update an existing website. I am stuck on a web form button that won't submit the information. There is both a Submit button (which does not work) and a Reset button (which does work). I have looked for a link to send the form to an email, but I haven't found it yet.
Here is the existing code, as extracted from the large form coding:
Comments:
<br>
<textarea rows="8" name="comments" cols="50"></textarea>
<p>
<input id="SUBMIT" name="Submit Form" type="SUBMIT" value="Submit">
<input type="RESET" value="Reset Form" name="RESET">
</td>
Can you help?
Those buttons won't work if you haven't set a form action. Here is a working example to help: https://www.w3schools.com/html/html_forms.asp
I have a simple search box where the user is required to click the Submit button to send the address to some PHP/AJAX to query our SQL db. It does this by using the 'main-search' id of the Submit input.
<div class="address-search">
<input type='text' class='main-search-address' id="main-search-address" placeholder="Enter Street Address">in Seattle, WA
<input value="Search" type="submit" class="submit" id='main-search'>
</div>
I'd like to enable the user to be able to submit this form using the 'Enter' key, but when I wrap the inputs in a form tag, it submits, but no results show up. I've tried adding the id='main-search' to the form tag, which seems to get me closer, but instantly submits the form upon clicking in the text input.
Any help?
Thank you.
Try change:
<input value="Search" type="submit" class="submit" id='main-search'>
for:
<button type="submit" class="submit" id='main-search'> Search </button>
If nothing is displayed, you're probably wrong in your AJAX. Remember, AJAX needs a "id destiny".
I'm not sure what to put in for href:\ Should I reference a mailhandler.php or use a mailto: command? Or is there something better?
<h3 class="margin-bot">Newsletter!</h3>
<form id="subscribe-form" name="sibscribe" method="post">
<label><input class="subscribetext" type="text" onFocus="if(this.value =='Enter E-mail:' ) this.value=''" onBlur="if(this.value=='') this.value='Enter E-mail:'" value="Enter E-mail:" name="keyword" /></label>
<a onClick="document.getElementById('subscribe-form').submit()" class="button" href="#">subscribe</a>
</form>
I think it is meant for the site to which you get after pressing the subscribe button. Preferably the page the form was implemented in (for example to return to the index.html).
You can try it by testing it here on jsfiddle (http://jsfiddle.net). Just put an URL in the field where now is the # and after pressing subscribe you will see that you'll be redirected to that page.