Solved

How To Capture Data Submitted in a Form To Tables in HTML

Posted on 2008-11-03
8
968 Views
Last Modified: 2013-12-13
I am using MachForm by www.appnitro.com to capture submission of certain data by the users. The captured data is stored in the Database and also emailed to me.

Then I use the data, copy and paste them to my table in .html file in the relevant places viz.,
Name Field Captured in the Name Column of the .html table.
URL Field Captured in the Website Column of the .html table

My Question is apart from capturing submitted data in the database and emails, is it possible to capture them directly in a .html file containing the blank table or the data captured in the database can be imported to the relevant columns in the .html file.

Or is it possible to do so in the case of a .php file
0
Comment
Question by:skindu26
  • 4
  • 4
8 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
Yes, you can do this.  If you're capturing data fields and putting them into a database, you can also capture them and write them into a flat text file of HTML.  The action script can do this, or you could have a separate script that accessed the data base and prepared the HTML.
0
 

Author Comment

by:skindu26
Comment Utility
Well, Ray, but you need to explain me more where can i get such action scripts or how it should be coded. or a separate script that access the db and prepare the html..this will save me more time and never require my website design to be altered.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
Well, the MachForm is self-hosted, so you will need to know some PHP in order to make these changes.  You will need to go into the code and locate the place where it writes into the data base.  From there you can grab the same field names and values for use in your HTML.

The way MachForm works may not make this very easy.  You will need to have specialized knowledge of the content of the forms.  MachForm uses field names like "element_1", "element_2", etc. instead of meaningful names.  See below for the form page from their demo of the bug report form.

This field identifies the action script (the web page that processes the form)
action="#main_body"

You'll need to figure out what script that is on your implementation and make the changes there.

Sorry it's not easy, but there are a lot of moving parts in form processing.  Good luck, ~Ray

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Bug Report</title>

<link rel="stylesheet" type="text/css" href="./data/form_5/css/view.css" media="all" />

<script type="text/javascript" src="js/view.js"></script>
 

</head>

<body id="main_body" >

	

	<img id="top" src="images/top.png" alt="" />

	<div id="form_container">

	

		<h1><a>Bug Report</a></h1>
 

		<form id="form_5" class="appnitro"  method="post" action="#main_body">

					<div class="form_description">

			<h2>Bug Report</h2>

			<p>Please complete the form below detailing your report.</p>

		</div>						

			<ul >

			

					<li id="li_1" >

		<label class="description" for="element_1">Customer ID </label>
 

		<div>

			<input id="element_1" name="element_1" class="element text medium" type="text" value="" /> 

		</div> 

		</li>		<li id="li_9" >

		<label class="description">Name <span id="required_9" class="required">*</span></label>

		<span>

			<input id="element_9_1" name= "element_9_1" class="element text" maxlength="255" size="8" value="" />

			<label>First</label>
 

		</span>

		<span>

			<input id="element_9_2" name= "element_9_2" class="element text" maxlength="255" size="14" value="" />

			<label>Last</label>

		</span> 

		</li>		<li id="li_3" >

		<label class="description" for="element_3">Email <span id="required_3" class="required">*</span></label>
 

		<div>

			<input id="element_3" name="element_3" class="element text medium" type="text" maxlength="255" value="" /> 

		</div> 

		</li>		<li id="li_4" class="section_break">

			<h3>Bug Details</h3>

			<p></p>

		</li>		<li id="li_8" >

		<label class="description" for="element_8">Is this bug urgent? </label>
 

		<div>

		<select class="element select small" id="element_8" name="element_8"> 

			<option value="1" selected="selected">No</option>

<option value="2" >Yes</option>
 

		</select>

		</div> 

		</li>		<li id="li_5" >

		<label class="description" for="element_5">This is what I DID: </label>
 

		<div>

			<textarea id="element_5" name="element_5" class="element textarea medium" rows="8" cols="90"></textarea> 

		</div> 

		</li>		<li id="li_6" >

		<label class="description" for="element_6">This is what I EXPECTED to happen: </label>

		<div>

			<textarea id="element_6" name="element_6" class="element textarea medium" rows="8" cols="90"></textarea> 

		</div> 

		</li>		<li id="li_7" >
 

		<label class="description" for="element_7">This is what ACTUALLY happened: </label>

		<div>

			<textarea id="element_7" name="element_7" class="element textarea medium" rows="8" cols="90"></textarea> 

		</div> 

		</li>

			

					<li id="li_buttons" class="buttons">

			    <input type="hidden" name="form_id" value="5" />

			    

			    <input type="hidden" name="submit" value="1" />

				<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
 

		</li>

			</ul>

		</form>	

		<div id="footer">

			Powered by <a href="http://www.appnitro.com">MachForm</a>

		</div>

	</div>

	<img id="bottom" src="images/bottom.png" alt="" />
 

	</body>

</html>

Open in new window

0
 

Author Comment

by:skindu26
Comment Utility
Well, Now I created a self prepared html form. The code snippet is included below. These are the problems I am facing, one is CSS and other is capturing..

1. In Firefox 2.0.17 the design is not WYSIWIG, whereas in IE7 I get it as such I created.
2.I want the data entered by visitors need to be received by me through email on submission and the visitor should be redirected to a thank you page.

I browsed search html forms at EE..but most of them are not solved...

can you or any other expert help me out.

Solution Expected:

1. Correcting Display to be same in FF and IE
2. Need a php script that can send email to me (but without showing up my email in the html source) on submission duly capturing all the supplied information
3. Then the visitor must be directed to a Thank You page for submission.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 

<head>

<meta content="en-us" http-equiv="Content-Language" />

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Add Your Affiliate Network or Affiliate Program</title>

<style type="text/css">

.style1 {

	text-align: justify;

	color: #99CCFF;

}

.style2 {

	color: #99CCFF;

}

.style3 {

	margin-left: 0px;

}

.style4 {

	color: #FFFFCC;

}

.style5 {

	margin-bottom: 0px;

}

.style6 {

	font-family: "Trebuchet MS";

	font-size: small;

}

.style7 {

	text-align: center;

}

</style>

</head>
 

<body>
 

<form method="post" style="max-width: 780px; max-height: inherit; color: #99ccff;">

	<div class="style1">

				

			

	<fieldset float="left" name="Group1" style="width: 370px; color: #99CCFF;">

	<legend class="style2"><strong>Company Details</strong></legend>

	<label id="Label1"><br />

	Network Category: </label>

	<select name="Category" style="width: auto" title="Category">

	<option value="CPA">CPA</option>

	<option value="Ads">Ads</option>

	<option value="PPC">PPC</option>

	<option value="Work at Home">Work at Home</option>

	<option value="Adults">Adults</option>

	</select><br />

	<br />

	Company Name:&nbsp;&nbsp;&nbsp;&nbsp;

	<input name="Name" tabindex="2" type="text" /><br />

	<br />

	Web Site URL:&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;

	<input name="URL" type="text" value="http://" /><label id="Label2"><br />

	Established Year:&nbsp;&nbsp;&nbsp;

	<input name="Year" style="width: auto" type="text" /><br />

	<br />

	Affiliate Manager:&nbsp;&nbsp;

	<input name="Manager" style="width: auto" type="text" /><br />

	Email Address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	<input name="email" style="width: auto" type="text" /><br />

	Telephone:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	<input name="phone" style="width: auto" type="text" /><br />

	<br />

	Support:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	<select multiple="multiple" name="support" style="width: 137px">

	<option value="Web Support">Web Support</option>

	<option value="Live Chat">Live Chat</option>

	<option value="Email">Email</option>

	<option value="IM">IM</option>

	</select><br />

	</label><br />

	Global Acceptance of Publishers: Yes<input name="ga1" type="radio" value="1" /> 

	No<input name="ga1" type="radio" value="2" /><br />

	<br />

	</fieldset>

	<fieldset class="style1" float="right" name="Group2" style="width: 380px; color: #99ccff;">

	<legend class="style2"><strong>Program Description</strong></legend>

	<br />

	Add Your Description Here. Limited To 2000 Characters.<br />

	<br />

	<textarea name="desc" style="width: 371px; height: 186px"></textarea><br />

	<br />

	UploadYour Web Site Logo, if available<br />

	<input name="image1" tabindex="1" type="file" /> <br />

	<br />

	Upload Your Web Site Index Page/Landing Page/ DashBoard Screeshots<br />

	<input name="image2" tabindex="1" type="file" /></fieldset><br />

	<br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Program Details</strong></legend>

	Ads Type: CPA<input name="at1" type="checkbox" value="at1" />CPL<input name="at2" type="checkbox" value="at2" />CPC<input name="at3" type="checkbox" value="at3" />CPS<input name="at4" type="checkbox" value="at4" />CPO<input name="at5" style="width: 28px" type="checkbox" value="at5" /><br />

	No. of Ads Available: 

	<input name="Text20" style="width: 79px" type="text" /><br />

	<br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Program Commission Details</strong></legend>

	<span class="style4">Details of minimum base commission and maximum base commission that can be 

	earned when an Affiliate or Publisher joins your Affiliate Network and 

	promotes (in dollars and in percentage):</span><br />

	Minimum&nbsp; Base Commission: Flat<input name="bc1" style="width: 65px" type="text" value="$" /> 

	Percentage<input name="bc2" style="width: 65px" type="text" /><br />

	Maximum Base Commission: Flat<input name="bc3" style="width: 65px" type="text" value="$" /> 

	Percentage<input name="bc4" style="width: 65px" type="text" /><br />

	Specify Signup Bonuses, if any:&nbsp;&nbsp;

	<input name="bc5" style="width: 65px" type="text" value="$" /> <br />

	Specify Additional Rewards to Super Affiliates, if any:&nbsp;&nbsp;

	<input name="bc6" style="width: 350px" type="text" /> </fieldset></fieldset><br /><br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Referral Levels</strong></legend>

	Tier-I<input name="t1" type="checkbox" value="t1" />&nbsp;&nbsp;&nbsp; Tier-II<input name="t2" type="checkbox" value="t2" />&nbsp;&nbsp;&nbsp; 

	No Referrals<input name="t3" type="checkbox" value="t3" /><br />

	If Different, Please Specify:<input name="t4" style="width: 182px" type="text" value="t4" /><br />

	<br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Referral Earnings</strong></legend>

	Lifetime Commissions: Yes<input name="lc1" type="radio" checked="checked" value="1" /> No<input name="lc1" type="radio" class="style5" value="2" /><br />

	Flat Rate or Percentage : Flat<input name="fr1" type="radio" value="1" /> 

	Percentage<input name="fr1" type="radio" value="2" /><br />

	Referral Earnings:<br />

	Flat Rate:<input name="fr2" style="width: 67px" type="text" value="$" /> 

	Tier-I:<input name="fr3" style="width: 67px" type="text" value="%" /> 

	Tier-II:<input name="fr4" style="width: 66px" type="text" value="%" /><br />

	<br />

	</fieldset></fieldset><br /><br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Payment Details</strong></legend>

	Payment Threshold (Minimum Commissions To Earn Before Receiving Payment): 

	<input name="pd1" style="width: 79px" type="text" value="$" /><br />

	Maximum Payment Allowed in a Payment Period:<input name="pd2" style="width: 79px" type="text" value="$" /><br />

	Payment Frequency ( Payouts Period):<br />

	(Multi Select as Applicable to your Program)<br />

	<select multiple="multiple" name="pd3" style="width: 173px">

	<option value="Daily">Daily</option>

	<option value="Weekly">Weekly</option>

	<option value="Fortnightly">Fortnighly</option>

	<option value="Monthly">Monthly</option>

	<option value="Net-7">Net-7</option>

	<option value="Net-15">Net-15</option>

	<option value="Net-30">Net-30</option>

	<option>Net-45</option>

	</select><br />

	<br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Payment Method (Payouts Mode)</strong></legend>

	Check:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

	<input name="pm1" type="checkbox" value="1" />&nbsp;&nbsp;&nbsp; ACH:&nbsp;&nbsp;&nbsp;

	<input name="pm4" type="checkbox" value="4" /><br />

	Wire Transfer: <input name="pm2" type="checkbox" value="2" />&nbsp;&nbsp;&nbsp; 

	Paypal:&nbsp; <input name="pm5" type="checkbox" value="5" /><br />

	Direct Deposit:<input name="pm3" type="checkbox" value="3" />&nbsp;&nbsp;&nbsp; 

	Others:&nbsp; <input name="pm6" type="checkbox" value="6" /> Specify Payout 

	Modes, if chosen Others:<input name="pm7" style="width: 295px" type="text" /></fieldset></fieldset><br /><br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Program Tracking</strong></legend>

	Tracking Software:<input name="tr1" style="width: 182px" type="text" /><br />

	IP Tracking:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Yes<input name="tr2" type="radio" value="1" /> No<input name="tr1" type="radio" value="2" /><br />

	Cookie Tracking: Yes<input name="tr2" type="radio" value="1" /> No<input name="tr2" type="radio" value="2" /> 

	If Yes, Cookie Duration:<input name="tr3" style="width: 60px" type="text" value="Days" /><br />

	<br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Conversion/Statistics</strong></legend>

	Real Time Statistics: Yes<input name="cs1" type="radio" value="1" /> No<input name="cs1" type="radio" value="2" /><br />

	Deep Linking:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Yes<input name="cs2" type="radio" value="1" /> No<input name="cs2" type="radio" value="2" /><br />

	Conversion Rate : High<input name="cs3" type="radio" value="1" /> 

	Medium<input name="cs3" type="radio" value="2" />Low<input name="cs3" type="radio" value="3" /><br />

	Average Conversion Rate:<input class="style3" name="acr" style="width: 91px" type="text" value="Specify %age" /><br />

	</fieldset></fieldset>

	<br /><br />

	<fieldset name="Group1">

	<legend class="style2"><strong>Traffic Details</strong></legend>

	Traffic Allowed For Promotions (Please Check Applicable Traffic Modes):<br />

	<select multiple="multiple" name="tr1" style="width: 142px">

	<option value="Email">Email</option>

	<option value="Organic">Organic</option>

	<option value="PPC">PPC</option>

	<option value="Contextual Advertising">Contextual Advertising</option>

	<option value="Ad Networks">Ad Networks</option>

	<option value="Lead Batch Uploads">Lead Batch Uploads</option>

	<option value="Hosted Co-Reg">Hosted Co-Reg</option>

	<option value="Non-Hosted Co-Reg">Non-Hosted Co-Reg</option>

	<option value="Blog/Forum Postings">Blog/Forum Postings</option>

	<option value="PopUps">PopUps</option>

	<option value="SEO">SEO</option>

	</select> If Other Modes of Traffic are allowed, Please Specify:<input name="tr2" style="width: 212px" type="text" /><br />

	

	<fieldset name="Group1">

	<legend class="style2"><strong>Incentivized Traffic</strong></legend>

		Whether Traffic Can Be Incentivized:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

	Yes<input name="tr3" type="radio" value="1" /> No<input name="tr3" type="radio" value="2" /><br />

	Whether Traffic From Adult Sites Allowed: Yes<input name="tr4" type="radio" value="1" /> No<input name="tr4" type="radio" value="2" /><br />

		</fieldset><br /><br />

	

<fieldset name="Group1">

	<legend class="style2"><strong>Most Important Program Details</strong></legend>

		<strong>How Does Your Program Be Advantageous To Publishers/Affiliates?</strong>(Stand 

		Out From Other Affiliate Programs):<br />

		Pros-1<br />

	<input name="pro1" style="width: 543px" type="text" /><br />

	Pros-2<br />

	<input name="pro2" style="width: 543px" type="text" /><br />

	Pros-3<br />

	<input name="pro3" style="width: 543px" type="text" /><br />

	Pros-4<br />

	<input name="pro4" style="width: 543px" type="text" /><br />

	<br />

	<strong>Which Do You Think Require Improvisation in Your Program When 

	Compared To Your Competitors?</strong><br />

	Cons-1<br />

	<input name="con1" style="width: 543px" type="text" /><br />

	Cons-2<br />

	<input name="con2" style="width: 543px" type="text" /><br />

	Cons-3<br />

	<input name="con3" style="width: 543px" type="text" /><br />

	Cons-4<br />

	<input name="con4" style="width: 543px" type="text" /><br />

	<br />

	

	</fieldset>	

	<fieldset><label id="Label3"><em><span class="style6"><strong>Please ensure 

	before submission that you have provided all the required and relevant 

	information about your web site. This will be helpful for reviewing your 

	Program and publishing here. We at AffiliateProgramMarketings.com, 

	appreciate your submission. However, If the content of your program is found 

	inappropriate, in whatsoever possibility, at our sole discretion, we hold 

	the right not to publish your program.<br />

	</strong></span><br />

	</em></label>

	<div class="style7">

	<input name="Submit1" type="submit" value="submit" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="Reset1" type="reset" value="reset" /></fieldset>

</div>

</div>

</form>
 

</body>
 

</html>

Open in new window

ff2017sc.PNG
ie7sc.PNG
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
Comment Utility
You have several questions there!  Making IE and FF look the same is a good question for the CSS zone

I can show you the answer to this one: "want the data entered by visitors need to be received by me through email on submission and the visitor should be redirected to a thank you page."

Here is an example that shows all those things.  HTH, ~Ray
<?php // RAY_emailer.php
 
 

// CONSTANTS

DEFINE('EMAIL_ADDR', "you@your.org");

DEFINE('EMAIL_SUBJ', "Email From Web Site");
 
 
 

// FUNCTIONS

function clean_string($string) {

// FORCE IT TO ACCEPTABLE CHARACTER SET

	$new	= trim(ereg_replace('[^\' a-zA-Z0-9&!#$%()"+:?/@,_\.\-]', '', $string));

	$new	= ereg_replace(' +', ' ', $new);

return ( $new );

}
 
 
 

// IF THE FORM HAS BEEN SUBMITTED?

if (!empty($_POST["_submit"])) {
 

// CLEAN UP THE INPUT SO WE DO NOT TURN INTO A SPAM RELAY OR DESTROY OUR DATA BASE, ETC.

	foreach ($_POST as $key => $value) {

		$key = clean_string($key);

		$post["$key"] = clean_string($value);

	}
 

// SEND THE EMAIL MESSAGE

	if ( !mail(EMAIL_ADDR, EMAIL_SUBJ, $post["info"]) ) { echo "FOO"; /* MAIL ERROR HANDLING */ }
 

// PUT UP THE THANK YOU PAGE

	echo "Thank you.";

	die();
 

} // END PROCESSING SUBMITTED DATA
 
 

?>

<html>

<body>

<form action="<?=$PHP_SELF?>" method="post">

Enter some information here and click GO

<input name="info" />

<input type="submit" name="_submit"  value="GO" />

</form>

</body>

</html>

Open in new window

0
 

Author Comment

by:skindu26
Comment Utility
i have to run this code and insert my html form here  to get the results...no i am not looking for such a solution. i want to run the html form and upon submission by the visitor, i want that form to call some mailer scripts and send me all the submitted particular for reviewing. hope you understand. if i am at wrong please correct me.
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
I've answered your question, I think, and you have some obligation to try to understand and adapt the suggestions to your particular situation.

Sounds like you're not really looking for an answer to a question... This is more like a request for application development.  You might want to hire a professional if you are not readily able to adapt the examples -- it will be a much faster path to a solution.

Best of luck, ~Ray
0
 

Author Comment

by:skindu26
Comment Utility
Dear Ray,
I am a very basic beginner in this exercise, so after trying your method i found that i have to include my html form code snippet in the place where you have inserted 'html' tags. Upon calling your mailer script from the browser, I got the form and upon submission i received the mail.

i did not understand what you mean. i accept your script has provided a solution. only thing i expected from you is i need the mailer script be called upon submission. when i tried it too, again i had your 'enter some information and go' message.

but now i am able to understand this and i accept your solution fully.

sorry, if i caused inconvenience to you.

with regards, skindu
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Does the idea of dealing with bits scare or confuse you? Does it seem like a waste of time in an age where we all have terabytes of storage? If so, you're missing out on one of the core tools in every professional programmer's toolbox. Learn how to …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now