How to Build a Responsive Website From Start to Finish - Contact Form - part 21

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ธ.ค. 2024

ความคิดเห็น • 130

  • @Azdak
    @Azdak 8 ปีที่แล้ว +4

    It's refreshing to see a web design tutorial series on TH-cam that actually features good design. Thanks for these

  • @zb4885
    @zb4885 8 ปีที่แล้ว +8

    wow... I have just spent a day and a half trying to use php instead!! I can always rely on you to find a solution to a problem! :)

    • @andreasschabort2449
      @andreasschabort2449 7 ปีที่แล้ว

      +D haha me too

    • @ivemcfallen4403
      @ivemcfallen4403 6 ปีที่แล้ว

      Zara Burke Same. But instead of using the exact copy of his css I used my own and it was perfect!

  • @dondeleva7302
    @dondeleva7302 7 ปีที่แล้ว

    You are all the awesome !!! Thank you for all the work you put into teaching us T-man!

  • @GustavoStelczyk
    @GustavoStelczyk 8 ปีที่แล้ว +2

    Thank you! I was looking everywhere for a free contact form solution for a static site.

  • @mariotragaglia5857
    @mariotragaglia5857 10 ปีที่แล้ว +1

    Great video! that form brace is awesome, i didn't know about it :P
    Which jekyll version are you using?

  • @lungualexandru202
    @lungualexandru202 10 ปีที่แล้ว

    Beautiful series! I wonder what will be in the next series !

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Thanks so much for watching Lungu!! Working on the next few videos now...

  • @jordihoven2349
    @jordihoven2349 6 ปีที่แล้ว

    Thank you so much for this awesome tool! Exactly what I was looking for!

  • @bendyamin86
    @bendyamin86 10 ปีที่แล้ว +2

    Is there a way to ajax in that confirmation page? I'd like it so that a new page doesn't load...

  • @jagaso8829
    @jagaso8829 8 ปีที่แล้ว +5

    Do you have a solution so Formspree doesn't open a new window confirming the message have been sent, but instead just refreshes the current window or something?

    • @seelyw.4818
      @seelyw.4818 6 ปีที่แล้ว

      "By default, after submitting a form the user is shown the Formspree "Thank You" page. You can provide an alternative URL for that page.
      "

  • @Nirvana11b
    @Nirvana11b 10 ปีที่แล้ว

    Thanks so much for posting this I've been having a hard time with my form. Thanks again!

  • @BryceStradling
    @BryceStradling 10 ปีที่แล้ว

    I noticed you embed your input inside your label tag. I've never done it that way, I've always used the for="name" method. Is there a difference in functionality or does just help your organization. Great stuff, thanks!

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      Either is valid. you can be flexible with it. stackoverflow.com/questions/774054/should-i-put-input-tag-inside-label-tag

  • @TheMagnas26
    @TheMagnas26 10 ปีที่แล้ว +1

    Hi! I have been following this series all along and, I must say congratulation! Thank you for all that effort.
    I tried to use the brace form, but got an negative response :" Brace Forms has been open-sourced, and will be shutting down soon, so we are not allowing new forms to be confirmed."
    Do you happen to know any alternatives to still make forms? Necessary to go the php route or other server programming language? thank you!

  • @SuperDvco
    @SuperDvco 10 ปีที่แล้ว

    another good video!
    thanks!
    have you made any video explaining more about bourbon?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      yes! th-cam.com/video/8ItNE_DX6Cc/w-d-xo.html

    • @SuperDvco
      @SuperDvco 10 ปีที่แล้ว

      thanks!

  • @danielmobbs5096
    @danielmobbs5096 8 ปีที่แล้ว

    hey dude, you helped me out a lot with this vid, thanks again.

  • @michaelrussell738
    @michaelrussell738 9 ปีที่แล้ว

    Hey there buddy!!! Very nice form Travis!

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      Michael Russell Thank you sir!

    • @michaelrussell738
      @michaelrussell738 9 ปีที่แล้ว

      that site is so handy. the only draw back is the open source version doesnt have the return to site link anymore on completion

    • @michaelrussell738
      @michaelrussell738 9 ปีที่แล้ว

      DevTips they actually allow a nice add on that lets you specify an automatic redirect link instead of the return to homepage button which is cool.
      Another thing I noticed though is if you are building a site for a client and testing the forms with your email, you need to verify the email for each page the form is on and also when you change the email address to the clients

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      Good notes. Thanks!

  • @reuvenkarasik1
    @reuvenkarasik1 10 ปีที่แล้ว

    Hey, have you got any idea for "some other things"? I mean, other awesome series to do? Cause I'm really upset about the ending of this series...

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      What is upsetting about it?

    • @reuvenkarasik1
      @reuvenkarasik1 10 ปีที่แล้ว

      DevTips Maybe I described myself wrong - English is not my native tongue - I meant, I'm really upset about the fact that this series is ending. I wish you'll make more in the future, otherwise I won't have anything interesting to watch every week (TV Shows here are not that good :P )

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Ohhh! Well that's nice to hear. I'll still make more videos, but this series is closing. However, we will revisit this code base to show other ideas and such.

  • @joedyer1989
    @joedyer1989 10 ปีที่แล้ว

    Yo Billy Zaine, I was wondering, does that brace form have some simple validation to it?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      No, brace just handle the delivery, but you can put some simple js validation on it before the form is sent..

    • @joedyer1989
      @joedyer1989 10 ปีที่แล้ว

      Ah ok. I've tried using PHPMailer but haven't had much luck with it! Hopefully Brace can be a quick temporary fix. PHP forms seem easy but are difficult to tame!

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      heard you there.

  • @slicerabbit6166
    @slicerabbit6166 10 ปีที่แล้ว

    Just tried out the Brace form. Running it on my local Mac (not "localhost:xxxx"), I using Jekyll, and when I submit I get an error message from my web browser saying "No files exist at the address '/myemail@gmail.com'."

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Hmmm. I know that Brace just got bought by another company. I'm not sure what that means, maybe you are having an issue because of that?

    • @slicerabbit6166
      @slicerabbit6166 10 ปีที่แล้ว

      DevTips Just tried out the form on Braceforms' website, and it worked. Seems to me the website has to be on either localhost or up and running

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      oh, yes! that's right. thats it.

    • @slicerabbit6166
      @slicerabbit6166 10 ปีที่แล้ว +1

      DevTips Good talk, buddy! Loving your videos!

  • @kokuadigital2060
    @kokuadigital2060 7 ปีที่แล้ว

    Perfect! Thank you so mutch

  • @OfficialDevTips
    @OfficialDevTips  10 ปีที่แล้ว

    sangam chouchan I think there are some alternates mentioned in the comments of this video.

  • @XxGamersUnitedxX
    @XxGamersUnitedxX 10 ปีที่แล้ว

    Does the website have to be up and running for it to work? I'm building a website to replicate this (PC not Mac, also not using Jekyll), and when I hit submit it just says "This webpage is not found". Also when I try to create the form on the Brace.io site, it says "email not formatted correctly".
    When I add "http:" before "/forms.brace.io/myemail.com" the error is then" "Unable to submit form. Make sure your form is running on a proper server. For geeks: could not find the "Referrer" header."
    :(

    • @XxGamersUnitedxX
      @XxGamersUnitedxX 10 ปีที่แล้ว

      I'm going to look really dumb if the website has to be up for the forum to work. I just thought maybe it didn't since the series isn't finished, so your version isn't online either.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      XxGamersUnitedxX It works locally, but the thing about Jekyll is that it created a simple server for your local site. That is probably your issue, try using a simple http server: www.linuxjournal.com/content/tech-tip-really-simple-http-server-python

    • @XxGamersUnitedxX
      @XxGamersUnitedxX 10 ปีที่แล้ว

      I'll try it out, thank's for the quick response! I'll let you know what I come up with once my portfolio is online! :D

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      awesome!

  • @HappySoundBoi
    @HappySoundBoi 9 ปีที่แล้ว

    hey there Dev like ur tips i would like to know abt the connection to backend or databease for this website

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      adarsh goswami Its a Jekyll site. No database.

  • @LedZeppelinH
    @LedZeppelinH 10 ปีที่แล้ว

    Do you need to be using GitHub/Jekyll for this to work? Its not working for me (sorry for silly question, im new to this lol)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      no, you can run jekyll locally and then grab the _site folder generated by jekyll and upload that to any server you like.

  • @HappySoundBoi
    @HappySoundBoi 9 ปีที่แล้ว

    for this portfolio site if i want a database and i add up more fields like registration forms and other a g-map for location and i need the users data to be saved always in my database how do i connect with this portfpolio site any ssuggestions please i need to do that|| :\

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      adarsh goswami This is a jekyll site. No database. Try researching wordpress

  • @jerryrodriguez6151
    @jerryrodriguez6151 10 ปีที่แล้ว

    What do you film on?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Nikon d5200 and an iMac

    • @jerryrodriguez6151
      @jerryrodriguez6151 10 ปีที่แล้ว

      awesome, thanks for the reply. Keep up the good work and thanks for creating this tutorial series.

  • @matthewvaccaro3013
    @matthewvaccaro3013 10 ปีที่แล้ว

    Hey man, tired making this work and it just sends me an error message saying that said the page doesn't exists...Im going to sound like a huge noob, but how do you get the website to run from your local disk?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Hi. Were you able to catch this video here? It explains this, i think. Let me know if you are still mixed up after watching it :)
      th-cam.com/video/iWowJBRMtpc/w-d-xo.html

    • @matthewvaccaro3013
      @matthewvaccaro3013 10 ปีที่แล้ว

      Thanks man I'll give it a look. I guess I needed xampp. Hopefully after all that is good to go I will be on my way haha.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      well jekyll sets up a local server. If you are using jekyll no need for xampp

  • @panzeralienofficial
    @panzeralienofficial 7 ปีที่แล้ว +1

    Thank your for this.

  • @chrisdizzle313
    @chrisdizzle313 10 ปีที่แล้ว

    I can see how forms.braces.io works well with Jekyll since it essentially "masks" the email by using the file path for the template but what if ur not using Jekyll and have to put your email directly in code. Would that cause a problem with revealing your email to potential users you don't want? I read somewhere that it might cause spam related issues and what not. Thoughts?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Sorry for not getting back to you sooner Chris. TH-cam thought your comment was spam, maybe because there was a url in it...
      But to your question: Jekyll does not actually mask your email because in the end it just renders static vanilla html. You use that html to display your site. So the email is not hidden.
      Now, I'm not really concerned about people emailing me, or spamming me. I have a spam filter. If you scroll up from the form you can see that I printed the email in huge print right above the form anyway. :) So its not really an issue for me personally. But this may not be the best solution for someone who is.
      This person came up with a method that posts the form to a google doc, which may be a bit more private: github.com/DevTips/Artists-Theme/pull/51

    • @chrisdizzle313
      @chrisdizzle313 10 ปีที่แล้ว

      DevTips Right on, like I said I just wanted your thoughts because i heard something about that application and not being able to hide the email address which wouldn't make sense to hide IMO anyways.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Yea, just people talking.

  • @jonathanhdg0511
    @jonathanhdg0511 10 ปีที่แล้ว

    Hey man! First I want to say I'am a big fan of your channel and you're making some great videos. But coding isn't really my problem. Do you know a good channel or a simple book so I can learn design?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      hackdesign.org/lessons
      Is a great resource for coders learning design. It's really good.

  • @NeferLopez
    @NeferLopez 9 ปีที่แล้ว +1

    Is formspree.io still working properly for everyone? I followed the steps on the site but when I hit the "Send" button, nothing happens. Any suggestions?

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว +1

      Nefer Lopez Not sure. They do have a support email tho: team@formspree.io

    • @NeferLopez
      @NeferLopez 9 ปีที่แล้ว

      DevTips Thanks!

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      Nefer Lopez no problem, I hope you get it sorted!

    • @jamesguerne628
      @jamesguerne628 9 ปีที่แล้ว

      DevTips When you click the on the send button on the website does it redirect you to the formspree "thank you" page, or can you make stay on the page and display something like "form submitted".

  • @juamot
    @juamot 8 ปีที่แล้ว

    Does anyone know how he created a custom success page for he form (it's on his github but don't know how to link to it)

  • @mohsin0112
    @mohsin0112 8 ปีที่แล้ว

    Is that free service? Is there any chance to sell emails?

  • @kristusica
    @kristusica 7 ปีที่แล้ว

    Could you help meby converting the sass into css? I really don't manage with the ruby in sublime text. Please!! :)

  • @Vicarious172
    @Vicarious172 10 ปีที่แล้ว

    What about a tutorial about Flexbox or Svgs after this?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Great recommendations. I'd love to learn more about SVG. I feel really uninformed on the topic. :)

  • @gurucode.studio
    @gurucode.studio 10 ปีที่แล้ว

    Sir , if i want to re-design the mail form is that possible or not , i mean did forms.brace.io has an option to re-design the form rather than just ( Name, Email, Comment) to appear more better inside the inbox when arrives ??
    Again no comment as always shining like a star , keep it like that and pleeeeeeeeeeeeeeeeeasSsSsSsSsSsSse when this series get finished do not disappear :( i love to see you every day :) .

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      You can add whatever form fields you like, and style them how ever you like. Brace just gets it to your inbox.

    • @gurucode.studio
      @gurucode.studio 10 ปีที่แล้ว

      Oh , well i thought that maybe i could make it look like better with some styles to get it in my inbox in different style :)

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      oh, the email that they send you? no. No, that doesn't change.

  • @ricardo130695
    @ricardo130695 6 ปีที่แล้ว

    Thanks buddy :D

  • @usmisaid4849
    @usmisaid4849 7 ปีที่แล้ว

    how can we remove robot test ??? help :)

  • @waqasmirza2832
    @waqasmirza2832 8 ปีที่แล้ว

    can you help me please
    i don't get it

  • @alexsafayan7684
    @alexsafayan7684 9 ปีที่แล้ว +4

    forms.brace.io/ says website is unavailable.

  • @PixelPaintGuy
    @PixelPaintGuy 10 ปีที่แล้ว

    Brace forms isn't working anymore, who got some tips?

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว +1

      formspree.io/ I think is the successor of Braceforms.

    • @PixelPaintGuy
      @PixelPaintGuy 10 ปีที่แล้ว

      This isnt working..

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      There is a contact form at the bottom of this page: formspree.io/
      Maybe they have some insights.

    • @PixelPaintGuy
      @PixelPaintGuy 10 ปีที่แล้ว

      I can fit it in but when i click on send it says;
      "Unable to submit form. Make sure your form is running on a proper server. For geeks: could not find the "Referrer" header."

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      hmm. not sure. Are you on a server?

  • @BladeAurora
    @BladeAurora 10 ปีที่แล้ว +1

    Nice and juicy!

  • @kamaboko1
    @kamaboko1 9 ปีที่แล้ว

    Hi. Question for anyone here. Is there a way to conceal my email address from those that may want to view the page source? I thought using the {{site.email}} would work, but it didn't. :-( Thanks for your reply.

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      kamaboko1 Not on a static site.

    • @kamaboko1
      @kamaboko1 9 ปีที่แล้ว

      OK. Thanks for the reply.

    • @OfficialDevTips
      @OfficialDevTips  9 ปีที่แล้ว

      yep!

    • @balladstar
      @balladstar 9 ปีที่แล้ว

      kamaboko1 Hey did you eventually find away to conceal the email. I figure maybe there were tricks or something.

    • @kamaboko1
      @kamaboko1 9 ปีที่แล้ว

      ***** No, after trying a couple of different options I was not able to find a solution that would conceal one's email address.

  • @NonsensGaming
    @NonsensGaming 10 ปีที่แล้ว +1

    i r8 this episode 8/8

  • @MrOxinova
    @MrOxinova 10 ปีที่แล้ว

    The font type is different from photoshop

    • @MrBionik6
      @MrBionik6 10 ปีที่แล้ว +1

      Photoshop has always font rendering issue and this hasn't been fixed in the new CC 2014.
      Give Sketch3 a try if you're in mac! The font rendering is almost pixel-perfect and you don't have all these options like in PS (none, crisp, sharp,...)

  • @waqasmirza2832
    @waqasmirza2832 8 ปีที่แล้ว

    can you give a exercies

  • @kerrysmith5996
    @kerrysmith5996 10 ปีที่แล้ว

    To fix the Brace form error, use assembly.com/formspree

  • @AbhiKhatri
    @AbhiKhatri 10 ปีที่แล้ว

    Thanks for this awesome video, saved the day for me, LOL
    @Abhi__khatri blown up your gmail LOL
    Just saw that LOL
    cant stop laughing :D

  • @BryceStradling
    @BryceStradling 10 ปีที่แล้ว

    Brace.io just got bought out by Squarespace. They're no longer excepting customers, and it looks like they're be discontinuing their other services in the near future.
    Huge bummer, cause I use their stuff all the time.
    blog.brace.io/2014/11/17/squarespace/

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Oh wow. Thanks for the heads up. Looks like squarespace plans to keep their free services (like forms) going. Likely not in the way you expect tho - "As for our free tools for forms, charts and data, Squarespace has agreed to release these tools back to the developer community as open source projects. Please watch out for announcements with more detail on those products’ websites (forms.brace.io, charts.brace.io and data.brace.io)."

    • @BryceStradling
      @BryceStradling 10 ปีที่แล้ว

      DevTips well that's pretty cool. I don't know how much interest there is in it though. Their static site generator project, doesn't exactly have a lively github repo. Still forms was such a great service, if they killed it off completely, I'm sure another one would pop up in its place.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      yea. They said they would open source it. That doesn't mean they will run the service.

  • @joedyer1989
    @joedyer1989 10 ปีที่แล้ว

    This bloke reminds me of Billy Zane..

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      The oxy-clean guy? lol.

    • @joedyer1989
      @joedyer1989 10 ปีที่แล้ว

      You know the guy from Titanic lol - Kate Winslet's husband. Great series by the way! :)

    • @joedyer1989
      @joedyer1989 10 ปีที่แล้ว

      DevTips
      Actually the actor David Cross springs to mind especially with that beard.

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      Hahaha! This is too funny :)

    • @joedyer1989
      @joedyer1989 10 ปีที่แล้ว

      Billy Cross! :D

  • @michaeljose24
    @michaeljose24 10 ปีที่แล้ว

    Just did this tutorial and for it to work you have to change the action in the form to formspree.io/email@example.com

    • @OfficialDevTips
      @OfficialDevTips  10 ปีที่แล้ว

      yes, the service changed hands since I made this video. Thanks for pointing that out!