WebFaction
Community site: login faq

Hi,

I am trying to make a website with Twitter Bootstrap. I have therefore created a website based on a static app including php5.4.

The website looks fine but I have an issue with the contact form that needs, I guess, the php link. As my php skills are close to 0, I would like to know if somebody could give me some guidelines on how I can make this work...

For the moment, I have a form that uses the following :

<form class="well span8 offset2">
                <div class="row">
                    <div class="span3">
                        <label>First Name</label>
                            <input type="text" class="span3" placeholder="First Name">
                        <label>Name</label>
                            <input type="text" class="span3" placeholder="Name">
                        <label>Company</label>
                            <input type="text" class="span3" placeholder="Company">
                        <label>Email</label>
                            <div class="input-prepend">
                            <span class="add-on"><i class="icon-envelope"></i></span><input type="text" id="inputIcon" class="span2" style="width:177px" placeholder="Email">
                            </div>
                    </div>
                    <div class="span5">
                        <label>Message</label>
                        <textarea name="message" id="message" class="input-xlarge span5" rows="11"></textarea>
                    </div>
                </div>
                <button type="submit" class="btn btn-bcome pull-right">Send</button>
            </form>

The form looks great but now I do not know how I can make sure that following happens :

  • Form checks if first name, name, mail and message are filled in.
  • Form shows a message if not.
  • Form sends the mail to my mail address when checks are ok.
  • Form shows message to user that mail has been sent.

I have found following php code that might help me but I have absolutely no clue how to set this up: http://stackoverflow.com/questions/11868599/how-to-get-twitter-bootstrap-modals-to-stay-open-on-form-submit

All help is thus more than welcome!!!

Thanks in advance for your help and time! Kind regards,

Fred

asked 30 Dec '12, 17:13

_Fred_
1134
accept rate: 0%

edited 01 Jan '13, 19:10

seanf
12.2k31836


Twitter Bootstap itself is just HTML/CSS and some JavaScript. It is not designed to do any real work, but is meant to be a base for HTML. I personally use it a lot and am glad they provide it. You will have to learn PHP (Or whatever programming language you want) if you want to make it function as you wish, but a contact form is not that hard for a first project.

The first half,

  • Form checks if first name, name, mail and message are filled in.
  • Form shows a message if not.

Is best solved by JavaScript and PHP(or whatever), but can also be solved with just JavaScript or PHP. The difference is JavaScript runs in the clients browser and is immediate, it is likley what you are thinking when you think 'checks and tells me', PHP on the other-hand runs on the server, and requires a POST and full page refresh. You would code validation in both for redundancy and stability. JQuery is the JavaScript library which comes with Bootstrap and the one you should learn first if you are going to be coding with bootstrap. The JQuery Validation Plugin is the one you would want to use to code the warnings. PHP validation is more complex, and there are many libraries which solve the problem in various ways. In general the SMTP library will report errors if there are any and you could use them as a kind of validation.

The second half,

  • Form sends the mail to my mail address when checks are ok.
  • Form shows message to user that mail has been sent.

Would mostly be coded with PHP on the server. You would use incoming POST logic to read the form POST and save the info to variables. Than you would send the contents of those variables with the SMTP or sendmail methods. We have code examples for the e-mail sending logic.

This of course is only if you want to build the logic from scratch. There are a few code examples I was able to find which are designed to do this already. There is a good one on GitHub and searching for 'bootstrap contact form' shows a few other blogs/forums with examples. The link you provide is actually unrelated, it is a specific use case which is not required, but that developer wanted for one reason or another.

permanent link

answered 30 Dec '12, 18:02

johns ♦♦
5.3k212
accept rate: 23%

Hi Johns,

Thanks for your answer!

Based on the GitHub example you gave me, I was able to adapt my contact form but I still have some issues with the following :

  • When using "<?php echo $_SERVER['PHP_SELF']; ?>" in my action, it gives an error. Should I configure something to make this work?
  • When using action="contact.php", my mail is sent but my page does not refresh. Instead, it goes to "contact.php". What should I add to stay on the page?
  • Once the message is sent, I would like to show a confirmation that this has been done successfully. I see that there is an example in the github file but I cannot make it work. Also, I would prefer to use the "modal" options of Twitter Bootstrap. Any idea how I should do this?
  • My site is very basic and only the contact form uses php. What are the best practices for a good (security) setup? Should I use a php.ini or a .htaccess? What should I put in it?

Thanks for your help and time! Kind regards,

Fred

(31 Dec '12, 11:51) _Fred_

Hi Johns,

Small update on the third item in previous message :

I have managed to have the submit button acting as a "modal" with following code : <button href="#submit" role="button" button="" type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Envoyer</button>

Problem is that it does not combine this with the validation and sending of email. Purpose would be to only have the modal behavior if validation is ok and mail is sent.

Any idea how this could be achieved?

Thanks in advance for your help! Kind regards,

Fred

(31 Dec '12, 16:15) _Fred_

Hi Fred,

When using "<?php echo $_SERVER['PHP_SELF']; ?>" in my action, it gives an error. Should I configure something to make this work?

No, that should work with no problems. What's the error you get?

When using action="contact.php", my mail is sent but my page does not refresh. Instead, it goes to "contact.php". What should I add to stay on the page?

Add something like this to the end of your contact.php, changing the URL to whatever you need it to be:

<?php 
header("Location: http://yourdomain.com/yourform.php");
?>

Once the message is sent, I would like to show a confirmation that this has been done successfully. I see that there is an example in the github file but I cannot make it work.

That's the default behavior of the bootstrap-contact form available from Github.

In my own test, I broke the bootstrap-contact/index.php file into separate pieces (the form, and the PHP code that does the mailing), and included the "header("Location..." stuff as above, and the confirmation appeared when I was redirected to my form.

Also, I would prefer to use the "modal" options of Twitter Bootstrap. Any idea how I should do this? I have managed to have the submit button acting as a "modal" with following code : <button href="#submit" role="button" button="" type="submit" name="submit" id="submitButton" class="btn btn-bcome pull-right" data-toggle="modal">Envoyer</button> Problem is that it does not combine this with the validation and sending of email. Purpose would be to only have the modal behavior if validation is ok and mail is sent.

I'm not sure I understand what you're trying to achieve. Are you saying that you want to display a modal confirmation dialog after the form has been processed?

My site is very basic and only the contact form uses php. What are the best practices for a good (security) setup? Should I use a php.ini or a .htaccess? What should I put in it?

I can't think of anything to add to a php.ini or .htaccess that would improve the security of the bootstrap-contact form. You might want to find a way to add a CAPTCHA to the form to prevent automated submissions.

(31 Dec '12, 18:22) seanf

Hi Seanf,

Thanks for your clear answers!

The error I get with action="<?php echo $_SERVER['PHP_SELF']; ?>" is the following : In my adress bar I have mysite.com/%3C?php%20echo%20$_SERVER['PHP_SELF'];%20?%3E and as a message, I see on the page : Not Found The requested URL /< was not found on this server.

Regarding the modal, this is indeed what I would like to do :

  • Validate the form fields using jQuery
  • Submit the form if validation passes, using PHP as the processor
  • Show a message inside of a Bootstrap modal dialog that says the form has been emailed

I managed to make 1 and 2 working together or only the modal without validation and sending but I have not been able to figure a way to combine everything.

I suppose that I have to add something to the scripting part but I do not have the understanding for the moment to figure it out on my own... Any idea what I should do?

Note that my site is a static site and I only have html pages except one php file that is handling the form submission.

Thanks again for your precious input! Kind regards,

Fred

(01 Jan '13, 05:39) _Fred_

The error I get with action="<?php echo $_SERVER['PHP_SELF']; ?>" is the following : In my adress bar I have mysite.com/%3C?php%20echo%20$_SERVER['PHP_SELF'];%20?%3E and as a message, I see on the page : Not Found The requested URL /< was not found on this server.

That's happening because your contact form is a HTML file, eg "contact.html", instead of a PHP file, eg "contact.php". You can fix this either by renaming the form to "contact.php", or by configuring your app to process HTML files as PHP: Serving HTML Files as PHP Scripts

Regarding the modal, this is indeed what I would like to do :

  • Validate the form fields using jQuery
  • Submit the form if validation passes, using PHP as the processor
  • Show a message inside of a Bootstrap modal dialog that says the form has been emailed

I managed to make 1 and 2 working together or only the modal without validation and sending but I have not been able to figure a way to combine everything.

Here's a working example that does exactly what you've described, forked from the original bootstrap-contact: bootstrap-contact with modal confirmation

permanent link

answered 01 Jan '13, 12:17

seanf
12.2k31836
accept rate: 37%

Hi seanf,

Thanks for the extra info as for the example! Regarding the php error, I had created two separate files, one with the html code (called .html) and one with the php code (called php). I now understand that I can leave everything in the php file.
Regarding the html as php, there is something I do not understand : the reference to web 119, web120, etc is related to the server on which my webfaction is installed I suppose? If yes, mine is >120 and that would mean that I need to configure a php.ini file but the specific documentation for html as php says I should configure a .htaccess file. Is this correct?

Regarding the example, I still have an issue even if I use directly the php file (both contact.php and index.php). The red error message is directly shown on the screen and even if the fields are filled in correctly, the mail is not submitted. Any idea what could be the reason? Might this be related to the php version I am using? (5.4)

Thanks in advance for your help! Kind regards,

Fred

(01 Jan '13, 17:04) _Fred_

If yes, mine is >120 and that would mean that I need to configure a php.ini file but the specific documentation for html as php says I should configure a .htaccess file. Is this correct?

The php.ini vs .htaccess stuff is only for setting PHP configuration options. In this case, you're configuring Apache to handle a specific type of file in a certain way (ie, process HTML as PHP), so that's done via .htaccess regardless of the server that you're on.

Regarding the example, I still have an issue even if I use directly the php file (both contact.php and index.php). The red error message is directly shown on the screen and even if the fields are filled in correctly, the mail is not submitted. Any idea what could be the reason? Might this be related to the php version I am using? (5.4)

What's the error this time? Do you have a URL that I can use to see it happen?

(01 Jan '13, 17:34) seanf

Hi seanf, thanks for the update and the support!

Here is the link to test the form : test(.)hennequin(.)webfactional(.)com/bootstrap-contact-master/index.php

The modal I would like to use in the end is this one : http://twitter.github.com/bootstrap/javascript.html#modals

(01 Jan '13, 18:04) _Fred_

Regarding your error, I think you probably mis-placed the closing bracket for the block of code that begins with if(isset($_POST['submit'])) {. That's what is causing the $hasError variable to be set when the page is initially loaded.

Regarding the modal form that you want to use, that's what I used in the contact.php in my forked version of bootstrap-contact.

(01 Jan '13, 18:23) seanf

Hi seanf, Thanks for the extra info, I have finally found the missing } and additionally to this, my php environment had a strange behavior but that has been solved by creating a new web app.

One last thing to have it exactly how I would like to : I managed to implement your example of integrated modal but the one that I would like to use is the "static" modal that "pops up" in front of the window. I have place following code :

<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
                    <div id="submit" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Merci pour votre message</h3>
                      </div>
                      <div class="modal-body">
                        <p>Nous vous répondrons dans les plus bref délais…</p>
                      </div>
                      <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                      </div>
                    </div>
                <?php } ?>

But that does not seem to work as expected.
Neither does this one :

<?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
                    $('#submit').modal('show');
                <?php } ?>

Any idea?

Thanks again!

Fred

(02 Jan '13, 08:05) _Fred_

Again, the contact.php in my forked bootstrap-contact repo does exactly that, in lines 102 through 117. Copy that code, replace the text with yours, and you should have no problems.

Your examples don't work because:

  • The first example doesn't contain the javascript that shows the modal dialog.
  • The second example doesn't have the javascript wrapped in a <script> tag.

The correct javascript is in line 115 in my code.

(02 Jan '13, 10:10) seanf

Hi seanf,

My apologies! I was apparently not working on the latest or good version! Now, I managed to make this work perfectly! Seen my limited knowledge, this means that you helped me very well!!! :-)

Thanks again! Kind regards,

Fred

(02 Jan '13, 11:26) _Fred_

You're very welcome!

(02 Jan '13, 12:08) seanf
showing 5 of 8 show 3 more comments
Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×262
×3
×3

question asked: 30 Dec '12, 17:13

question was seen: 14,453 times

last updated: 02 Jan '13, 12:08

WEBFACTION
REACH US
SUPPORT
AFFILIATE PROGRAM
LEGAL
© COPYRIGHT 2003-2019 SWARMA LIMITED - WEBFACTION IS A SERVICE OF SWARMA LIMITED
REGISTERED IN ENGLAND AND WALES 5729350 - VAT REGISTRATION NUMBER 877397162
5TH FLOOR, THE OLD VINYL FACTORY, HAYES, UB3 1HA, UNITED KINGDOM