website contact form (site sucker website) - javascript

I have downloaded a website using site sucker and I have all the html files. The website was developed using a CRM (it's my new client's website which I have to upload to my server asap and they don't have credentials for the same). I have a contact form which I want to make it work
Form code:
<form name="contactform" method="post" class="dmRespDesignRow" locale="ENGLISH">
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1289337126">
<label for="dmform-0" id="1623474142">Name:</label>
<input name="dmform-0" type="text" id="1049346235"/>
<input name="name" value="Name" type="hidden" id="1808095320"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1229775582">
<label for="dmform-1" id="1413734224">Email:</label>
<input name="dmform-1" type="email" id="1874224805"/><input name="email" value="Email" type="hidden" id="1790388701"/>
</div>
<div class="dmforminput required small-12 medium-4 large-4 dmRespDesignCol" id="1182638845">
<label for="dmform-2" id="1659409819">Phone:</label>
<input name="dmform-2" type="tel" id="1363423394"/><input name="phone" value="Phone" type="hidden" id="1562324064"/>
</div>
<div class="dmforminput dmRespDesignCol small-12 newLine large-12 medium-12" id="1310223649">
<label for="dmform-3" id="1594580770">Message:</label>
<textarea name="message" id="1731760981"></textarea>
<input name="message2" value="Message" type="hidden" id="1794081407"/>
</div>
<div class="dmformsubmit dmWidget R" preserve_css="true" id="1012153111">
<input class="" name="submit" value="Send" type="submit" id="1446531284"/>
</div>
<!--<input name="dmformsendto" value="O0wrseIfFLsSlLR4GAldF3Dy0PQjrXVAFxL5GhwSjRb9oqY0OVrc11ouhyoy2GDw/aszBHJnGyRKqT/UtxxJVGSoojrduF5h" preserve_css="true" type="hidden" id="1937799400" data-success-page="" data-dec="true"/>-->
<input class="dmActionInput" name="action" value="form_email.php" type="hidden" id="1733868877"/><input name="dmformsubject" value="Form Message" preserve_css="true" type="hidden" id="1339178452" data-success-page=""/>
</form>
I tried creating a new file i.e form_email.php and adding as action in the form but no luck. If I create a separate form test file (plain html without any classes) it works using that php file but doesn't work when integrating it with the actual form. I am not able to figure out what's the issue.

If you are not using JavaScript to intercept the form the action attribute should be added to the form tag, and not to an input. Example:
<form name="contactform" method="post" action="form_email.php" class="dmRespDesignRow" locale="ENGLISH">
In addition you must make sure that form_email.php is being correctly requested. If the file's location is not within the same directory the HTML file is (or the directory in which the CMS designated as such) you must fix the action attribute so that it points to the correct location. For example, if form_email.php is one level up (in the directory above the HTML file) you would reference it as such: action="../form_email.php".

Related

I have used the post method still I get the error

<form action="https://formsubmit.co/myemail" method="POST" >
<div class="row gtr-uniform">
<div class="col-6 col-12-xsmall">
<input type="text" name="name" id="name" value="" placeholder="Name" />
</div>
<div class="col-6 col-12-xsmall">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="col-12">
<input type="text" name="name" id="subject" value="" placeholder="Subject" />
</div>
<div class="g-recaptcha" data-sitekey="6LdseqkZAAAAAL5m2SpQL1I5Wo5aoC9qcWrfFq7c"></div>
<!-- Break -->
<div class="col-12">
<textarea name="message" id="message" placeholder="Enter your message" rows="6"></textarea>
</div>
<!-- Break -->
<div class="col-12">
<ul class="actions">
<li><input type="submit" value="Send Message" class="primary" /></li>
<li><input type="reset" value="Reset" /></li>
</ul>
<input type="hidden" name="_next" value="google.com">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_autoresponse" value="Your message has been recieved.Thank You...">
</div>
</div>
</form>
I have the method="POST" attribute in the form. I have used formsubmit.co to get help with the backend stuff, but it keeps giving me an error that "Form should POST". How do I solve this?
When using your snippet above, I get the following message: "Make sure you open this page through a web server, FormSubmit will not work in pages browsed as HTML files." Have you read the FAQ on this exact error message?
According to the linked FAQ:
You may encounter an error: Make sure you open this page through a web
server, FormSubmit will not work in pages browsed as HTML files.
So there are 2 ways you can fix this issue.
You can use a simple web server like Apache HTTP Server. You can add a
hidden input field with the form URL,
<input type="hidden" name="_url" value="https://yourdomain.co/contact.html">
This is a bit late but I'm sure it will help you out.
I'm referring to this answer https://stackoverflow.com/a/64719964/9535043
Your code seems okay the only issue is with the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or domain name, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
I'm sure this will help you out.
Further information
FormSubmmit Documentation: https://formsubmit.co/documentation

Redirect to the page where user came from

I have a custom page template with a form. And this form displayed in many pages using shortcode. When the user click the submit button, the user will redirect to a "Thank you" page. This thank you page is a static (created using the WP page editor) with a href. Now, when the user click that a href (found in the thank you page, he/she will redirect to the page url where the user submit the form but in the specific portion of the page where the user came from. But I don't know how to do this. Can anyone help me with this?
<form method="POST">
<span class="icon-pp-green-ribbon"></span>
<fieldset>
<div class="form-group">
<label for="customer_fname"><span class="icons-asterisk"></span> Your name:</label>
<input type="text" name="name_first" placeholder="" required/>
</div>
<div class="form-group">
<label for="customer_tsname"><span class="icons-asterisk"></span> Your surname:</label>
<input type="text" name="name_last" placeholder="" required/>
</div>
<div class="form-group">
<label for="email">Your e-mail:</label>
<input type="email" name="email" placeholder="#"/>
</div>
<div class="form-group">
<label for="phone"><span class="icons-asterisk"></span> Phone number:</label>
<input type="text" name="phone" pattern ="^09\d{9}$" onkeypress="return isNumberKey(event)" size="11" placeholder="09" required/>
</div>
<div style="margin-top: 1.50em;">
<input type="checkbox" id="utm_checked" checked style=" float: left; transform: scale(1.2);"/>
<label for="utm_checked">I want to be occasionally notified</label>
</div>
<div class="form-group">
<input type="submit" name="submit" value="Send"/>
</div>
</div>
</form>
Try this button maybe as told here:
<input action="action" type="button" value="Back" onclick="window.history.go(-1); return false;" />
If your previous page URL does not have page section info like www.yoursite.com/somePage#someSection, you can push custom URL to the history stack before leaving that page, so that whenever your go back, you not only go back to the page but also the specific portion that you came from. You can push custom URL to the history stack maintained by the browser as described here
Try this code to utilize page visit history maintained by the browser:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>

Load a form action in a div on the same page

I have a dealer locator which is powered through software that our IT department manages, and I'm trying to fix up their code a bit and make it more user friendly.
What I'd like to do is allow end users to enter in their zip code, and have the list of dealers in their area show up on the same page, rather than open a new tab/window, or re-load the page.
<div class="locator">
<form method="get" id="dsearchform" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer" target="_blank" alt="Pace Search - Sno-Way" onsubmit="return dsearch(this)" class="dealersearch">
<input type="hidden" name="locatorBrand" value="SWEQ" />
<input type="hidden" name="distance" value="100" /><input type="hidden" name="numlocations" value="6" />
<h2>Sno-Way Dealer Locator:</h2>
<h3 class="secondary">Enter your zip code below to find an authorized Sno-Way dealer near you!</h3>
<div class="zip-entry">
<input type="text" name="zip" placeholder="ZipCode" value="ZipCode" class="field" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit" name="submit" value="Search" id="button" class="but"/>
</div>
</form>
</div>
I've cobbled this together from another solution posted here, but I don't think it's on the right track at all:
<div id="search">
<form id="try" method="post" target="receiver" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer">
Zip: <input id="zip" name="zip" type="text" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['zip'])){
//display search results here.
}
?>
</div>
</div>
First of
If you want to change the html dynamically you need to go with JavaScript and AJAX. This is , you load stuff asynchronously. The comment states XHR, this is
XmlHttpRequest
Better directly look for the much more convenient JQuery Ajax function.
Jquery is very easy to use.
Example to set html of the container with id retailer
$('#retailer').html(response); // response is the html your php creates
You only need to fetch the html via jquery ajax({... }), where most of the stuff works by default. Just set the url of your webservice and the request body payload) and go. In the callback you do the above and are fine.
Give it a try at
https://learn.jquery.com/ajax/
And inside your html after including the script resource for jquery in the header.
<script>$(document).ready(function(){
// your code goes here
}); </script>
To code your JQuery / JS.
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header" id="content-wrapper">
<h1>
Dashboard <small>${userType} </small>
</h1>
</section>
</div>

On Submit Add Entered E-Mail To E-Mail Subscribers List

This question is more than likely a duplicate however I cannot find this question already on StackOverflow.
HTML Snippet
<!-- newsletter widget -->
<div class="widget-container newsletterBox">
<div class="inner">
<h3>Newsletter</h3>
<form method="get" action="#">
<input type="text" value="" name="email" class="inputField" placeholder="Email">
<input type="submit" value="Subscribe" class="btn-arrow">
</form>
</div>
</div>
<!--/ newsletter widget -->
A basic input field with a submit button resides on my html page.
How do I safely add their e-mail to the likes of a .txt file on my server without the person being able to enter code to hack my website?
Is it possible to keep my page .html and not have to use PHP?

saving form data to local drive as xml file

I would like to have data entered into an html form saved to my local drive. I do not want the form data sent to a server and do not want to have the saving of the form data require internet access. Is there a way to have this data saved via javascript to a local xml file? Below is an example of some basic form fields I would like to save to xml locally. thank you.
<!DOCTYPE html>
<html>
<form action="/my-local-drive" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" />
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email" />
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</html>

Categories