Wufoo Form Editing - html

I'm wanting to find out how I change my form title from an h2 tag to an h1 tag from the Wufoo forms builder. I've been looking everywhere on their documentation and can not find out an answer.

You can't change the markup of a form HOSTED by Wufoo. But if you download the HTML/CSS (avaialble in the code manager, the same place you get the embed code), you are free to change that tag. Or, you can use Custom CSS to make that h2 look any way you want.

I'm not entirely sure you can do that... many of those "pre-made" type sites won't allow much customization. You might want to try to make your own form with the HTML <form> tag.

you can download the embedded code provided for developer, you will get a .zip file, edit index.html file, edit form according to your needs, but do not change actual, name, type, method, action, value fields, add CSS classes you want and finally you are are ready to in your site, it work fine. I am using it on 30+ websites.

Related

Why is my jQueryMobile CSS Style being applied to a linked page?

I am using a jQuery CSS style on the main portion of my website. It works fine. Now, I also have a sub-directory of my website which should not use the style. When I manually navigate my browser to the sub-directory of the website, no style is applied which is what I want. When I click on a link to the sub-directory from the main area, however, it is applying the CSS style from the main part even though I am not referencing this CSS anywhere in the HTML of that sub-directory. If I refresh the browser, the style goes away.
Please can someone help me understand what is going on here? Thank you.
You are using jquery mobile, which by default loads the content of links via ajax. That means you don't have a page refresh when clicking on a link. The contents get dynamically inserted in your document which still has all your css.
More information here.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
You have to disable ajax for that link. More information here.
jquery-mobile - how can I bind disable ajax links to a certain class
Clear your history and browser data, then refresh and try.
Try to open the link in chrome and using the developer options (F12)
look for the resources it is referencing. If the page is referencing
the CSS files then either Javascript is making the referencing or
you have accidentally kept the resource link. Let the forum know your findings.
Edit
Somebody seems to have done what I have mentioned and has come to conclusions that they are because of AJAX. The steps I have mentioned above would let you do that all by yourself.

How can I display an HTML preview while preventing style inheritance from the rest of my site?

I have a textarea where I let users write some HTML.
They can then click a "Preview" link that triggers ajax that sends the raw HTML to a controller that uses JSoup to sanitize it (it returns the sanitized string).
I then display the sanitized HTML in a modal dialog box.
This all works wonderfully except that the modal dialog box has CSS styles cascade down from the rest of my site, and I want to display the HTML preview without any styles.
I've searched a lot (e.g. I found Any way to display some heavily-styled HTML in isolation from the rest of site's styles?) but wasn't able to figure out a solution.
I appreciate your help!
-Ryan
You could write the preview to a text file on the server then open an iframe to it with a template absent of the site's css.
I bet your problem stems from generic css selectors though. Things like
div p{
background:#fff;
}
Or maybe not so generic, but so non specific that it is being caught by your preview.

Insert Code Into HTML

I have a web site that gets a new page every couple weeks, and that means I need to update the menu to have the new page in every single one. I'm wondering if there is a way to have an external text or .htm file that I can basically insert into the web page. That way I can put the menu in the external file and call it wherever I want it. So I only have to edit one thing when I get a new page.
Thanks in advance.
Edit: This is a drop-down menu with ul and li tags with an external style sheet for them. So this needs to work for that too. Thanks
Have a single HTML page like so:
<html>
<head></head>
<body>
HTML OF LINKS HERE
</body>
</html>
Then save it as my_links.html and into the page you want to insert it... do the following. Copy and paste the whole page and it as FILENAME.PHP and then use this code:
<?php include("my_links.html"); ?>
Congratulations, you have just used PHP! Learn more about the including pages here.
This is very easy and common to do on sites that use a server-side language behind them (PHP, ASP.NET, etc.)
If you don't want to use a server side language, than an <iframe> is your only option.
If you want to use HTML, and only html (no server side programming or javascript), you can use Server Side Includes embedded into your html files. Your web server may need to be configured to accept them.
If you are using server side include and you had navigation in a separated file, yes you can just edit things separate.
You can also do this using jQuery.
$('#elementid').load('page.html');
http://api.jquery.com/load/
But this will not be SEO friendly.
Also if someone has scripts turned off in their browser, then this will not work.

Embed a webclip

I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).

Edit CSS with Delphi

I use Delphi 2010 . I am using twebbrowser to load up HTML source and view it.
Now I want to click on an area (background, links, etc) in the web browser and get the styling in the CSS file that styles the HTML.
For example: I click on the H3 region and I want to be taken to the h3{ color: white; } in the CSS.
Any help at all is much appreciated; this is hard for me to figure out.
You will have to handle the parsing of the source yourself to make this work. Because the CSS entry can be in another file or even files, this can be tricky. I would start by looking at the DIHtmlParser component which can help greatly here. You will have to parse the main document, and each identified CSS file to locate the proper file/position to jump too. I would also look at tEmbeddedWB as an alternative over TWebBrowser as it supplies much more control over the embedded browser as well as TRichEditWB which works well for viewing syntax highlighted HTML source.
Edit: You still have to parse the CSS and HTML to build an index of each tag and its CSS location. When your editing the HTML, you have to parse the tag your cursor is currently on or in, compare that to the index you parsed earlier, to display the CSS attributes in effect. Keep in mind that CSS cascades and nests, so your index will most likely be a tree, and your tag will be relative in that tree.