Can someone recommend a customizable contact form, please?

[__]

But you’re building this from scratch right?

Yup. You can see everything right here.

You shouldn’t need JS just to submit the form. To submit it without page reload, yes. Otherwise, no.

In the original, there’s a “depression” effect on the submit button (in Firefox), which we lost somehow in our custom version. I’m actually not sure where it was coming from in the first place.

Well, this all started out because I need to update a website and found that html and JS didn’t get things done anymore…

And, to clarify, about halfway through we discovered that the actual problem was that his (former) hosting company wouldn’t upgrade him from PHP 4.x, which is why nothing was working properly. After getting a new host, we decided to just continue with our custom form.

@Michael1961

Before, (I thought) it took me to a plain page that had message sent.

I think your original version did this. With our version, I assumed you’d just want to come back to the same page, with a “success” message. If you want a separate “success” page, or to submit the form without reloading the page at all, let me know and I’ll show you how to do that.

Also, what prevents a person from just sending email over and over again to troll?

If they are sufficiently motivated, nothing. This will be true no matter want. The contact form does prevent automated submissions by using:

• a token (every form has a unique code, so you cannot submit the form without first viewing it —this also requires a session cookie, which is something most bots won’t handle),
• a timer (submissions are rejected if they’re too fast (bots) or too slow (expired)), and
• a honeypot (a form which people looking at a real browser won’t see, but bots will see and fill out).

Preventing “real person” spam is something else. It will never be achieved with any certainty. The best approach there is to put the form behind a password-protected page. But, realistically, you can’t stop someone if they want it enough.

Before I got a message that something had expired. I assumed it was from one of the tokens or other built in anti-spam features which prevented someone from just submitting nonsense over and over.

I would suspect that this was a browser-based warning (modern browsers assume that re-sending a POST request in the history is probably unintended, so they show a warning and ask for confirmation). I couldn’t say without knowing what the actual message was. Our form checks if the token is expired, but does not show a message about it (expired forms are simply ignored).

I copied and pasted from the Gist in both Notepad++ and Dreamweaver with the same results.

I’m not sure what the problem might be, then. In the meantime, you can simply type “…” instead of “…” in that option. (This is avoiding the problem, not solving it: other unicode characters may still display incorrectly. But it might be “good enough,” in this case.)

[I don’t know which css rules] are specific for the two I mentioned.

Sorry, it’s this one:

.michael1961 input,.michael1961 select,.michael1961 textarea{ 
    box-sizing:border-box; 
    display:block; 
    height:1.8em; 
    width:100%; 
    max-width:20em; 
}

If you want them to be the full width of the form, regardless of size, remove the max-width rule.

As I said above, however, if the problem is that the form is too wide for the space you want to put it, then you should change the width of the form itself instead. The inputs are dynamically sized, so they will automatically scale with the form. » codepen

Is the button that displays the email list customizable with gradient color?

Seems to. (.michael1961 select is the selector you’re looking for.) Styling form elements is something of an “adventure,” however. Getting what you want, especially across browsers, is complicated.

[nixnerd]

In the original, there’s a “depression” effect on the submit button

Check this out.

Here is the tutorial.

No JS. Pure CSS. It MIGHT not have TOTAL x-browser support… but the biggest things you’ll probably lose are the shadow and the nice smooth transition… which you didn’t really have on the original anyway.

[__]

I copied and pasted from the Gist in both Notepad++ and Dreamweaver with the same results.

I’m not sure what the problem might be, then. In the meantime, you can simply type “…” instead of “…” in that option. (This is avoiding the problem, not solving it: other unicode characters may still display incorrectly. But it might be “good enough,” in this case.)

Strike that. When you tried in notepad++, did you double-check the encoding as I suggested (“Encoding”→”Encode as UTF-8 without BOM”)?

[Anonymous]

And, to clarify, about halfway through we discovered that the actual problem was that his (former) hosting company wouldn’t upgrade him from PHP 4.x, which is why nothing was working properly. After getting a new host, we decided to just continue with our custom form.

That’s right!! I don’t know how I left that nightmare out of the equation! Had it not been for @TheDoc suggesting Stabelhost and @chrisburton insisting I try to sign up with them after some initial difficulty doing so, I’d still be in a mess. Stablehost has been unbelievably helpful and their tools are great and easy to use. Again, many thanks to TheDoc and chrisburton!

Did the above issue cause you to tutor me on a new form when the original would have actually sufficed with perhaps a couple of additional safety measures included in the coding, had I had a modern php version on the server?

I would suspect that this was a browser-based warning (modern browsers assume that re-sending a POST request in the history is probably unintended…

That may be the case. I receive the following when trying to access an earlier version of the original using the the forward or back button:

Document expired:
As a security precaution, Firefox does not automatically re-request sensitive documents.
Click Try Again to re-request the document from the website.

I’m not sure what is doing this (I haven’t had time to look at the coding in that particular form yet). I wonder if a “Do not cache” code is doing it?

I tried adding a linear gradient to the .michael1961 select but it adds a gradient to the box, not the selector button. The style code is:

.cform input,.cform select,.cform textarea{ 
    box-sizing:border-box; 
    display:block; 
    height:1.8em; 
    width:100%; 
    max-width:20em; 
}

.cform select {
     border-radius:5px;
     background: -webkit-linear-gradient(#E7DEC6, #DFD0B1); 
     /* For Safari */
     background: -o-linear-gradient(#E7DEC6, #DFD0B1); 
     /* For Opera 11.1 to 12.0 */
     background: -moz-linear-gradient(#E7DEC6, #DFD0B1); 
     /* For Firefox 3.6 to 15 */
     bbackground: linear-gradient(#E7DEC6, #DFD0B1); 
     /* Standard syntax (must be last) */
}

I don’t think you understand what I am wanting to do with sizing the input boxes. Say I want to assign different widths to the “Your Name”, “Email Address”, “Send To”, “Message”, and “Anti-Spam” boxes, how can that be done? I’ve tried to assign individual values by using something like

.cform textarea{
width: 20em;
}

for example. but all or nothing changes instead of just one box.

I will want to have a separate “success” page and something which will prevent someone from going back to the page and submitting it again. I can have the form page open in a separate window or tab so users will still have access to the site if they want to continue browsing it. I want to get this styling and function stuff figured out first. Too much for a newcomer like me to process all at once.

Many Thanks!

[Anonymous]

Thank you Nix,

I was trying to locate that and couldn’t find it!

Best Regards.

[__]

`Document expired:
As a security precaution, Firefox does not automatically re-request sensitive documents.
Click Try Again to re-request the document from the website.`

Yes, that’s generated by the browser. It has nothing to do with our scripts.

When you request a new page, that request goes into your browser history. Normal GET requests don’t cause problems because they aren’t intended to make changes on the server, whereas POST requests (e.g., most form submissions) are. The browser knows that sending the POST again when “backing up” might cause some action to be taken twice (e.g., sending a duplicate message), so it doesn’t do it by default.

I tried adding a linear gradient to the .michael1961 select but it adds a gradient to the box, not the selector button.

As I said, styling form elements cross-browser can be tricky. You might start a new thread about this in the CSS forum (make sure to specify which browser(s) you are targeting, and make a codepen example instead of showing the PHP script).

I don’t think you understand what I am wanting to do with sizing the input boxes. Say I want to assign different widths to the “Your Name”, “Email Address”, “Send To”, “Message”, and “Anti-Spam” boxes, how can that be done? I’ve tried to assign individual values …

If you want to change the widths on an individual basis, you’ll need to target each one by name.

input[name=email]{ /*  styles only for email input  */ }

Also note, in your example above, you used the class name .cform, which was from your original script (our new contact form uses the class .michael1961).

I will want to have a separate “success” page and something which will prevent someone from going back to the page and submitting it again.

I’ll show you how to set that up, just let me know when you’re ready. It’s a minor change.

[Anonymous]

Regarding starting a new thread in the CSS forum: What do I need to leave out of the codepen (i.e. PHP script)?

If you want to change the widths on an individual basis, you’ll need to target each one by name.

input[name=email]{ /*  styles only for email input  */ }

I don’t see that in the Gist you created or in the form I’ve made from it.

Also note, in your example above, you used the class name .cform, which was from your original script (our new contact form uses the class .michael1961).

Yes, but does that effect the function? I renamed everything that was .michael1961 to .cform as the form is for business use, not personal use.

Did the fact that the server I was on before switching to Stablehost was only running php4.X cause you to tutor me on a new form? I would the original have actually sufficed with perhaps a couple of additional safety measures included in the coding, had I had a modern php version on the old server or was in not a secure form? Just curious if I potentially had you go to a lot of trouble, but am glad that I’ve learned from the tutorial what I have.

Best Regards.

[__]

Here’s an example of how to integrate the contact form into your index page. You’ll see it is very similar to the contactPage.php example. Shortly, we will make some minor changes, since you mentioned you want the form to submit to a different page.

[Anonymous]

Greetings Traq,

Wow, a lot of stuff there! Could you point out line by line what changes/adaptations you made please? If I go through it line by line myself, I am sure to get lost/confused. Besides I’ll learn better knowing how/why.

Many Thanks for All of this help you’ve been providing!!!

[__]

If you want to change the widths on an individual basis, you’ll need to target each one by name.
input[name=email]{ /* styles only for email input */ }

I don’t see that in the Gist you created or in the form I’ve made from it.

Nope, it wasn’t in the original gist (because until now, we were styling all of the text-ish input fields in the same way. If you want to style particular fields individually, you’ll need to add new rules with more specific selectors.

I renamed everything that was .michael1961 to .cform as the form is for business use, not personal use.

Ahh, I missed that. No, as long as you rename everything consistently, it’ll be fine. Sorry for the mixup.

Did the fact that the server I was on before switching to Stablehost was only running php4.X cause you to tutor me on a new form?

Well, the fact that it wasn’t working was a factor, but I didn’t really like some of the “features” that form had. I don’t remember specifically, but I think it would automatically upload files, and there were some other things that bothered me. (And, remember, we didn’t learn that your PHP was so outdated until midway through.) We probably would have been able to modify it, but since you liked the idea of learning, we went ahead and did it from scratch.

It’s not a problem at all. If I didn’t want to do it, I wouldn’t have. Besides the learning experience, we get a more cohesive script: modifying something we didn’t write is more likely to cause bugs, and so forth.

[__]

Could you point out line by line what changes/adaptations you made please? If I go through it line by line myself, I am sure to get lost/confused. Besides I’ll learn better knowing how/why.

There’s the few lines at the top that you can see right away. After that, the css is on line 965, and the form itself is on line 1106.

Many Thanks for All of this help you’ve been providing!!!

Again, you’re very welcome. : )

Later (probably this evening), I’ll show you the changes to make the form submit to a different page. Do you have a design for the page you want to use for that?

[Anonymous]

Greetings Traq,

That’s not much coding at all! Whew!!

I got it all in the page but am getting this:

Parse error: syntax error, unexpected ‘<‘ in /””/””/””/””/test/index.php on line 7

I fiddled around with it a bit and have identified it as a problem with the html on the page, but I don’t know what to remove, if anything, or what to do to fix it.

Best Regards.

[__]

Parse error: syntax error, unexpected ‘<’ in /””/””/””/””/test/index.php on line 7

Did you copy it straight from the gist? Did you change/ add anything to the file?
Line 7 is a comment (with no <)…

edit:
Did you remove the php comments? Is line 7 now the line with the doctype?

If so, make sure you didn’t accidentally cut out the closing PHP tag. The line with the doctype should look like:

?><!DOCTYPE html>

[Anonymous]

Greetings Traq,

Yep, I left the ?> off of <!DOCTYPE html>

Now I’m getting this:

Warning: include_once(“”/test/cform.php): failed to open stream: No such file or directory in /””/””/””/””/test/index.php on line 4

Warning: include_once(): Failed opening ‘””/test/cform.php’ for inclusion (include_path=’.:/opt/alt/php54/usr/share/pear:/opt/alt/php54/usr/share/php’) in /””/””/””/””/test/index.php on line 4

Fatal error: Class ‘cform’ not found in /””/””/””/””/test/index.php on line 5

The /””/’s are mine and not in the actual warning.

I know I’m getting the “directions” wrong, but don’t know where/why.

Best Regards.

[chrisburton]

@michael1961 You’re receiving those errors because the file path you’ve specified is not correct. Have you moved anything?

[Author]

Posts