I'm helping someone set up a website, and we're limited to only CSS and HTML. No JavaScript, PHP, or other tools.
We're setting up a simple mailto: form (knowing very well this is old and obsolete), and part of it is working fine. Setting the subject with name="subject" and the body with name="body" allows submitting the text-input and the textarea-input to Outlook from a submit-button.
Now, we're trying to add a dropdown list to the form, so the user can choose the type of request to be handled, adding this to the body of the mail; but have no clue as to how to do this without recurring to a third language.
tl;dr: How to append a string to a GET form without adding a new & in raw HTML?
Any help will be appreciated.
This link provides some guidance as to how the link should look, setting each form input to a new line of the body parameter: mailto link multiple body lines
That can't be done.
If you're going to process the data from the form you need a language other than css and html.
HTML & CSS are simple languages. They aren't able to process information, rather they are instructions which are processed by the browsers.
You will need some kind of traditional/scripting language if you're going to retrieve & work with the data from the web-form.
Related
We currently use wysihtml5-rails to let our users edit emails before they are sent but this is not working out so well for a few reasons.
I need the comments to allow for Outlook specific comments like these . All comments are being removed, currently.
I also need the CSS classes to be untouched as the editor content will be a pre-generated email that includes CSS classes. Our editor will only keep classes that are whitelisted but this is annoying as we need to update that list with every change.
Same goes for inline styles. Some of the styles in the generated email are inline instead of in classes. Those need to be kept but they are being removed.
Is there any way I can get our editor to work this way?
I found a solution but it's hacky.
I realized that the raw HTML was being stored on the page in a hidden textarea tag. Interestingly, all the elements that I needed (CSS classes, comments) were still there. But when submitting the form, the value of this textarea was replaced with the parsed results from the editor which gets sent to the server. All the comments and classes are gone from this text.
The solution was then to create a second field that takes the unparsed value from the WYSIWYG editor and sends that along. Easy in rails but just making this new field part of a form. Then the controller can choose which value to take. In my case, I renamed the existing message field to parsed_message. Then added a new message field which will hold the unparsed message.
The WYSIWYG editor we are using allows this by having a method that can be called at any time: window.email_editor.getValue(). Here the email_editor is the editor instantiated by the javascript on the page.
I have 3 web pages each page contains 1 bootstrap form. The forms are structured the same, but each has a different number of input fields and order in which they appear in the form.
The HTML page files, local JS files are all in the same folder(no sub-folders). The <head> on each page has the same assests.
The non-functional form has a text area and button that the other forms do not. I have tried commenting these out, but that didn't resolve the problem. I have tried removing the link to local CSS, that too made no difference in the issue.
When I check the html files with W3 validator I get one Error and 2 Warnings.
Error: Element legend not allowed as child of element form in this context.
Warning: The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. Commenting out the legend makes no difference.
I do have a date field in both the working and non-working forms.
When I look at dev tools in Chrome I don't see any errors.
I have tested on both Chrome and FireFox, so I don't think it is a browser specific issue.
Note this is all done on local machine and all coded using notepadd++.
I know this would be a tremendous amount of code to post for review, but if required I will do so. I was hoping someone would have troubleshooting suggestion.
have created 2 jsbin. first link is page with non working form. Second link is page with working form. first link is https://jsbin.com/xuwuziy/edit?html,css,js,output . Second link is https://jsbin.com/luqatel/edit?html,css,js,output
In the first JSBin: $('#cruise1').bootstrapValidator(.... There's no element with id "cruise1" in the page. Instead your form's ID is "quoteForm". Therefore the validator does not bind to it because it can't find an element with the "cruise1" ID.
Since you're including the same validation JS on both pages, in order to get the same code to validate both forms, you have to use a selector that can match to both forms.
There are two possible, simple solutions.
1) Give both forms an id of "cruise1". However, this may not be very descriptive of your quote form.
2) Give both forms the same class, and use that as the selector to initialise the validator. e.g.:
The form tags:
<form class="form-horizontal validatableForm" id="quoteform">
and
<form class="form-horizontal validatableForm" id="cruise1">
And the validator intialisation:
$('.validatableForm').bootstrapValidator( //...etc
This will initialise the same validation on all forms which match the given selector (i.e. all forms with that class). In any one page, in your situation, you might only have one form loaded with that class, but it means it will work when the code is included in both pages, and if for any reason you had two forms with that class loaded in one page it would bind those as well.
One last note, since you mentioned you were new to this: I hope you are implementing the same validation rules in your server side code (the code which deals with the submitted form data). Client-side validation such as you've used is very nice for user experience, but it's not secure - any user, especially a malicious one, or an automated spam-bot, can easily manipulate or bypass the JavaScript validation (most simply, by just turning off JavaScript) and try to send invalid or problematic data to the server. You cannot trust anything which comes from the client-side and must re-validate everything in order to protect your application and database.
I am volunteering on a website-based project that is trying to make all pages fully operable JavaScript free before adding any JavaScript for enhancements, and I was asked to investigate whether or not a particular scenario could be handled purely through HTML/CSS.
What we have is a form that is populated to help us filter a list of tickets that are displayed on the screen after a page update through a GET action, which itself works fine, but the concern with the current implementation is that the URL cannot be made into a permanent link. The request, however, to keep the permanent link as minimal as possible, is to only send GET parameters for fields that are populated with something (so, suppressing GET parameters for fields that are blank) instead of having a different GET parameter for each form field on the page.
I have thought of several ways that could be done, most including JavaScript (example: create fields with ids but no names and a hidden field w/ name that uses JS to grab the data from the fields), but also one that would be a POST action with a redirect back to the GET with a human readable string that could be permanently used. The lead dev, however would prefer not to go through the POST/redirect method if at all possible.
That being said, I'm trying to make sure I cover all my bases and ask experts their thoughts on this before I strongly push for the POST/redirect solution: Is there a way using only HTML & CSS to directly suppress GET parameters of a form for fields that are blank without using a POST/redirect?
No, suppressing fields from being submitted in an HTML form with method of "GET" is not possible without using JavaScript, or instead submitting the form with a POST method and using a server side function to minimize the form.
What fields are submitted are defined by the HTML specification and HTML and CSS alone cannot modify this behavior and still have the browser be compliant with the standards.
No, you cannot programmatically suppress any default browser behavior without using some kind of client scripting language, like JavaScript.
As a side note, you say "JavaScript for enhancements", but JavaScript is not used for enhancements these days. And no one in the real world would except a decent front-end without the use of JavaScript. I would suggest you simply use JavaScript.
I do not think you can avoid Javascript here to pre process before submission to eliminate unchanged /empty form fields.
I am looking for some guidance on how to save editing done using /wysihtml5.
I have googled using several different combinations of search terms but virtually all the hits I get are github. I have looked through the examples on that site but I can't find anything that explains how the changes can be saved once a user edits a page.
I do have some php and sql knowledge but would like some pointers to exactly what I need to do to get changes made using /wysihtml5 saved. The other instructions appear very comprehensive so I wonder why this aspect seems to be missing.
Can anyone help please?
Many thanks
Brenda
According to the editor's Getting Started page, it works by replacing a regular <textarea> with the rich editor:
wysihtml5 takes a textarea and transforms it into a rich text editor.
The textarea acts as a fallback for unsupported browsers (eg. IE < 8).
Make sure the textarea element has an id, so we can later access it
easily from javascript. The resulting rich text editor will much
behave and look like the textarea since behavior (placeholder,
autofocus, …) and css styles will be copied over.
Please note: The textarea will always hold the editor’s generated
markup. Therefore wysihtml5 integrates smoothly with forms.
So, the editor's content will always be available as the value of the textarea, and you can use it as you would with a regular form element (submit the form, or get the contents with JavaScript and send it to PHP using Ajax).
For example, consider you apply the editor to the following:
<form action="somescript.php" method="POST">
<textarea id="wysihtml5-textarea" name="wysihtml5-textarea"></textarea>
<input type="submit" value="Submit form">
</form>
If you submit the form by clicking the button, your php script will receive the contents on $_POST["wysihtml5-textarea"] (change the name of the textarea to set the desired key on $_POST).
If you want to get the value using JavaScript, select the <textarea> by ID, then access the element's value:
var textarea = document.getElementById("wysihtml5-textarea");
alert(textarea.value);
Then you can pass that value to PHP using Ajax if you want. The PHP/SQL implementation for actually saving the data is up to you, the editor's code just takes care of providing a rich text editor, and formatting features.
Note: I never used that editor, so my answer might be not be 100% accurate.
I have created an html form with text boxes and radio buttons ect.
I can email the form to an email address.
now the problem, when i fill in the form and click reply, i only get my blank html form back no values were left inside the textbox's.
Please help
We did some fairly extensive research about HTML forms in emails for a client of ours. The bottom line is that it barely works, so it’s best to link to a form in a browser.
What Quentin said holds water, many email clients (cough, outlook) are very specific in regards to their support for HTML emails. In fact most don't even support div's or embedded <style> blocks. Let alone an HTML form.
Your best bet is to use a URL that they click on, which in-turn opens up a form for them to fill out. If you need to capture some of their information automatically (such as email). you can generate query strings and in your mailer have it add the information in dynamicallly..
i.e; <a href="http://awesomeform.com/form.php?email=$client_email">
In email it would look like: http://awesomeform.com/form.php?email=myemail#email.com
Either way
If you are insistent on attempting this, use the email boilerplate to get you started. It has a ton of "best practices" and tips/tricks built right into it.
http://htmlemailboilerplate.com/
Complex HTML doesn't mix with many email clients. Forms are especially poorly supported.
Link to an HTML document available over HTTP instead. People can click a link and open it in a regular web browser.