PDA

View Full Version : Resolved Submit button script.



theremotedr
02-08-2017, 10:07 PM
Evening,
I'm looking for a script that will collect the data from my form & send it to my email address.
Here is the form in question, http://www.theremotedoctor.co.uk/form-contact.html
Just using mail-to I think it will attract to much spam & not sure if it will even collect the data to send ?
Please could you advise.

Many thanks.

mlegg
02-08-2017, 10:47 PM
You can add captcha to it
<input type="captcha" name="code" />
https://github.com/bggo/TimeLine-TaskManager/tree/master/formidable

theremotedr
02-08-2017, 11:00 PM
Captcha ?
First of all I need to collect the entered data ?

mlegg
02-09-2017, 12:27 AM
Did you add all of the php from that? The form collects all the info that you ask the person to fill out.
A form is made up in html and a PHP script that will handle the email sending, possibly Ajax too. Read this, it's good info https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

Captcha is this http://www.captcha.net/

theremotedr
02-09-2017, 12:44 AM
I didn't add anything yet.
I see many scripts but with forms.
I've a form in place so just need the php part of it I think.
This is where my brain lets me down & I end up messing up the page thus spending more time fixing it than just being able to carry out the php part of it.

mlegg
02-09-2017, 12:56 AM
You could always add a form that you create and just post somewhat simple code and leave the harder stuff to the form company.
https://www.jotform.com/ Go there and build the form, it's easy.

theremotedr
02-09-2017, 01:48 AM
Ha ha
I'm leaving Jotform to use my own form.

mlegg
02-09-2017, 02:12 AM
OK then you have to use all of the files that go along with the contact form and edit the send mail php

theremotedr
02-09-2017, 02:25 AM
Ok
Will check tomorrow.
Can you advise also once customer clicks on submit button how they are then directed to a specified HTML page just says thanks etc.
Thanks.

Beverleyh
02-09-2017, 06:38 AM
In PHP, a redirect is normally performed with the header() function, which goes after the form data processing part of the code.

http://php.net/manual/en/function.header.php

theremotedr
02-09-2017, 12:09 PM
Hi,
I have installed the files as advised from https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form
I see the form on my site now no problem,i though that i would just change the following email address and check to make sure i receive it then hopefully i would work my way through making edits.

$from = 'Demo contact form <theremotedr@gmail.com>';
$sendTo = 'Demo contact form <theremotedr@gmail.com>';

When i click on Send Message i am told,
The requested URL /contact.php was not found on this server.
http://www.theremotedoctor.co.uk/contact.php

Checking my page i do see it there,or should i say what i see i think is correct ?

theremotedr
02-09-2017, 12:42 PM
I put the php file in the wrong place.
Now form sent but waiting to receive it ha ha.
This still needs looking at

theremotedr
02-09-2017, 03:28 PM
Could you assist please with advising where in the file i need to edit so it collected data from my form and send to me.
This is my form http://www.theremotedoctor.co.uk/form-contact.html

I have downloaded and installed these files from here https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

If you could advise what i need to edit i will continue with it.
Thanks

mlegg
02-09-2017, 07:15 PM
On that page you still have the link to the old jotform css. You need to add
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> in the <head> section. On your html you need to get rid of the old jotform code and put the Bootstrap form code between
<form></form> Next before your
</body> code tag at the bottom add
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="validator.js"></script>
<script src="contact.js"></script>

You need to edit your contact form to use Bootstrap method and edit this code to fit your needs. Please go back and maybe even print out the directions on https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form. It gives you the php scripts you need and the javascript you need to put in your website root.


<form id="contact-form" method="post" action="contact.php" role="form">

<div class="messages"></div>

<div class="controls">

<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Firstname *</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Please enter your firstname *" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Lastname *</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Please enter your lastname *" required="required" data-error="Lastname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Email *</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Please enter your email *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Phone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Please enter your phone">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message *</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="Please,leave us a message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required. Contact form template by <a href="http://bootstrapious.com" target="_blank">Bootstrapious</a>.</p>
</div>
</div>
</div>

</form>

theremotedr
02-09-2017, 07:30 PM
This is my form page http://www.theremotedoctor.co.uk/form-contact.html

I see no reference to jotform on it ?

Please can you check for what i have done so far as mentioned above.
This is the form page http://www.theremotedoctor.co.uk/form-contact.html

I have completed the bootstrap form and sent it,i then see thank you message etc.

However i receive no form in my email ?
Once i receive a form then i can set to edit the 2 fowms etc,if you see what i mean.

mlegg
02-09-2017, 08:14 PM
Yes you still have

<link rel="stylesheet" href="assets/form-labels-on-top.css">
<link rel=stylesheet href="assets/style.css" type="text/css" media=screen /> and your form starts with
<form class="form-labels-on-top" method="post" action="#">.

The Bootstrap form has this in the html
HEAD section:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

The form itself starts with
<form id="contact-form" method="post" action="contact.php" role="form">.

Are you sure that you followed https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

theremotedr
02-09-2017, 08:28 PM
Can you look at the form and see what I have done so far.
I was confused when you said jot form.

This is why I can't attack most things as I have to work out everything you write and get further away from sorting out the form.
Can you look at my firm and just point out what needs to be removed and what needs to be replaced.

mlegg
02-09-2017, 08:32 PM
I gave you step by step directions above.

theremotedr
02-09-2017, 09:05 PM
I have removed this.

<link rel="stylesheet" href="assets/form-labels-on-top.css">
<link rel=stylesheet href="assets/style.css" type="text/css" media=screen />

And also this,

<form class="form-labels-on-top" method="post" action="#">

I have added this now in line 13

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

This is also at line 15

<form id="contact-form" method="post" action="contact.php" role="form">

mlegg
02-10-2017, 12:54 AM
You put the contact form html in the HEAD section. That's wrong. You have to put the contact form under the </header><!-- end header -->.

Now duplicate your index.html page and change the name to form-contact.html, SAVE your index.html. On the form-contact.html add the link in the HEAD section to the Bootstrap css. Delete <div class="wrapper"><div class="grid_5 alpha"> down until </div><!-- #end div #main .wrapper -->. Add the Bootstrap html and then close the div with </div><!-- #end div #main .wrapper -->

Make sure all of this is before the footer!
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="validator.js"></script>
<script src="contact.js"></script>

theremotedr
02-10-2017, 10:28 AM
I am sorry but i cant follow your instructions.
As easy as they may seem to you & others i am really struggling with them.

Please could you edit my page that i have attached as im just looking at the screen but nothing makes any sense now.
I dont like to do it this way but im at a stand still and not progressing anywhere.

Thanks very much & if its not possible for you i have no option but to just scrap the idea.

Many Thanks

mlegg
02-10-2017, 07:02 PM
hang on, the text is too long to enter

theremotedr
02-10-2017, 07:24 PM
Hi,
Just reading the supplied file on my phone, have you put the form on the index page ?
The form you mentioned needs to be put into the page which I supplied a link for.
Currently it is my form on the page BUT it needs to be replaced with the form you advised.
The look will then be what you currently see when you visit the page.

mlegg
02-10-2017, 08:02 PM
no I named the form-contact.html, I made that page look like your website

theremotedr
02-10-2017, 08:18 PM
Ok thanks.
I will take a better look tomorrow.
I asked as when I opened the zip file in the phone I seen the text Hello and Welcome of which is my index page & not my contact page.

Thanks for your time.

mlegg
02-10-2017, 09:30 PM
I forgot to add these. You need to add them to the root of your website

theremotedr
02-10-2017, 11:57 PM
Hi,
Ive just installed the files.
Its a different layout than what i had in mind but looks much better your way to blend it in with the other pages,i like that cheers.

I completed the form and sent it but i never received anything after 45 minutes,was i supposed to do something when i downloaded the files ?

Whilst we are on the track of it looking like the other pages, please take a look at the page now http://www.theremotedoctor.co.uk/form-contact.html

I need to add another say 6 text fields so i had to gain some space,hence it now missing a few items from the page.

Could you please assist with the following.
I could not locate the css that controls the colors etc,like send message button,please advise.
I also need to centralise the text HELLO & WELCOME & its text below,but also same css question as above.
Once the form can be completed & received i can then get to work on adding those extra fields mentioned above by following what you have done with the current fields in place.

I checked here for any errors and found 61 http://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=http://www.theremotedoctor.co.uk/form-contact.html
Please could you take a look as im sure many were when i remove the items to gain space ?

Many thanks for putting up with me on this.

This will be my job for the weekend & it will take me the weekend also to do.

mlegg
02-11-2017, 12:26 AM
Did you add contact.js and validator.js to your website root when you uploaded the contact-form.html page?

Delete
<!-- hero area (the grey one with a slider -->
<section id="hero" class="clearfix">
<!-- responsive FlexSlider image slideshow -->
<div class="wrapper">
<div class="grid_5 alpha">
<h1>HELLO & WELCOME</h1>
<p class="introduction-message">
Please complete the form below.

</div><!-- FlexSlider -->
</div>
</section><!-- end hero area -->

If you want you can put
<h1>Contact Form</h1> under the lines
<!-- main content area -->
<div id="main" class="wrapper">

theremotedr
02-11-2017, 09:53 AM
Morning,
I admit that i forgot to upload those files last night,however i have uploaded them this morning & completed another form but still never received anything in my email ?
Here is the form this morning http://www.theremotedoctor.co.uk/form-contact.html

Can you advise where i will find the css to make thew following changes as i dont seem to find it anywhere ?
Submit message button color from #449D44 to #0099FF
Text box border size & color.
Text box input color.
Text box border border radius.

These all seem to be controlled somewhere outside of the pc,is that correct,if so they should still be able to accessed ?

I would like that when the form is submitted the customer should be sent here http://www.theremotedoctor.co.uk/thank_you_page.html as opposed to the Thank you,i will reply back soon etc message.
Beverleyh mentioned about this http://php.net/manual/en/function.header.php but that was stright over my head

Many thanks for your time.

mlegg
02-11-2017, 08:18 PM
I don't see the js files when I look. Double check.

Edit the custom.css page and look for
.btn-send {
font-weight: 300;

ADD

background-color: #0099FF;
#contact-form {
border-style: solid;
border-color: red;
border-width: 5px;
}

change border-width from 5px to whatever size you want

theremotedr
02-11-2017, 08:24 PM
Hi
Not receiving emails to show that Ives had a reply to the post.

Can you advise the oath for where these js files should be located.
I've got then installed and think there in the no folder etc but maybe then in a sub folder and where the problem lies.
I will be home soon to check.

mlegg
02-11-2017, 08:40 PM
those 2 js files have to be in the root folder of your website. the public_html folder

theremotedr
02-11-2017, 08:54 PM
Hi,
Yes i had them in a js folder.
I have now moved them to where all the HTML files are please check your end and see if now correct.

I have also added the code you mention,of which i did something like that earlier but makes no difference at my end.
I have added the code below to the custom.css file

body {
font-family: 'Lato', sans-serif;
}
h1{
margin-bottom: 40px;
}
label {
color: #333;
}
.btn-send {
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
background-color: #0099FF;
#contact-form {
border-style: solid;
border-color: red;
border-width: 5px;
}

But my end i still see the submit button as green ?
Please advise what you see at your end.

6104

theremotedr
02-11-2017, 08:57 PM
Just had a thought,path for this custom.css file ?

theremotedr
02-11-2017, 09:03 PM
On this page http://www.theremotedoctor.co.uk/form-contact.html

At line 8 it shows the following,

<link href="http://www.theremotedoctor.co.ukcss/basic-style.css " rel="stylesheet">

Is that correct where ukcss is ?

theremotedr
02-11-2017, 09:17 PM
Ive got it.
This was missing from the html page

<link rel="stylesheet" href="css/custom.css" media="screen">

The css for the button is like this,

.btn-send {
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 20px;
border-color: #000000
border-style: solid;
border-width: 5px;
background: #0099FF;
}


Can you advise how to insert my thank you page please.

Also still dont receive emails

Thanks

mlegg
02-11-2017, 09:26 PM
go to your page and hit fn + f5 to clear your css cache

on the contact.php page did you add your email address to the line

<?php

// configure
$from = 'Demo contact form <demo@domain.com>';
$sendTo = 'Demo contact form <theremotedoctor@gmail.com>';

theremotedr
02-11-2017, 09:49 PM
I've done f5 plenty of times.
I've now added the missing CSS code to the file and also added the code for color and border etc and working fine, mentioned above.

Actually the from and send to both have my email but still no joy.

theremotedr
02-11-2017, 10:35 PM
Sat in bed looking at this form on the iPhone & iPad I am able to press submit form no problem and see a submitted ok message we will be in touch etc ????
This has only happened since I've put those 2 files in the main page with those HTML files.
Are you sure that is the correct place for them because before I couldn't send a form without completing the firkdsmafjdd with a * sign next to them.
I used to see a yellow message box pop up telling me to complete the field.
Please try and confirm it at your end as it shouldn't do that and never happened when I had placed it in the js folder.

mlegg
02-12-2017, 12:07 AM
you have this

<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
</div>
</form>
<br/>

<br/> wasn't in my code. Delete the <br/> and add back

<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Send message">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> These fields are required. Contact form template by <a href="https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form" target="_blank">Bootstrapious</a>.</p>
</div>
</div>
</div>

</form>

</div><!-- /.8 -->

</div> <!-- /.row-->

theremotedr
02-12-2017, 09:30 AM
Morning,
I have now done the code as advised above.
I added the<br/> because the submit button was the on the blue footer part.

My php email code is as shown below.

$from = 'Demo contact form <theremotedr@gmail.com>';
$sendTo = 'Demo contact form <theremotedr@gmail.com>';

I have completed another form on the pc & sent it but still doesnt arrive ?

Like mentioned before,
Clicking Submit button on pc WITHOUT completing the form tells me to complete the required fields.

However doing the same thing on my phone or ipad just allows the form to be sent no problem WITHOUT even completing the fields

theremotedr
02-12-2017, 02:16 PM
I am sorry to say that i have had to abandon this form as after some time still no emails were received.
I have now started another form which i can send & receive emails with eash.

Thanks very much for your time & input but i needed to move on.

I will start a new post as the form is now a different request.