HTML Coding custom button for "mailto" - html

So I have started using Foundation. Very nice indeed.
And I am using Foundation's custom "Radius Button", to make a "mailto:" form.
Basically, all I can find online are the ugly default HTML buttons/labels.
Is there a way I can use this button and Foundation's "Input Label's" to create a "mailto:" form?
Here is the source code for the buttons/labels all sorted out:
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h3>Survey</h3>
<p>I'm looking into what to create, but need ideas!
Anything will help, and the time it takes you to fill one out, is nothing!</p>
<div class="row">
<div class="large-4 medium-4 columns">
<label>Email (Optional)</label>
<input type="text" placeholder="Email" />
</div>
<div class="large-4 medium-4 columns">
<label>Idea Subject (What's it about?)</label>
<input type="text" placeholder="Subject" />
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>What is your idea?</label>
<textarea placeholder="Idea"></textarea>
</div>
</div>
<div class="row">
<div class="large-4 medium-4 small-4 columns">
Send
Reset
</div>
</div>
</div>
</div>
</div>
I have never used Foundation before, but I assume, that unless you know the answer just by code, you could implement this into a pre-made Foundation "project".
But anyway, here is what the above HTML looks like when previewed:
See the Send & Reset? That's what I want to use to submit it and send it to me.
Thanks for any given help.

You have to use Javascript if you want to output what people have entered in a textbox. You can use these variables in your mailto:
&cc = to set the CC recipient(s)
&bcc = to set the BCC recipient(s)
&subject = to set the email subject, URL encode for longer sentences, so replace spaces with %20, etc.
&body = to set the body of the message, you can add entire sentences here, including line breaks. Line breaks should be converted to %0A.
So a link should look like this:
mail link

Related

How to you have a pre-set value in a textbox in thymeleaf?

I have the below code snippet of a text box where one enters a mobile number. How do I have a pre-set value that a user can edit from?
For example:
The country code is already set and visible to the user, the user starts by entering their network provider number.
<div class="row">
<div class="col-md-6">
<div th:class="transfer-label"> Mobile Number
</div>
</div>
<div class="col-md-6">
<div class="form-group transfer-field">
<input th:id="msdn"
class="custom-input-normal rounded-input hollow-input-light"
type="text" name="msdn"/>
</div>
</div>
</div>
you can populate input tag with value using th:value attribute.
<input th:value="${variable}"> will render <input value="variablecontent">

Bootstrap formatting is not making sense

I'm VERY new to boot strap. So I figured I would setup a small "form" to see if I could get it to flow and I did an absolute horrible job. I am trying to get things to group into 2's and no more than 5 text boxes per row even in the largest of settings. When I try to set it properly I get TONS of space between the left and right columns.
I tried setting the header but this wrapped strangely and when I tried doing text boxes I got TONS of space between the two columns
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
. I ended up getting something kind of close using
<div class="row">
<div class="input-group text-center">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
But that doesn't seem like its the proper way to handle groups of text boxes and it certainly doesn't get me my grouping that I was looking for. I have set a mockup in jsfiddle from my ASP.net code and it can be found at https://jsfiddle.net/5ckoapng/9/
Any help would be greatly appreciated in understanding what i'm missing here. I'm sure its really stupid but I've spent about 2 hours researching different forms or formatting and couldn't figure this out.
Bootstrap is mobile first - if an element is going to span 12 columns on all resolutions then all you need is the single class:
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Quick Survey for Professional Research!</h3>
</div>
</div>
</div>
To show form elements in groups of 2, then you need to nest columns: http://getbootstrap.com/css/#grid-nesting
For example:
<div class="container">
<div class="row">
<div class="col-xs-12">
<form>
<div class="row">
<div class="col-xs-6">
#form input
</div>
<div class="col-xs-6">
#form input
</div>
</div>
</form>
</div>
</div>
</div>
That way there will be 2x 50% (col-xs-6) width columns nested within the main 100% (col-xs-12) column. I have not added form styling or classes, as these are all readily available in the documentation: http://getbootstrap.com/css/#forms
If you wish to use 5 nested columns, then you can utilise the offset class to push 5x col-xs-2 columns over by 1 so they appear to be centred within the main col-xs-12 column: http://getbootstrap.com/css/#grid-offsetting

How to display complete text when using bootstrap columns?

I have bootstrap columns that has two labels and two inputs From and To, So From input is showing text correct but To input is not showing complete text when i load data dynamically.How can i fix this issue using bootstrap or I have to use css helper class to make it work.
when we use low resolution monitors problems occurs most of the time e.g 1366 x 768
main.html
<div class="col-md-6 fieldHeight">
<div class="form-group">
<label for="issueFromDate" class="col-md-5">Issue Date
Range:</label>
<div class="col-md-7">
<div class="row">
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueFromDate"
name="issueFromDate" id="issueFromDate" disabled />
</div>
<div class="col-md-1">
<label class="control-label padd15"> To:</label>
</div>
<div class="col-md-5 changeWdh">
<input type="text" class="form-control"
ng-model="riskAssessmentDTO.issueToDate" name="issueToDate"
id="issueToDate" disabled />
</div>
</div>
</div>
</div>
</div>
I suggest you read more into the bootstrap grid system. You could use a mix of the different col- classes in order to make sure everything fits on the screen depending on the resolution. See this example:
Zoom and unzoom to see the grid system in action
Also, a date field always contains a maximum amount of characters. Therefore, you could set a min-width to the input

Setting check box to lock after a certain event.

So I am new to coding and am just trying to make a simple background project for something a friend and I thought up. I am using HTML for this just to start.
I want to make a list of checkboxes with the fifty states and a progress bar. Now as you click each state's checkbox the bar fills up and then when you have clicked all fifty then a check box at the top of the screen next to the progress bar is checked and there is a small saying under each saying Congratulations!
If anyone can help me I would be greatly appreciative!
Thank you, Kaxwell.
It is unfortunately not possible to perform all this using only HTML. You can build form etc. with HTML. The logic has to be managed by some other language. I suggest JavaScript in this case. Have a look at W3Schools to start with it.
Good luck
Using bootstrap and JQuery, you could achieve it:
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xs-2">
<input id="ccomplete" class="form-control" type="checkbox" />
</div>
</div>
<div id="main" class="row">
<input class="form-control" type="checkbox" />
</div>
</div>
Here is the JSFiddle demo with the complete code
I encourage you to learn javascript/jquery for such manipulations.
The above demo uses JQuery and Bootstrap frameworks.

Joomla Plugin Back-end Options

I'm new to Joomla programming. I have built a plugin, and it works well. I have just one little annoyance that has been driving me crazy all day. When you go into the back-end to configure the plugin the options are offset by a 180px left margin. I found it was because the options are wrapped in a div with a style="control-group" that has this margin applied.
To better understand the problem the following is condensed version of the output:
<div class="control-group">
<div class="control-label">
<label id="jform_params_group_template_mapping-lbl" for="jform_params_group_template_mapping" class="hasTooltip" title="" data-original-title=""></label>
</div>
<div class="controls">
//This is where my generated code is
<div class="control-group">
<div class="control-label">
<label>Uncategorised</label>
</div>
<div class="controls" style="float:right;margin-right:20%;">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label>Blog</label>
</div>
<div class="controls" style="float:right;margin-right:20%;">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label>TestingTemplate</label>
</div>
<div class="controls" style="float:right;margin-right:20%;">
</div>
</div>
</div>
</div>
As you can see, my controls are all inside a control. I Can't seem to find where the parent Div with the class control-group is coming from. I would prefer my generated content to be there own controls and and not sub div's.
Please let me know what part of the code you will need to look at to help me determine this issue. I feel its a part of the manifest XML, but am to new to Joomla to know.
the config portion of the manifest file is:
<config>
<fields name="params">
<fieldset name="basic">
<field type="fta.mapping" name="group_template_mapping" addfieldpath="/plugins/system/assigntemplatebycategory/fields" description="PLG_SYSTEM_TEMPLATE_ASSIGNER_GROUP_TEMPLATE_MAPPING_DESC" label="PLG_SYSTEM_TEMPLATE_ASSIGNER_GROUP_TEMPLATE_MAPPING_LABEL" default=""/>
</fieldset>
</fields>
</config>
The structure of the configuration file is correct. But quite unusual since the addfieldpath is usually defined in the fields level, not the individual field i.e.
<config>
<fields addfieldpath="/administrator/components/com_littlehelper/elements/" name="params">
I'm not sure if this can be an issue.
Most likely the problem lies with the custom field. To test, simply change the field type to text and see if the non-required indent appears. If so, the custom field output as defined in /plugins/system/assigntemplatebycategory/fields/fta.mapping.php should contain an extra wrapper.
Also try to move the addfieldpath attribute to the fields (and remove it from the field).