I need a client side HTML form builder I can implement into my project to give my users to ability to add/edit form design and field properties as desired. I am using Telerik Kendo just to provide some background and I have a basic form, however if the user needs additional fields, or even additional labels I want them to be able to edit their own forms.
I found Jot Forms and dozens more (http://www.jotform.com) but that does not work for me. All fields are in a vertical fashion. I need the users to be able to drop a field, move it around where ever they need.
So in the end, I need a form builder I can use in my project where users can create and use alternate forms. They need to be able to drag, drop the form element anywhere on the page and of course edit the properties as necessary.
If there is anything out there I would really appreciate some help on this.
I appreciate the constructive feedback. I have ventured into discovering what it would take to build one of my own.
I found most form builders already done out there that I demoed would build a beautiful form. As long as your desired form is simple. As I tested I found complex forms would require additional coding on the back end. Something most users don't know how to do, and something that would be a support nightmare.
I so far have found that the JQuery UI draggable, droppable, etc. features will provide me with ample tools do build my own. So far I have a proof of concept where I can drag items onto a workspace. The nice thing is that I can incorporate HTML code specific to my Javascript framework, Kendo. We use it at work and it has nearly everything including drag and drop. Just not functional in a way where I could see building a form builder.
I am learning all of this as I go, so thank you for commenting and please forgive me if I sound inexperienced. I am, but I am not afraid and in fact love to get my hands dirty with new stuff.
Related
Does anyone know if I can integrate GrapeJS into my own website so clients could build their own websites using it? IF anyone has done this, how easy is it and are there downsides?
This question is pretty open ended, but I'll take a shot at it.
The short answer is yes, you can use Grapesjs to allow clients to make their own sites; however, the details matter.
Grapesjs by default doesn't know anything about your stack, website structure, metadata, etc. You will need to either supply plugins or implement those features yourself. I've worked on a project for a company that used Grapesjs to implement single page apps and I'll include just some of the tweaks we had to manage.
Hiding certain layers that only confuse average users.
Hiding pretty much all of the styling, and using traits to allow people to pick from some predefined styles.
Take the html, css on store and generate the final html page, and store it in our static serving folder on the server.
Implement a wrapping "App" component that has traits for the different metadata we want users to control (open graph metadata, title, etc)
and those are just the big things, I'm sure I am forgetting several small ones.
For your application, you'll also need to implement a custom trait for links / buttons that allows you to link from one "page" to another. As well as, a way to allow a user to pick which page to work on.
The long answer is Yes, but Grapesjs is only the starting point.
Yes you can.
However it is not straightforward.
If you want to build a Drag Drop Editor like GrapeJS Demo, here is the Source Code - https://github.com/artf/grapesjs-preset-webpage
You can see an implementation at https://codegres.org/dragdrop
I have two forms (below) one is a trip calculator and one a spending money calculator
There is a spending money radio on the trip calculator(if clicked "yes", will open the spending money calculator in new tab, functionality not added yet)
From a usability perspective should I:
Leave the two calculators separate as they are large enough visually already
OR
Add a conditional section to the main calculator where if clicked yes, the spending money calculator will open in the same page as the main calculator making the whole calculator longer if opened?
http://tripcalculator.travel2mania.com/WrestleMania.php
http://spendingcalculator.travel2mania.com/WrestleManiaspending.php
Do you have the time to do this right? Because if you do, I would not use a form generator, and I would not even use forms. See this question.
I also would use a tabbed UI. The forms are a bit overwhelming... having fewer sections per screen, with either a next=> button, or a tabbed UI, would be easier to use. (Note that when creating a tabbed interface, the tabs are merely a visual trick. In reality, all fields are available to you, the developer, as if they all were on the same page) Thanks to jQueryUI Tabs, making tabbed interfaces are a breeze!
If you re-work your UI, then you can bring both up on the same screen.
Also, sounds like you could use some tips on using modals (aka "lightboxes"). You will love them.
And, if you don't already know about these two things, you should take a half hour each and brush up...
jQuery -- important: use down arrow to start showing things on each slide
flexbox
More about AJAX
Also...
Some tips on building your project
For each of the above widgets (Tabs, Modals, etc) - do a few tiny, simplistic tests/exercises first. Don't just run into trying to work them into your project. You will not save time -- you will waste it.
When you build your project, first build each of these widget interfaces in its own project -- as though that one thing (the jQUI Tabs, for eg) is the only thing in the project. So build each widget separately. THEN integrate them as the final step. You will be glad you did.
If you have any PHP in the project, either use a lot of fopen() Write-to-File statements, so you know where the code got to before it crashed, or learn to use the PHPConsole Chrome add-in.
I'm new to Go. I'm understanding the basics more and more but now I'm trying to learn how to interface the code with HTML.
My simple scenario is that I have a single web page with a list that's created by Go fetching information from a database, then building the html page from a group of templates. All I want is to make a simple list that will allow me to somehow mark it as complete/done when the <div> is clicked or something. Also, to be able to fully delete a "row" in my webpage list, a div basically.
So my list will indicate something is complete (I assume I must use Go to alter the css) and delete an item (completely remove that block of html). And remember, these items are stored in a database, so I must be able to identify the specific item.
Any help, ideas, resources, pseudocode, pointers would be greatly appreciated!
In web development, there are two "ends" where code executes; the browser and the server, aka. the front-end and the back-end.
A "click" happens in the browser and will execute code in the browser. That "browser-code" in turn may or may not contact the server for additional information and then render that information to the browser.
That means; the server has no control over what happens in the browser* and vice versa. That's the basics of web development.
Go is a language good for building servers. Javacript is the language that most browsers understand. What you need is Javascript, not Go.
* this is not entirely true but good enough as a base to start learning.
I'm running the latest version of Wordpress (3.1.2) and need to create a form that, when submitted, will produce a Thank You page with my own text, a summary of the data that the user submitted, as well as a PayPal button. I'm not a programmer (although I do know HTML), so I've installed the Custom Contact Forms Wordpress plugin, and it looks very user friendly, but I'm not sure how to create what I just described. It allows you to create a custom Thank You Page with HTML, but you have to follow certain parameters.
Would appreciate step-by-step instructions on how to do this. I just need instructions for the basic template of it. I can fill in the specific code after I have that.
If another Wordpress plugin is better for this, please mention which one and how I would set up the Thank You page I just described.
You'd be better off with a plugin. Creating a form from scratch can be done, but it's pretty intensive coding you're talking about here. (I could put in a ton of code here, but when I say a ton, I mean it. If you're not very well-versed in PHP, then it'll give you a headache.) Gravity Forms is the best form plugin out there (and has Paypal integration with a click), but it's not free. Dagon Design's Form Mailer and cFormsII are both good plugins (and free), but you'll have to do some tweaking to get them to do what you want. Not as much as you'd be doing if you tried to create your own form, but a bit is needed.
I required to write a small web application that allow customer to select predefined layout template in html and be able to modify it. The application need to allow customer to add block text to pre defined area and images. The block texts need to be able to reorder based on customer need. eg. move up , move down or move to sidebar. THe complete layout will be able to convert to table layout and inline css due to email program doesn't like div & css. I don't know where should I looking for the information to make this happen, could anyone show me how to do this.
Thank you
Of course, I may be misunderstanding you. You might consider using a standard content management system such as:
linux based
joomla
Mambo
Windows based
DotNetNuke
Sharepoint
Those systems have the functionality you described built in with the added benefit that most of them are free and open source.
I'm not sure why someone downvoted you, but check out a javascript framework like script.aculo.us or Yahoo's YUI
Those will go a long way towards creating the interface you need. Also they have a lot of examples.
The Yahoo framework has an inplace html editor (I think that is what you are asking for). Another editing is the fckeditor.