Adding custom form built with html, js, css

  • 13 November 2020
  • 2 replies
  • 71 views
Baptiste

Hi everyone!
I’m quite new to html, js, and css, and I have found a beautiful contact form I would like to use on my page:https://codepen.io/wwwebneko/pen/RRQKzZ

But when I simply put the html in a custom html element, create the JS and the CSS, the form displays without any formatting or animation.

Is there a way I can add this form to my page?
If yes, would a kind soul help me with what I am missing?

Many, many thanks in advance!

2 replies

Hristian
Userlevel 7
Badge +3

Hey @Baptiste,

Let me first start by saying that if you are not comfortable writing and editing code, you should stay away from random pieces of code you find on the internet 🙂

Keeping the above, all you have to do to get your form working is make sure you properly compile the CSS from Codepen.

Contact_us_form_with_animation
Contact_us_form_with_animation1186×752 97 KB

Here is a quick example of your form on Unbounce: https://hello.revise.agency/test-form-ignore/

A couple of big issues with this form in it’s current state:

  1. No form validation so you can submit an empty form
    1b. You still need to write more code to actually send the form responses somewhere
  2. It’s not really responsive. Unless you further modify the code for it.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Baptiste

Thank you @Hristian !

I appreciate the warning; the tinkerer in me wants to try and figure things out, but I’ll try to avoid making major mistakes!

Is there a way I could style (and ideally animate) an Unbounce form in a similar way, so I can keep the attributes and values to minimize additional coding?

Reply


Terms & ConditionsCookie settings