Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other Can someone recommend a customizable contact form, please?

  • This topic is empty.
Viewing 15 posts - 91 through 105 (of 225 total)
  • Author
    Posts
  • #173536
    Anonymous
    Inactive

    Greetings un-traq-ed,

    Is your confusion just over how to achieve that styling? or did something else get mixed up?

    I just get stressed at times trying to learn something new and that produces a mental block. Yesterday was a bad day anyway as I had constant interruptions which aren’t conducive to concentrating. Today is a bit better, though not by much.

    I’ve managed to make a few changes and test the form before again becoming stressed/confused.

    Anyway, the form did work after entering a valid email for “Office 1” in the list. I did however receive the following error:

    Notice: Undefined property: contactMichael1961::$recipients in /home/wslmforg/public_html/form-test/class/contactMichael1961.php on line 506

    I attempted to add a radius to the “Select” text area, which worked, but now it looks recessed. Why?

    I tried to add a gradient to the button for the “Select” list but it didn’t work.

    Is there a way to get the Submit button to animate on submitting like on the concept form without using JS? I really like that function.

    The “focus” wasn’t functioning which caused me confusion, but I saw that the “#” was missing from the color code in your Gist. Not being able to identify what is shading the “Select” button and what is causing the recessed appearance since I added the radius caused my present mental block.

    The changes I made to the Styles is here.

    Also, there is a <meta charset=utf-8> in the header of contactPage.php. I thought it needed quotations <meta charset=”UTF-8″> but it still shows the diamond with the question mark. Link.

    I try my best to make changes myself before looking at your Gist. I’ve not worked with CSS styling for a number of weeks now and what I previously learned is foggy. Also, being green to all of this makes it a bit difficult to read someone else’s coding. Sort of like designing one’s own home and knowing where the rooms are when first walking in.

    Best Regards.

    #173571
    __
    Participant

    Notice: Undefined property: contactMichael1961::$recipients

    The property in our class is $_recipients (note the underscore).

    Is there a way to get the Submit button to animate on submitting like on the concept form without using JS?

    I don’t see any animation on the submit button (I submitted it a few times; it behaved like a normal button) …?

    I saw that the “#” was missing from the color code …

    Yep, you need that.

    there is a <meta charset=utf-8> in the header of contactPage.php

    That’s the HTML <head>.* You need to set the same info in the HTTP headers (browsers almost always ignore the charset in a meta tag when there is an HTTP header of the same name).

    * This is particularly confusing: people use the word “header” to describe many things on a webpage, and most of those uses are misleading. HTTP headers are sent at the top of an HTTP response by the server. They are before anything (HTML, etc.) that you output, and they are read, but not displayed, by the browser. They define things about the http connection, encoding, compression methods, content-type, content-length, etc.. Many web coders aren’t particularly aware they even exist, but they do very important things.

    In this case, I do see the correct HTTP header now. We’ll probably need to fix the “�” manually: if you originally saved the PHP script with the wrong character encoding, it would still cause this problem. What program are you using to edit your PHP scripts?

    I attempted to add a radius to the “Select” text area, which worked, but now it looks recessed.

    We forgot to add border-color: #7d766c;, so the border was an odd color. Fixed.

    Do you use browser tools to help you with CSS? Most modern browsers have pretty good developer tools (I use Chrome, mainly), which can show you -and let you edit- the CSS rules that affect the styling of particular elements. In most browsers, you can press [F12] or [right click on desired element] → “Inspect Element”.

    I try my best to make changes myself before looking at your Gist.

    It’s great to try things on your own. Just don’t get too lost, and make sure you keep a backup of your last few “good” versions. However, don’t be afraid to “look.” It’s not cheating. Being able to find, understand, and use reference material is a key programming skill.

    #173713
    Anonymous
    Inactive

    Greetings un-traq-ed,

    I’m still toying with the coding to try to understand what causes what. I’m also trying to understand/become reacquainted with the styling.

    I don’t understand, if meta utf-8 doesn’t work, why sites (including this one) use it?

    I’ve attempted to add <? header(‘Content-Type: text/html; charset=utf-8’); ?> to the form but get errors.

    The button on the concept page “toggles” when selected, the one on the tutorial page is fixed when selected. I like the “animation/toggle” of the concept.

    I was referring to the “Send To:” text area looking recessed, not the “Submit” button. Also, how do I add the same gradient to the selector button here as I did to the submit button?

    The button on this page becomes “active” if you click on it. I’d like that same action on the tutorial page.

    I’m not sure what you mean by

    The property in our class is $_recipients (note the underscore).

    In reference to my receiving the error

    Notice: Undefined property: contactMichael1961::$recipients in /home/wslmforg/public_html/form-test/class/contactMichael1961.php on line 506

    I see this

    $this-&gt;_to = $this-&gt;recipients[$value];
    return true;
    }
    

    Is it to be

    $this-&gt;_to = $this-&gt;_recipients[$value];
    return true;
    }
    

    Best Regards.

    #173764
    __
    Participant

    I don’t understand, if meta utf-8 doesn’t work, why sites (including this one) use it?

    Well, it works, it’s just that, giv en the choice, browsers will trust the HTTP header over the meta tag (the idea being that the server knows better than the author of the HTML, which may or may not be sensible). Browsers used to pay more attention to it. Different browsers have different rules for how they use it; I’m not familiar with the details. In practice, it’s not much more than a last-ditch “fallback” in case the actual HTTP header is missing, but it’s still best practice to include it.

    I’ve attempted to add <? header(‘Content-Type: text/html; charset=utf-8′); ?> to the form but get errors.

    What is the error? If it is “headers already sent”, put this closer to the top of your script (it must go before any output (e.g., HTML markup) you send to the browser.

    The button on the concept page “toggles” when selected, the one on the tutorial page is fixed when selected. I like the “animation/toggle” of the concept.

    You’re using Firefox, I guess (I was using Chrome, and I see absolutely no difference in behavior between the two Submit buttons). I actually don’t know what is causing that “press” effect on your original form.

    I see this $this->_to = $this->recipients[$value];
    Is it to be
    $this->_to = $this->_recipients[$value];

    Yup. I missed that. I’ll fix it.

    I was referring to the “Send To:” text area looking recessed, not the “Submit” button. Also, how do I add the same gradient to the selector button here as I did to the submit button?

    This is another thing that happens in Firefox (not as much in Chrome), so sorry for the misunderstanding. If you remove the border-radius from the select, it displays more as expected.

    edit

    Are you still having trouble with the “” characters? If so, let me know what program you use to edit your scripts and we can make sure they are being saved with the correct encoding. As I mentioned in my last post, your HTTP headers are now correctly specifying the utf-8 charset.

    #173797
    Anonymous
    Inactive

    The form sends email but shows form again with the message sent notice above.

    The form can be accessed again by using back button where before a notice was given of expiry.

    The characters still aren’t displaying correctly in the select box (still a diamond with a question mark) I generally use Notepad++ or Dreamweaver to edit.

    Test it by selecting the “general inquiry/comment”.

    I wonder if it looks the same in IE? I’ve an older version and it doesn’t display right at all. I’ve no interest in supporting older versions of IE.

    How can I assign different widths to the spam question and the message boxes?

    Thanks!

    #173799
    __
    Participant

    The form sends email but shows form again with the message sent notice above.

    What do you want to happen?

    The form can be accessed again by using back button where before a notice was given of expiry.

    You mean, after you submit it, correct? That’s to be expected, since it is in the browser history. If you don’t want this, you could use AJAX to submit the form, thereby avoiding a new page load and history item.

    I’m not sure what you mean by “notice of expiry.” Are you talking about Firefox warning you that you had previously submitted the form?

    The characters still aren’t displaying correctly in the select box … I generally use Notepad++ or Dreamweaver to edit.

    In notepad++:

    • make sure that characters display correctly in the editor (e.g., copy+paste the correct character from the gist)
    • in the “Encoding” menu, make sure “Encode as UTF-8 without BOM” is selected.
    • save the file.

    I’m not sure how to make DreamWeaver behave.

    I wonder if it looks the same in IE?

    Off the top of my head, IE<10 doesn’t support the HTML5 form validation rules, and some of the CSS we’re using is not supported by older IE versions (though that should fail gracefully – unsupported styles will just fall back on their defaults).

    If you want to know, you have to test. : ) You might try a service like BrowserStack. What is the oldest version of IE you wish to support?

    How can I assign different widths to the spam question and the message boxes?

    In the CSS. If you’re just trying to fit the form into your design, however, keep in mind that their widths are responsive based on the width of the overall form. Just change the width (and/or max/min-width) on .michael1961.

    #173801
    Anonymous
    Inactive

    What do you want to happen?

    Before, (I thought) it took me to a plain page that had message sent. As I hope to include the form within a page, having the form display again, on or off the page, could be confusing. Also, what prevents a person from just sending email over and over again to troll?

    You mean, after you submit it, correct? That’s to be expected, since it is in the browser history. If you don’t want this, you could use AJAX to submit the form, thereby avoiding a new page load and history item.

    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 copied and pasted from the Gist in both Notepad++ and Dreamweaver with the same results.

    How can I assign different widths to the spam question and the message boxes?
    In the CSS.

    Yes, I knew that but not which ones are specific for the two I mentioned. I’ve tried adding widths to a couple of them but nothing changes.

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

    Best Regards.

    #173917
    nixnerd
    Participant

    Hey, I see this thread updated everyday. I’m going to assume you decided to build your own contact form from scratch?

    #173918
    Paulie_D
    Member

    Not sure, I haven’t been following it that closely, but I would say that the level of support that @Traq has been giving is a fine example of this..ahem, community’s spirit.

    #173919
    Paulie_D
    Member

    Not sure, I haven’t been following it that closely, but I would say that the level of support that @Traq has been giving is a fine example of this..ahem, community’s spirit.

    #173921
    nixnerd
    Participant

    No doubt. Look at his comment to post ratio. It’s absurd. The guy never asks for help, yet helps everybody.

    Hey OP, can you give us a little info on what route you’re pursuing so we don’t have to sift through 100 comments? :) Well, 101 now.

    #173925
    Anonymous
    Inactive

    Greetings *NIX,

    Well, this all started out because I need to update a website and found that html and JS didn’t get things done anymore, so I came here to learn how to implement CSS which lead to PHP. I’m still VERY green with it all and haven’t touched the CSS in the pages that were created before we got of on this tutorial. This started out with this form and I was told it had serious security, and other issues. I do like the look so Traq was too kind to provide this tutorial to help me understand and implement this into a contact form I can use on the new site, if I ever get it finished. I struggled with a page for awhile yesterday which had two divs within a <section> and I could not get one div which was 370px to float left of the other. I finally realized that the <section> had a width value of 330px! Once I set that to auto everything fell into place. It’s stupid mistakes like that that I make and being new to this doesn’t help. If it weren’t for Traq, Paulie_D, paulob, Doc, chrisburton, and others, I’d have never figured this stuff out on my own. I can read a technical manual all day, but get far more out of it by being shown and having it explained why “X” causes “Y” and so forth.

    I’m getting closer to understanding things a bit more and even after the form and site are finished, I’ll still be hanging out here to learn more and hopefully be able to help others as I’ve been helped.

    Best Regards.

    #173927
    nixnerd
    Participant

    Right on. Sounds good. So you’re obviously building this form with HTML + CSS + PHP with no JS right? Are you scratch coding it or are you simply modifying the other form’s code?

    #173933
    Anonymous
    Inactive

    No, there isn’t any JS so far. I say so far because there is an issue that the submit button does not depress on the working version, like it does on the original, when viewed with Firefox and I don’t know if it works in IE either. It does work with Chrome however. I don’t recall if the function in the original is a product of JS or not. I will take a look at it and hopefully figure out how to integrate it, or whatever causes it to work in Firefox, into the working version.

    There are a few minor styling issues that I hope to get worked out, but being new to all of this I get lost going back and forth from the original form to the working version.

    Best Regards.

    #173953
    nixnerd
    Participant

    But you’re building this from scratch right? I have a nice form tutorial in a book I own. I could give you some pointers from it. The only thing i dont like is that it teaches you to use inline styles.

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

Viewing 15 posts - 91 through 105 (of 225 total)
  • The forum ‘Other’ is closed to new topics and replies.