Submit button script.

**theremotedr** · 02-09-2017, 12:09 PM

Hi,
I have installed the files as advised from https://bootstrapious.com/p/how-to-b...p-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.

Code:

$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-b...p-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

Code:

<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

Code:

 <form></form>

Next before your

Code:

</body>

code tag at the bottom add

Code:

<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-b...p-contact-form. It gives you the php scripts you need and the javascript you need to put in your website root.

HTML Code:

<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

Code:

<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

Code:

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

.

The Bootstrap form has this in the html

Code:

HEAD

section:

Code:

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

The form itself starts with

Code:

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

.

Are you sure that you followed https://bootstrapious.com/p/how-to-b...p-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.

Code:

<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,

Code:

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

I have added this now in line 13

Code:

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

This is also at line 15

Code:

<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>.

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>. Add the Bootstrap html and then close the div with </div>

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>