Software Archive
Read-only legacy content

Contact Form

MooiYee_L_Intel
Employee
970 Views

I would like to create a contact form in my app so that users can send me the feedback or question, anyone have any idea how to do that? Thanks.

0 Kudos
11 Replies
Elroy_A_Intel
Employee
970 Views

When it comes to developing a contact form, you will need to develop both the client side (HTML) and the server side (PHP). The server will be used to interpret the submitted inputs from the user(client).

The following link provides step by step instructions for creating the client side contact form and also steps for developing the PHP code on the server.

http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/

0 Kudos
MooiYee_L_Intel
Employee
970 Views

I am using Intel XDK to develop my app, is this work on Intel XDK as well?

0 Kudos
Elroy_A_Intel
Employee
970 Views

Yes. You will need to also include the <script> tag below in the <head> tag of your index.html to send and receive Cross Origin requests when you submit your contact form data to your server.

<script src="intelxdk.js"></script>

<!--Add the following script after the intelxdk.js script tag-->

<script src="xhr.js"></script>

0 Kudos
MooiYee_L_Intel
Employee
970 Views

I am new to XDK and not familiar with php, can you share more details information on how does the whole thing works? Appreciate with your help.

0 Kudos
Elroy_A_Intel
Employee
970 Views

php is the commonly used programming language on your server for handling data sent/posted from your client application's contact form.  You can find step-by-step instructions for writing the php code at http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/.

0 Kudos
Moacir_d_
Beginner
970 Views

Mooi Yee L, You can use WebSQL to storage this list. 

0 Kudos
Dushan_C_
New Contributor I
970 Views

Yeah you need a web server with a server side program running to retrieve data. And your HTML application can send the data to that IP address.

0 Kudos
Ramith_H_
Beginner
970 Views

 

It will be very easy if you load an externel form to your app. For an example you can use google forms(which can be created using your google drive),where you can customize which data needs to be collected , what are the requires fields? Etc.

The responses will be saved on to your google drive as an spreadsheet.

The only drawback is that you need an active internet connection to use the form.(you can load it using an iframe)

 

 

 

 

0 Kudos
Jorge_F_1
Beginner
970 Views

(A solution type Push notification).
I am new to android ... and also in Intel XDK environment.

Gentlemen supporters, kindly guide me on the questions below:

1-I want to develop an app for android, which from a text box (text area or INPUT), you to inform your contact or a fact 

or even a complaint, this is sent to a specific e-mail, you see? as a kind of FEEDBACK. It could even be sent also to a 

specific whatsapp, but do not know what would be the most interesting, quick and efficient resolution of technical view 

point.

2-I have researched a lot about cord-plugins-email-compose, that is, within the Intel XDK environment; I did several 

tests and examples collected from the internet, but do not work. On the other hand, outshines in my view the issue of e-

mail, domain on android, do not know how this. For I see several apps, same with many such resources, forms, sending 

data, etc. But I'm having a hard time understanding these things.

3-In a web environment this is all understandable to me. Many years ago, I got to do a few simple things in PHP and Mysql 

... as the situation I described above ... made a page in HTML, logging suggestions and invoking a script on the server 

side PHP that I sent these records to a specific email. I stayed this page in cloud, remember that the (localweb) and 

localweb server had the resources to support PHP, Mysql. To host this page on the server, I had to create a domain in 

registro.BR and the service to send form data to an e-mail functioned normally. So I wanted to take this same solution 

... the same idea ... ie the web server environment for smartphones environment, android. You see? Finally, develop a 

simple app that the user could file a claim (form - text area, or INPUT button) and this was sent to a specific e-mail or 

even a whatsapp. A solution type Push notification.

questions:

1) I have almost given up the cord-plugins-email-compose, however, you can guide me more about this plugin and how to set 

up properly?
2-Where sets my account email in-cord plug-email-compose?
3) Can I send data from a form (text area) to integrate Intel XDK with PHP? (Ie, because in PHP, I know how to send e-

mail)
3) To host app, which server would indicate me?
4) Are there any free or paid server to send the APK and test, ie I could download and test the App on my phone?
5) To host my APP APK or on free or paid server, I would have to necessarily create have a domain? email account? SMTP? 

e-mail server?
6) Can demontrar me or send me an APP / APK to record a message, or text, or subject (text area or INPUT button) and 

internally APP feature to send this message to an e-mail?
7) I enjoyed the Intel XDK environment, but I would indicate another similar tool, given the complexity of dealing with 

e-mail?

Thanks for the clarification.
Thank you.
Jorge F.

0 Kudos
Diego_Calp
Valued Contributor I
970 Views

Hi Jorge,
As you seem more experiencied with html forms and php I'll tell you how to pass your input values from an XDK app to a php script. This is the answer to your question number 3. In this example, I pass two fields, Name and Note, and may use php to send a mail.

1. Drop two input fields and one button in your XDK page.

2. Fill the inputs ID value, name for the first, note the second.

3. Select the button and at the left panel, INTERACTIVITY section, drop down Action option and choose Custom Script. Press Edit Script button.

4. You will go to edit the button's click event at index_user_scripts.js file, this is the code:

   $(document).on("click", ".uib_w_7", function(evt)
    {
        /* your code goes here */ 

		//these two lines take the values from inputs using jquery
		var input1 = $("#name").val();
		var input2 = $("#note").val();
		
		//jquery ajax to send values to php using POST
		$.ajax({
			type: 'POST',
			url: 'http://www.yourserver.com/send_mail.php',
			data: {
				name: input1,
				note: input2
			},
			success: function (response) {
				//you may show some data from php using echo
				alert(response);
			}
		});		
		
         return false;
    });

5. This is send_mail.php, and how to use the values, probably you already know it.

<?php
//place here the php code to send the mail using the values in $_POST['name'] and $_POST['note']

//you may send some data back to the XDK app and will be received in the response value
echo "Thanks for your comment " . $_POST['name'];
?>

I hope this helps.

Regards,

Diego

 

0 Kudos
Charles_M_1
Beginner
970 Views

Thanks Calp Diego. Your solution works perfectly.

I implemented mine as below;

 /* button  #send_email */
    $(document).on("click", "#send_email", function(evt)
    {
        /* your code goes here */
        var name = document.getElementById("name").value;
        var email_add = document.getElementById("email_add").value;
        var message = document.getElementById("message").value;
        //jquery ajax to send values to php using POST
         $.ajax({
            type: 'POST',
            url: 'http://www.my_domain.com/test/send_mail.php', //domain url
            data: {
            name: name,
            email_add: email_add,
            message: message
            },
            success: function (response) {
            alert(response);
            }
        }); 
        return false;
    });

and my php file is as below

$subject = 'Test Email from App';
$to = 'email_address@domain.com';
	$name = $_POST['name'];
	$email_add = $_POST['email_add'];
	$message = $_POST['message'];
	$headers = "From: " . $email_add . "\r\n";
	$headers .= "Content-type: text/html\r\n";
	$body = 'Full Name : ' .  $name . '<br/>Email     : ' . $email_add . '<br/>Message <br/><br/>' . $message;
	$success = mail($to, $subject, $body, $headers);
	echo "Thank you $name, your message has been submitted, we will get back to you shortly";

The solution works perfectly and I get an email almost instantly. In a few seconds, the app sends a response on the app screen as below

screenshot.JPG

0 Kudos
Reply