Can someone recommend a customizable contact form, please? - CSS-Tricks - Page 9

This topic is empty.

Viewing 15 posts - 121 through 135 (of 225 total)

← 1 2 3 … 8 9 10 … 13 14 15 →

Author

Posts
July 2, 2014 at 12:08 am #174317

Anonymous
Inactive

Greetings Chris,

No, everything is where it was when the form was displaying in the original page, but with the errors above the form in the div.

I think I’ll go back and start over again. I’ll show you what I mean in a short while.

Best Regards.

July 2, 2014 at 12:11 am #174318
__
Participant
Well, this is the same problem we’ve been having with include. I looked at your index page, and for your security I won’t share the actual paths the error message shows, but allow me to explain:
```
Warning: include_once(**c**/**d**/class/cform.php): failed to open stream: No such file or directory in /**a**/**b**/public_html/**c**/**d**/index.php
```
This tells us that when this script runs, it runs “inside” the /**a**/**b**/public_html/**c**/**d** directory. (This is an absolute filesystem path.) This is called the current working directory.

It also indicates you’re trying to include **c**/**d**/class/cform.php (this is a relative filesystem path).

When that relative path is resolved, relative to the current working directory, you get this:
```
/**a**/**b**/public_html/**c**/**d**/**c**/**d**/class/cform.php
```
…which is probably not correct. Notice how the **c**/**d** portion of the path is repeated? You have two options to correct this:

1) Correct the relative filesystem path:
```
"class/cform.php"
```
2) Use an absolute filesystem path:
```
"/**a**/**b**/public_html/**c**/**d**/class/cform.php"
     ( or )
"{$_SERVER['DOCUMENT_ROOT']}/**c**/**d**/class/cform.php"
```
Just remember: a relative path is resolved in relation to your current working directory. Absolute paths are often less confusing.
July 2, 2014 at 12:45 am #174319
Anonymous
Inactive
Greetings Traq,

Here is what I included in the page:
```
&lt;?php

session_start();
include_once "/class/cform.php";
$contactForm = new cform( $_POST );

?&gt;&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
```
and
```
&lt;?= $contactForm-&gt;cssStyle(); ?&gt;
```
and
```
 &lt;?= $contactForm-&gt;htmlMarkup(); ?&gt;
```
I’m still getting the same errors.

Is it dangerous to include the absolute paths for this, and if so, why? Does it have to do with code injecting by a 3rd party? How does that work?

Best Regards.
July 2, 2014 at 1:25 am #174321
__
Participant
"/class/cform.php"

Alright, this is an absolute path. The leading / means “starting from the filesystem root.” This path is not even in your web directory (/class most likely doesn’t exist; even if it did for some reason, PHP probably would not have permissions to access it).

Try this instead:
```
"class/cform.php"
```
or
```
"./class/cform.php"
```
These paths are relative to your CWD, which is (I believe) what you want. If not, try the (correct) absolute path instead:
```
// (From what I understand, "test/class/cform.php" is correct)
"{$_SERVER['DOCUMENT_ROOT']}/test/class/cform.php"
```
Is it dangerous to include the absolute paths for this

Not at all.

The danger we discussed in your other thread had to do with including files over the internet (potentially from servers you do not control and/or trust) rather than from the local server.

Does it have to do with code injecting by a 3rd party? How does that work?

Code injection is all about trusting data when you shouldn’t. If a user gives you data, do not blindly trust it. Make sure it is what you expected them to give you, and that it is safe to use for whatever you want to use it for.

In this specific case (hard-coding a filesystem path), we are not using untrusted data at all, so there is nothing to worry about.
July 2, 2014 at 2:18 am #174323

Anonymous
Inactive

I’m still not getting it. I tried the variations you gave and even tried a direct path i.e. http://www.wslmf.org/new/test/class/cform.php and nothing except a notice about a wrapper.

I’m getting the following, and then some:

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

We are trying to direct this to the class php, yes and not that which is the contactPage.php on your Gist, right? In any event, I’ve tried both with nearly the same errors.

I have a question related to the including absolute paths. If someone had the directories that I’m taking out and replacing with /””/ would there be any danger?

Best Regards.

July 2, 2014 at 2:29 am #174324
Anonymous
Inactive
Greetings Traq,

Well, FINALLY!!!!! I got it with
```
include_once "{$_SERVER['DOCUMENT_ROOT']}/new/test/class/cform.php";
```
However, the form is resized down.

Pleased I FINALLY got it! Duh, took me long enough.

Best Regards.
July 2, 2014 at 10:54 am #174377
__
Participant
Pleased I FINALLY got it!

Awesome.

I tried the variations you gave and even tried a direct path i.e. http://www.wslmf.org/new/test/class/cform.php

Again, do not use URLs with include. There’s the risk we discussed, and (in this case) it would not have worked correctly anyway. Always use filesystem paths.

However, the form is resized down.

That’s because you have resized the body font size (to 81.2%). You can change the form’s font rule to 1.23em to get it back to its (approximate) original size.
```
.cform{
    font: bold 1.23em/1.2 arial,sans-serif;
}
```
July 2, 2014 at 11:10 am #174378

Anonymous
Inactive

Greetings Traq,

I couldn’t see what it was. I was looking for a padding or margin issue. Thanks!!

I will be away for the next few days, so I look forward to continuing this upon my return.

BTW, the “success” page for once the form is sent only needs to be a plain white page with message centered.

O have several other questions written down, but will ask when I return,

Many thanks and have a great remainder of the week and weekend!

July 8, 2014 at 6:37 am #174986

Anonymous
Inactive

Greetings Traq,

I’ve managed to get the form placed on the page and have refined the style a bit so that it fits the height/width of the div it is in. There are issues that I will inquire about in another thread later on.

I am having trouble getting the various boxes to separate so I can assign individual widths to them. For example, the message box which I believe to be .cform textarea{ I tried to add the styles from .cform input,.cform select,.cform textarea{ and remove the .cform textarea from there and put it in the .cform textarea{ that has a height assigned only. I increased the width and everything on the form went crazy. Perhaps the “Required Field” text is the cause? If the Message box can’t be sized up, maybe the other fields i.e. .cform input,.cform select can be sized down?

Additionally, I don’t want the message box to be resizable using the little grab object in the lower right corner. All I want is that a scroll bar appears after an overflow of text, as occurs now. Resizing the message box causes the entire form to expand outside of the page. In any event, I don’t see it useful or necessary.

Best Regards.

July 8, 2014 at 9:44 am #175000

__
Participant

I am having trouble getting the various boxes to separate so I can assign individual widths to them. For example, the message box which I believe to be .cform textarea{ I tried to add the styles from .cform input,.cform select,.cform textarea{ and remove the .cform textarea from there and put it in the .cform textarea{ that has a height assigned only…

Rather than trying to remove existing rules, I would suggest adding your own rules below the existing rules (thus overriding them) —at least, during development. This makes unexpected changes much less likely, and also makes it easy to revert to a “working” version if something goes wrong.

I increased the width and everything on the form went crazy. Perhaps the “Required Field” text is the cause?

Nope. If you increase the width of the textarea, it increases the width of the fieldset that contains it. All of the input fields are sized at 100%, so they will automatically resize with their container. This is part of what makes the form “responsive.” I had imagined (from looking at your original example) that you had wanted all of the fields to have a uniform width. If you don’t, you’ll need to adjust the width on all of the inputs.

I would recommend playing around with the styling in your browser’s dev tools. Once things look like you want them to, you can look at which settings you need and transfer them into the stylesheet.

Additionally, I don’t want the message box to be resizable using the little grab object in the lower right corner …In any event, I don’t see it useful or necessary.

You can use resize:none; on the textarea. For some browsers, you might need to use overflow:auto; as well.

However, I would recommend against this. It is a user convenience. In general, you should leave such things to the user and not try to impose yourself on them.

In any case, it is not something that will happen unless the user purposefully tries to do it. For example, I often resize textareas when I am typing long responses, and I find it very frustrating when a website makes that difficult to do.

July 10, 2014 at 2:46 am #175129

Anonymous
Inactive

Greetings Traq,

I’ve made some progress thanks to your suggestions.

It appears that the name, address, and anti-spam question are all tied to the “input” style and can’t be independently resized. Do these have to have their own names because I am sure it will affect the protected portions of the code and that is an obvious concern. I’m specifically interested in setting the anti-spam question box to a smaller with than the others.

I see a potential problem with the answers to the anti-spam question, specifically anyone answering with a non-numeric answer e.g., One instead of 1. Can variations to answers be included, and if so how?

Also, I’ve tried to add a z-index to the form so it stays above the page when the message box is manually resized, but it didn’t work. Where would a z-index need to be for this to work, or is there another option?

Best Regards.

July 10, 2014 at 10:06 am #175157
__
Participant
It appears that the name, address, and anti-spam question are all tied to the “input” style and can’t be independently resized. Do these have to have their own names because I am sure it will affect the protected portions of the code and that is an obvious concern.

They each have names, and for simplicity’s sake they should all keep the names they currently have.

You can target them independently using their names, for example:
```
input[name=spam]{ 
    /* rules here affect only the anti-spam text input */ 
}
```
I see a potential problem with the answers to the anti-spam question, specifically anyone answering with a non-numeric answer e.g., One instead of 1. Can variations to answers be included, and if so how?

That’s one of the drawbacks to approaches like this: you risk rejecting answers that are logically correct, but not entered exactly as you expected.

We can modify the code to allow multiple “correct” responses for each question. I’ll see if I have time to do this later today.

Also, I’ve tried to add a z-index to the form so it stays above the page …

z-index is another css topic that is constantly misunderstood. It is very frustrating and unpredictable if you don’t have a good understanding of how it works (but once you “get it,” the way it is implemented suddenly makes a lot of sense and becomes very useful).

In this case, remember that it will be ignored if the element has static positioning (which is the default). Add position:relative to the form.
July 11, 2014 at 1:29 am #175187
Anonymous
Inactive
I don’t see
```
input[name=spam]{ 
    /* rules here affect only the anti-spam text input */ 
}
```
anywhere in the coding. The closest I see is.cform .antispam{, but if I assign a width to it, the required field area slides to the left.

….remember that it will be ignored if the element has static positioning (which is the default). Add position:relative to the form.

Yep, that was the problem. I was forgetting to add position:relative along with the z-index. The form flows over the page now if the message area is resized.

Many Thanks!!
July 11, 2014 at 10:41 pm #175261

__
Participant

I don’t see input[name=spam] anywhere in the coding

No, it’s not there. You’d have to add it. Put it after the existing css rules.

July 11, 2014 at 11:48 pm #175273

Anonymous
Inactive

Ah, OK.

Well I added that and got the anti-spam box close to where I want it for now.

My only other styling “issue” is to try to get the select button to have a linear gradient. I’ve posted this in another thread, so we will see. I’ve Goggled it to death and all past fixes for this (Firefox) appear to no longer work since the latest Firefox update. Sucks!

Anyway, on to more important things. I am ready for the other tutorials for the success page and how to modify the code to allow multiple “correct” responses for each anti-spam question, when you have time.

I’ve learned a lot from this and deeply appreciate it. I still have questions but will save them for the end.
Author

Posts

Viewing 15 posts - 121 through 135 (of 225 total)

← 1 2 3 … 8 9 10 … 13 14 15 →

The forum ‘Other’ is closed to new topics and replies.