How to post a custom form in WordPress based website? - javascript

I've developed a form using raw HTML code as well as referenced inside separate CSS and javascript code files. Now, what I would like to do is to create a custom form in WordPress based on my raw HTML, CSS and javascript files. I am not sure which approach would make the most sense. The form is also supposed to send an email containing user-filled form fields. Is there any standard WordPress approach to achieve it? Should I create a custom plugin or perhaps use the already existing one? I found few which seem to enable certain custom codes (eg. HTML Forms, Insert Html Snippet, Raw HTML) but do they really? The number of options is really overwhelming and I am not convinced to any of them.
I am sure some of you dealt with something like that before, is it personal experience or helping out someone in a similar case. Hopefully, you could point me in the right direction.

Related

copy template of one html file to others without typing the same code again

i am creating a e-commerce website using html/css. what i am trying to achieve is that i need same template for all product pages after clicking on the product. And i want to do this without actually coding every page using html and css. is there anyway to do this?
i tried to code all pages but that will be impossible to finsh if i keep on doing it, i want an effective way of doing this.
You can use plain JS to achieve the same or can use JS libraries like React JS, Angular JS, etc. for versatility. But all of these would require a good knowledge of coding.
And, to skip coding, I'll suggest you use WordPress + WooCommerce, all the required features are free and you don't have to code a single line, it's all GUI.
You need to add Javascript for this. The easy thing will be to work with a Javascript library called React.
In react you will make a component called a product card! and now you can pass your data to the product card by mapping the product list. You don't need to write product data showing HTML CSS for every product. Just write it one time and use it as many times as you want with React.
Here is the official React documentation

I want edit every single page in wordpress. Is possible?

Sorry if this question sounds stupid but im a noob with wordpress.
I am a javascript developer, and I want make a little game (or games) with wordpress. Opening main page there is a sliding puzzle. After complete, a button appears and clicking there you pass to another page. This is basically the same to all pages.
But I can't find were i put my javascript or HTML code. I create the pages but I can't edit them the way I want, everytime i try to do it i only can edit like word. I cant create, change or edit divs attibutes or tags. To be honest the only thing i can edit is CSS in stylesheet, but is too limited.
I have done the search, try found a solutions or ways to done it but when i look to tutorials is all diferent from what i see.
to give you an ideia I want to do a mix of this:
-> http://www.rustylake.com/room-escape-games/cube-escape-case-23.html
and this
-> https://ebonyriddle.com/
but i don't know how to edit page to page.
can you help me?
Thanks for everything
PS: I know I can do it without Wordpress, but I want use it anyway to learn more about the CMS (because of work) maintain website structure and later learn how to do my own templates or plugins.
To answer your question directly, yes it is possible (and easy, relatively speaking) to add custom code to every page / post of a Wordpress site.
More generally, you’re talking about creating a custom Wordpress theme, which you can find out more about here:
https://codex.wordpress.org/Theme_Development
and here:
https://developer.wordpress.org/themes/getting-started/ (Good suggestion from #ItsGeorge)
Regarding adding custom JavaScript to a theme, your files will need to be enqueued as per these instructions.
Outlining the steps involved in Wordpress theme development would go beyond the scope of your question, but there are plenty of resources online and answers to Wordpress specific questions on wordpress.stackexchange.com. You will need to familiarise yourself with php as well as JavaScript, to take full control of Wordpress.
I would say that developing a game feels like an odd fit... If learning Wordpress is your objective, a blog or personal website might be a better place to start, then you could move onto a game once you are familiar with the concepts involved, e.g. the loop, which plays a huge part in how Wordpress works
Good luck!
The primary focus of WordPress is to put HTML code and JS out of the user. You might manage your extra JavaScript files with your theme customization. If you want to get more control about how your pages are rendering, you should use action hooks and filters. The simplest way for you is to override each page template like this
https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page
The preferable resource to ask Wordpress related questions is https://wordpress.stackexchange.com/

How to take a screenshot of a HTML form?

I'm working on a project that's basically a web form that the user fills in. Once complete they can save a screenshot of the entire, complete form to use as a sort of pamphlet.
I'm trying to work out the best way to approach this programatically.
I have a simple prototype working using the canvas tag, but the text formatting options aren't good enough for what I need so I'm wondering if there's some other way to generate a screenshot of a HTML element.
If I may suggest, post the result to a webserver and create a nice PDF document from it using some reporting tool available.
In my opinion, this is the best, maintainable solution. No need for hacking it in HTML or Javascript. You can use your own logo, print layout, fonts, etc.

Custom user HTML input safety

I am creating a website in php. One of the features is that users can edit their own pages by entering custom html code. Right now, you can enter code into a textarea and have it displayed in a div. In the future I plan on adding more helpful tools to the user.
My question is how to protect my site from malicious code. I know Facebook has an option to put custom HTML in a page tab so it can be done safely. Currently, the html is being displayed by a php script that echos it onto a page so users can enter javascript in <script> tags as well. I don't know the full limits of javascript and html but I know that custom javascript embedded into the website has the potential to screw things up.
Here are my ideas so far:
Remove all javascript from user code
Pros: Easy
Cons: Users can't do anything interesting with javascript
Limit the javascript to only execute inside the display div
Pros: Safe custom javascript
Cons: May be impossible/very difficult
If anyone has ideas about how to do this or how Facebook did this, I would love to know! Thanks in advance.
If you are using php, an excellent solution is to use HTMLPurifier. It has many options to filter out bad stuff, and as a side effect, guarantees well formed html output.

Do I need somehow "prepare" my HTML before moving on to making my page more sexy with jQuery?

Do I need somehow "prepare" my HTML before moving on to making my page more sexy with jQuery?
What I mean is there some rule that says that HTML modification with jQuery is easier when HTML has "this" and "that" and "that too"? Some "HTML design patterns" like we have in C++ for example?
My HTML is generated by PHP application from templates and data retrieved from mySql database, and it is styled with CSS so I have ids and classes and almost all "components" on pages are inside divs (with id or class or both) so I presume that it is "jQuery ready" but maybe I should add something more to HTML or think about something?
I mostly have a complete vision what I want to accomplish with jQuery and how page should look like and behave when I finish so it is "only" matter of implementing it but I don't want to get too deep and suddenly discover that if I done something at the beginning my work would be easier and faster.
One advice: generate valid HTML according to whatever DOCTYPE you are using and have fun with jquery. Also avoid mixing markup and javascript: keep them separate and progressively enhance your markup with javascript features.
What you need to do is create a bare HTML page that is usable as-is, meaning, no Javascript required to operate it – that's the ideal anyway, building a web app usually means there's a dependency on Javascript, but you should only use JS when necessary.
Adding Javascript should only enhance your UI while CSS should add the presentation on top of the existing HTML structure. In other words, an HTML page without CSS and Javascript should look and read well.

Categories