I'm trying to embed a form in an email using apps script. I've come across an interesting idea at the bottom of Send form by email and track responses in spreadsheet:
A simple way to do this with little work with regard to the developing a ui and managing the responses, is to create a from using the Google Apps infrastructure, sending yourself the form by email and clicking on show original.
You can then take the embedded code and use in your scrip to send your mails, the response will be recorded in the spreadsheet associated with the form automatically.
Based on this I have created a file 't1.html' as in the screenshot
I have:
var html = HtmlService
.createTemplateFromFile('t1')
.evaluate();
MailApp.sendEmail('me#gmail.com', "Activity Form: ",html);
When I run it I get the following:
Malformed HTML content: <html><body style=3D"font-family: Roboto,Helvetica,Arial,sans-serif; margin
What am I doing wrong ?
edit:
I'm getting the same error but at the end of the file. The body and html tags are red at the bottom but green at the top.
edit2:
I think, I fixed that - but same error, tags at bottom are still red?
edit 3 -- entire form:
<html><body style=3D"font-family: Roboto,Helvetica,Arial,sans-serif; margin=
: 0; padding: 0; height: 100%; width: 100%;"><table border=3D"0" cellpaddin=
g=3D"0" cellspacing=3D"0" style=3D"background-color:rgb(61, 143, 45);" widt=
h=3D"100%" role=3D"presentation"><tbody><tr height=3D"64px"><td style=3D"pa=
dding-left: 24px"><img alt=3D"Google Forms" height=3D"26px" style=3D"displa=
y: inline-block; margin: 0; vertical-align: middle;" width=3D"143px" src=3D=
"https://www.gstatic.com/docs/forms/google_forms_logo_lockup_white_2x.png">=
</td></tr></tbody></table><div style=3D"padding: 24px; background-color:rgb=
(205, 231, 199)"><table align=3D"center" border=3D"0" cellpadding=3D"0" cel=
lspacing=3D"0" style=3D"max-width: 672px; min-width: 154px;" width=3D"100%"=
role=3D"presentation"><tbody><tr><td style=3D"font-size: 13px; line-height=
: 18px; color: #424242; font-weight: 700">Having trouble viewing or submitt=
ing this form?</td></tr><tr height=3D"8px"><td></td></tr><tr><td><table bor=
der=3D"0" cellpadding=3D"0" cellspacing=3D"0" width=3D"100%"><tbody><tr><td=
><a href=3D"https://docs.google.com/forms/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97s=
XZJs91v6ArzwBiwf060x0IDH-SQ/viewform?c=3D0&w=3D1&usp=3Dmail_form_li=
nk" style=3D"border-radius: 3px; box-sizing: border-box; display: inline-bl=
ock; font-size: 13px; font-weight: 700; height: 40px; line-height: 40px; pa=
dding: 0 24px; text-align: center; text-decoration: none; text-transform: u=
ppercase; vertical-align: middle; color: #fff; background-color: rgb(61, 14=
3, 45);" target=3D"_blank" rel=3D"noopener">FILL OUT IN GOOGLE FORMS</a></t=
d></tr></tbody></table></td></tr><tr height=3D"24px"><td></td></tr></tbody>=
</table><div align=3D"center" style=3D"background-color: #fff; border-botto=
m: 1px solid #e0e0e0; margin: 0 auto; max-width: 624px; min-width: 154px; p=
adding: 0 24px;"><table align=3D"center" cellpadding=3D"0" cellspacing=3D"0=
" style=3D"background-color: #fff;" width=3D"100%" role=3D"presentation"><t=
body><tr height=3D"24px"><td></td></tr><tr><td><span style=3D"display: tabl=
e-cell; vertical-align: top; font-size: 13px; line-height: 18px; color: #42=
4242;">I've invited you to fill out a form:</span></td></tr><tr height=
=3D"20px"><td></tr><tr style=3D"font-size: 20px; line-height: 24px;"><td><s=
pan style=3D"display: table-cell;"><a href=3D"https://docs.google.com/forms=
/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/viewform?c=3D=
0&w=3D1&usp=3Dmail_form_link" style=3D"color: rgb(61, 143, 45); tex=
t-decoration: none; vertical-align: middle; font-weight: 500">Document Info=
rmation</a><div itemprop=3D"action" itemscope itemtype=3D"http://schema.org=
/ViewAction"><meta itemprop=3D"url" content=3D"https://docs.google.com/form=
s/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/viewform?c=
=3D0&w=3D1&usp=3Dmail_goto_form"><meta itemprop=3D"name" content=3D=
"Fill out form"></div></span></td></tr><tr height=3D"16px"></tr><tr><td><sp=
an style=3D"display: table-cell; vertical-align: top; font-size: 13px; line=
-height: 18px; color: #424242;">This info will be used on our documents</sp=
an></td></tr><tr height=3D"24px"></tr><tr><td><div class=3D"ss-form" style=
=3D""><form action=3D"https://docs.google.com/forms/u/0/d/e/1FAIpQLSfj58g-8=
7jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/formResponse" method=3D"POST" id=
=3D"ss-form" target=3D"_self" onsubmit=3D"" style=3D""><ol role=3D"list" cl=
ass=3D"ss-question-list" style=3D"padding-left: 0;list-style-type:none;">
<div class=3D"ss-form-question errorbox-good" role=3D"listitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-item-required ss-text" style=3D"margi=
n:12px 0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertic=
al-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_2005620554" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Owner's First Name
<label for=3D"itemView.getDomIdToLabel()" aria-label=3D"(Required field)" s=
tyle=3D""></label>
<span class=3D"ss-required-asterisk" aria-hidden=3D"true" style=3D"color:#c=
43b1d;">*</span></div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.2005620554" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_2005620554" dir=3D"auto" aria-label=3D"Owner's First Na=
me " aria-required=3D"true" title=3D"" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-item-required ss-text" style=3D"margi=
n:12px 0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertic=
al-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_2126206062" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Owner's Last Name
<label for=3D"itemView.getDomIdToLabel()" aria-label=3D"(Required field)" s=
tyle=3D""></label>
<span class=3D"ss-required-asterisk" aria-hidden=3D"true" style=3D"color:#c=
43b1d;">*</span></div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.2126206062" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_2126206062" dir=3D"auto" aria-label=3D"Owner's Last Nam=
e " aria-required=3D"true" title=3D"" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-item-required ss-text" style=3D"margi=
n:12px 0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertic=
al-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_1045781291" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Owner's Street Address
<label for=3D"itemView.getDomIdToLabel()" aria-label=3D"(Required field)" s=
tyle=3D""></label>
<span class=3D"ss-required-asterisk" aria-hidden=3D"true" style=3D"color:#c=
43b1d;">*</span></div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.1045781291" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_1045781291" dir=3D"auto" aria-label=3D"Owner's Street A=
ddress " aria-required=3D"true" title=3D"" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-item-required ss-text" style=3D"margi=
n:12px 0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertic=
al-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_2093621735" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Owner's Town/City
<label for=3D"itemView.getDomIdToLabel()" aria-label=3D"(Required field)" s=
tyle=3D""></label>
<span class=3D"ss-required-asterisk" aria-hidden=3D"true" style=3D"color:#c=
43b1d;">*</span></div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.2093621735" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_2093621735" dir=3D"auto" aria-label=3D"Owner's Town/Cit=
y " aria-required=3D"true" title=3D"" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-item-required ss-text" style=3D"margi=
n:12px 0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertic=
al-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_1159980352" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Owner's State
<label for=3D"itemView.getDomIdToLabel()" aria-label=3D"(Required field)" s=
tyle=3D""></label>
<span class=3D"ss-required-asterisk" aria-hidden=3D"true" style=3D"color:#c=
43b1d;">*</span></div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.1159980352" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_1159980352" dir=3D"auto" aria-label=3D"Owner's State "=
aria-required=3D"true" title=3D"" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-item-required ss-text" style=3D"margi=
n:12px 0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertic=
al-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_97849368" style=3D""><div cla=
ss=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83em;=
margin-bottom:.83em;">Owner's Zip=20
<label for=3D"itemView.getDomIdToLabel()" aria-label=3D"(Required field)" s=
tyle=3D""></label>
<span class=3D"ss-required-asterisk" aria-hidden=3D"true" style=3D"color:#c=
43b1d;">*</span></div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"number" name=3D"entry.97849368" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_97849368" dir=3D"auto" aria-label=3D"Owner's Zip Must=
be a number" aria-required=3D"true" title=3D"Must be a number" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-paragraph-text" style=3D"margin:12px=
0;"><div class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertical-ali=
gn:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_1065046570" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Property Legal Description
</div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<textarea name=3D"entry.1065046570" rows=3D"8" cols=3D"0" class=3D"ss-q-lon=
g" id=3D"entry_1065046570" dir=3D"auto" aria-label=3D"Property Legal Descri=
ption " style=3D"resize:vertical;width:70%;"></textarea>
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-text" style=3D"margin:12px 0;"><div =
class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertical-align:middle;=
margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_205266861" style=3D""><div cl=
ass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83em=
;margin-bottom:.83em;">Property Account Number
</div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.205266861" value=3D"" class=3D"ss-q-shor=
t" id=3D"entry_205266861" dir=3D"auto" aria-label=3D"Property Account Numbe=
r " title=3D"" style=3D"">
</div></div></div> <div class=3D"ss-form-question errorbox-good" role=3D"li=
stitem" style=3D"">
<div dir=3D"auto" class=3D"ss-item ss-text" style=3D"margin:12px 0;"><div =
class=3D"ss-form-entry" style=3D"margin-bottom:1.5em;vertical-align:middle;=
margin-left:0;margin-top:0;max-width:100%;">
<label class=3D"ss-q-item-label" for=3D"entry_1714605862" style=3D""><div c=
lass=3D"ss-q-title" style=3D"display:block;font-weight:bold;margin-top:.83e=
m;margin-bottom:.83em;">Property Address
</div>
<div class=3D"ss-q-help ss-secondary-text" dir=3D"auto" style=3D"display:bl=
ock;margin:.1em 0 .25em 0;color:#666;"></div></label>
<input type=3D"text" name=3D"entry.1714605862" value=3D"" class=3D"ss-q-sho=
rt" id=3D"entry_1714605862" dir=3D"auto" aria-label=3D"Property Address " =
title=3D"" style=3D"">
</div></div></div>
<input type=3D"hidden" name=3D"draftResponse" value=3D"[null,null,"883=
0551375159526782"]
" style=3D"">
<input type=3D"hidden" name=3D"pageHistory" value=3D"0" style=3D"">
<input type=3D"hidden" name=3D"usp" value=3D"mail_form_submit" style=3D"">
<input type=3D"hidden" name=3D"fbzx" value=3D"8830551375159526782" style=3D=
"">
<div class=3D"ss-item ss-navigate" style=3D"margin:12px 0;"><table id=3D"na=
vigation-table" style=3D""><tbody><tr><td class=3D"ss-form-entry goog-inlin=
e-block" id=3D"navigation-buttons" dir=3D"ltr" style=3D"margin-bottom:1.5em=
;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;position:r=
elative;display:inline-block;">
<input type=3D"submit" name=3D"submit" value=3D"Submit" id=3D"ss-submit" cl=
ass=3D"jfk-button jfk-button-action " style=3D"">
<div class=3D"ss-password-warning ss-secondary-text" style=3D"color:#666;">=
Never submit passwords through Google Forms.</div></td>
</tr></tbody></table></div></ol></form></div>
<div class=3D"ss-footer" style=3D""><div class=3D"ss-attribution" style=3D"=
"></div>
<div class=3D"ss-legal" style=3D""><div class=3D"disclaimer-separator" styl=
e=3D""></div>
<div class=3D"disclaimer" dir=3D"ltr" style=3D""><div class=3D"powered-by-l=
ogo" style=3D"margin-top:2em;"><span class=3D"powered-by-text" style=3D"">P=
owered by</span>
<a href=3D"https://www.google.com/forms/about/?utm_source=3Dproduct&utm=
_medium=3Dforms_logo&utm_campaign=3Dforms" style=3D""><div class=3D"ss-=
logo-container" style=3D""><img src=3D"https://ssl.gstatic.com/docs/forms/f=
orms_logo_2_small_dark_2x.png" height=3D"21px" width=3D"108px" alt=3D"Googl=
e Forms" style=3D""></div></a></div>
<div class=3D"ss-terms" style=3D"color:#777;font-size:11px;margin-top:1.5em=
;"><span class=3D"disclaimer-msg" style=3D"">This content is neither create=
d nor endorsed by Google.</span>
<br>
<a href=3D"https://docs.google.com/forms/u/0/d/e/1FAIpQLSfj58g-87jOhRZfaFjK=
97sXZJs91v6ArzwBiwf060x0IDH-SQ/reportabuse?source=3Dhttps://docs.google.com=
/forms/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/viewfor=
m?sid%3D2b7fc9792dfd5e0b%26c%3D0%26w%3D1%26token%3DI_Y1xl4BAAA.glSNAM2muxH-=
ZfYW-H1nuw.UAuDr1pX_XDohsgv8ZiNdg" style=3D"">Report Abuse</a>
-
<a href=3D"http://www.google.com/accounts/TOS" style=3D"">Terms of Service<=
/a>
-
<a href=3D"http://www.google.com/google-d-s/terms.html" style=3D"">Addition=
al Terms</a></div></div></div></div>
</td></tr><tr height=3D"24px"></tr></tbody></table></div><table align=3D"ce=
nter" cellpadding=3D"0" cellspacing=3D"0" style=3D"max-width: 672px; min-wi=
dth: 154px;" width=3D"100%" role=3D"presentation"><tbody><tr height=3D"24px=
"><td></td></tr><tr><td><a href=3D"https://docs.google.com/forms?usp=3Dmail=
_form_link" style=3D"color: #616161; font-size: 13px;">Create your own Goog=
le Form</a></td></tr></tbody></table></div></body></html>
Formatted but to mutch parsing error sometime the script add the /n or /r with = before and more 3D ...
<html>
<body style="font-family: Roboto,Helvetica,Arial,sans-serif; margin: 0; padding: 0; height: 100%; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="background-color:rgb(61, 143, 45);" width="100%" role="presentation">
<tbody>
<tr height="64px">
<td style="padding-left: 24px">
<img alt="Google Forms" height="26px" style="display: inline-block; margin: 0; vertical-align: middle;" width="143px" src="https://www.gstatic.com/docs/forms/google_forms_logo_lockup_white_2x.png">
</td>
</tr>
</tbody>
</table>
<div style="padding: 24px; background-color:rgb(205, 231, 199)">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width: 672px; min-width: 154px;" width="100%" role="presentation">
<tbody>
<tr>
<td style="font-size: 13px; line-height: 18px; color: #424242; font-weight: 700">
Having trouble viewing or submitting this form?
</td>
</tr>
<tr height="8px">
<td></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/viewform?c=0&w=1&usp=mail_form_link" style="border-radius: 3px; box-sizing: border-box; display: inline-block; font-size: 13px; font-weight: 700; height: 40px; line-height: 40px; padding: 0 24px; text-align: center; text-decoration: none; text-transform: uppercase; vertical-align: middle; color: #fff; background-color: rgb(61, 143, 45);" target="_blank" rel="noopener">
FILL OUT IN GOOGLE FORMS
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height="24px">
<td></td>
</tr>
</tbody>
=
</table>
<div align="center" style="background-color: #fff; border-bottom: 1px solid #e0e0e0; margin: 0 auto; max-width: 624px; min-width: 154px; padding: 0 24px;">
<table align="center" cellpadding="0" cellspacing="0" style="background-color: #fff;" width="100%" role="presentation">
<tbody>
<tr height="24px">
<td></td>
</tr>
<tr>
<td>
<span style="display: table-cell; vertical-align: top; font-size: 13px; line-height: 18px; color: #424242;">
I've invited you to fill out a form:
</span>
</td>
</tr>
<tr height="20px">
<td></td>
</tr>
<tr style="font-size: 20px; line-height: 24px;">
<td>
<span style="display: table-cell;">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/viewform?c==
0&w=1&usp=mail_form_link" style="color: rgb(61, 143, 45); text-decoration: none; vertical-align: middle; font-weight: 500">
Document Information
</a>
<div itemprop="action" itemscope itemtype="http://schema.org=
/ViewAction">
<meta itemprop="url" content="https://docs.google.com/forms/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/viewform?c=
=0&w=1&usp=mail_goto_form">
<meta itemprop="name" content="Fill out form">
</div>
</span>
</td>
</tr>
<tr height="16px"></tr>
<tr>
<td>
<span style="display: table-cell; vertical-align: top; font-size: 13px; line-height: 18px; color: #424242;">
This info will be used on our documents
</span>
</td>
</tr>
<tr height="24px"></tr>
<tr>
<td>
<div class="ss-form" style="">
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSfj58g-87jOhRZfaFjK97sXZJs91v6ArzwBiwf060x0IDH-SQ/formResponse" method="POST" id="ss-form" target="_self" onsubmit="" style="">
<ol role="list" class="ss-question-list" style="padding-left: 0;list-style-type:none;">
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-item-required ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_2005620554" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">
Owner's First Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)" style=""></label>
<span class="ss-required-asterisk" aria-hidden="true" style="color:#c43b1d;">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.2005620554" value="" class="ss-q-short" id="entry_2005620554" dir="auto" aria-label="Owner's First Name " aria-required="true" title="" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-item-required ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_2126206062" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">
Owner's Last Name
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)" style=""></label>
<span class="ss-required-asterisk" aria-hidden="true" style="color:#c43b1d;">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.2126206062" value="" class="ss-q-short" id="entry_2126206062" dir="auto" aria-label="Owner's Last Name " aria-required="true" title="" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-item-required ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_1045781291" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">Owner's Street Address
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)" style=""></label>
<span class="ss-required-asterisk" aria-hidden="true" style="color:#c43b1d;">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.1045781291" value="" class="ss-q-short" id="entry_1045781291" dir="auto" aria-label="Owner's Street Address " aria-required="true" title="" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-item-required ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_2093621735" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">
Owner's Town/City
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)" style=""></label>
<span class="ss-required-asterisk" aria-hidden="true" style="color:#c43b1d;">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.2093621735" value="" class="ss-q-short" id="entry_2093621735" dir="auto" aria-label="Owner's Town/Cit=
y " aria-required="true" title="" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-item-required ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_1159980352" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">
Owner's State
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)" style=""></label>
<span class="ss-required-asterisk" aria-hidden="true" style="color:#c43b1d;">*</span></div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.1159980352" value="" class="ss-q-short" id="entry_1159980352" dir="auto" aria-label="Owner's State"aria-required="true" title="" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-item-required ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_97849368" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">
Owner's Zip=20
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)" style=""></label>
<span class="ss-required-asterisk" aria-hidden="true" style="color:#c43b1d;">*</span>
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="number" name="entry.97849368" value="" class="ss-q-short" id="entry_97849368" dir="auto" aria-label="Owner's Zip Must=
be a number" aria-required="true" title="Must be a number" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-paragraph-text" style="margin:12px=
0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_1065046570" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">Property Legal Description
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<textarea name="entry.1065046570" rows="8" cols="0" class="ss-q-long" id="entry_1065046570" dir="auto" aria-label="Property Legal Description " style="resize:vertical;width:70%;"></textarea>
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_205266861" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">Property Account Number
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.205266861" value="" class="ss-q-short" id="entry_205266861" dir="auto" aria-label="Property Account Number " title="" style="">
</div>
</div>
</div>
<div class="ss-form-question errorbox-good" role="listitem" style="">
<div dir="auto" class="ss-item ss-text" style="margin:12px 0;">
<div class="ss-form-entry" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;">
<label class="ss-q-item-label" for="entry_1714605862" style="">
<div class="ss-q-title" style="display:block;font-weight:bold;margin-top:.83em;margin-bottom:.83em;">Property Address
</div>
<div class="ss-q-help ss-secondary-text" dir="auto" style="display:block;margin:.1em 0 .25em 0;color:#666;"></div>
</label>
<input type="text" name="entry.1714605862" value="" class="ss-q-short" id="entry_1714605862" dir="auto" aria-label="Property Address " title="" style="">
</div>
</div>
</div>
<input type="hidden" name="draftResponse" value="[null,null,"8830551375159526782"]" style="">
<input type="hidden" name="pageHistory" value="0" style="">
<input type="hidden" name="usp" value="mail_form_submit" style="">
<input type="hidden" name="fbzx" value="8830551375159526782" style="">
<div class="ss-item ss-navigate" style="margin:12px 0;">
<table id="navigation-table" style="">
<tbody>
<tr>
<td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr" style="margin-bottom:1.5em;vertical-align:middle;margin-left:0;margin-top:0;max-width:100%;position:relative;display:inline-block;">
<input type="submit" name="submit" value="Submit" id="ss-submit" class="jfk-button jfk-button-action " style="">
<div class="ss-password-warning ss-secondary-text" style="color:#666;">
Never submit passwords through Google Forms.
</div>
</td>
</tr>
</tbody>
</table>
</div>
</ol>
</form>
</div>
<div class="ss-footer" style="">
<div class="ss-attribution" style=""></div>
<div class="ss-legal" style="">
<div class="disclaimer-separator" style=""></div>
<div class="disclaimer" dir="ltr" style="">
<div class="powered-by-logo" style="margin-top:2em;">
<span class="powered-by-text" style="">Powered by</span>
<a href="https://www.google.com/forms/about/?utm_source=product&utm_medium=forms_logo&utm_campaign=forms" style="">
<div class="ss-logo-container" style=""><img src="https://ssl.gstatic.com/docs/forms/forms_logo_2_small_dark_2x.png" height="21px" width="108px" alt="Google Forms" style=""></div>
</a>
</div>
<div class="ss-terms" style="color:#777;font-size:11px;margin-top:1.5em;"><span class="disclaimer-msg" style="">
This content is neither created nor endorsed by Google.</span>
<br>
Report Abuse
Terms of Service
Additional Terms
</div>
</div>
</div>
</div>
</td>
</tr>
<tr height="24px"></tr>
</tbody>
</table>
</div>
<table align="center" cellpadding="0" cellspacing="0" style="max-width: 672px; min-width: 154px;" width="100%" role="presentation">
<tbody>
<tr height="24px">
<td></td>
</tr>
<tr>
<td>Create your own Google Form
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Just to complete this question , the template above is correct and links to a sheet. I changed my code to :
function buildFollowUpForm() {
var html = doGet();
MailApp.sendEmail({
to: 'me#gmail.com',
subject: 'hi',
htmlBody: html
});
}
function doGet() {
var template = HtmlService.createTemplateFromFile('t1');
var app = template.evaluate().getContent();
return app;
}
Related
I have popup component in which I want to insert form validation on input element for name (required field and minlength 3 characters).
Is is possible to do it without setting up complete code in form tag?
<div class="scenario-div">
<label style="font-size: 1.4rem; font-weight: 400; margin-bottom: 10px;">{{context.header}}</label>
<div class="" style="width: 90%; margin-bottom: 10px; align-self: center;">
<div style="display: flex; flex-direction: column; margin-bottom: 10px;">
<label style="font-size: 1.2rem; font-weight: 500;">Name</label>
<div style="display:flex; flex-direction:row;">
<input type="text" [(ngModel)]="context.name" placeholder="enter Name" style="color: #569bd2; margin: 0px; width: 50%" minlength="3" required/>
<select *ngIf="context.showOptionDropdown" class="custom-select-project" style="width:50%" #optionSelect (change)="context.option.value">
<option disabled>Select type</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
</div>
</div>
<div style="display: flex; flex-direction: column; margin-bottom: 10px;" *ngIf="!context.hideDescription">
<label style="font-size: 1.2rem; font-weight: 400;">Description</label>
<textarea rows="4" [(ngModel)]="context.description" cols="50" maxlength="250" placeholder="Enter text here" style="color: #569bd2; resize: none; font-weight: 400; font-size: 1.2rem;"></textarea>
</div>
</div>
<div>
<button class="btn-main" (click)="confirm(context)" style="width: 15%;">Confirm</button>
</div>
'Validation' based on ngModel
<input type="text" required name="title" [(ngModel)]="titleModel">
<span style="color:red" *ngIf="titleModel?.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!titleModel">
required
</span>
<button [disabled]="titleModel?.length > 10 || !titleModel">OK</button>
DEMO
'Validation' based on local template variable:
<input type="text" (keyup)='0' #title>
<span style="color:red" *ngIf="title.value.length > 10">
10 max
</span>
<span style="color:red" *ngIf="!title.value">
required
</span>
<button [disabled]="title.value.length > 10 || !title.value">OK</button>
DEMO
You need to use FormControl from the reactive forms API, which can be used with a standalone <input> that's not wrapped into a <form> tag.
Component({
...
template: `<input type="text" [formControl]="name">`
})
class MyComponent {
name = new FormControl('',
[Validators.required, Validators.minLength(3)]);
}
I was creating a bootstrap website as a challenge when I encountered a problem which I can't find a fix for.
In the jumbotron I have a form with a textfield and a submit button.
The textfield also has an addon (input-group-addon)
Without any images The addon is placed perfectly where it should be but When I add an image the Addon moves away a pixel from the text field.
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
Bootstrap 4, still in beta release, applies a highly-transparent border for the .form-control class. Your example highlights how this may produce unexpected results when using an input element against a container with a dark background. Bootstrap 4's default style is this:
.form-control {
border-color: rgba(0, 0, 0, 0.15);
}
That's a black border with near-maximum transparency. Rendering that over a dark background will not achieve the expected look, as you've discovered.
I've appended a custom class to override Bootstrap 4's default border-color for the .form-control class. Applied to your example, it's in effect only when the class .bg has also been applied to the jumbotron.
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
.bg {
background-image: url("http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg");
text-align: center;
color: white;
}
.jumbotron form {
text-align: none;
}
.jumbotron hr {
background-color: white;
}
.bg .form-control.solid-gray-border {
border-color: rgb(222,222,222);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<body style="position: relative;" data-spy="scroll" data-target="#navBar">
<nav id="navBar" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">My App</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron bg">
<h1 class="display-3">My Amazing App!</h1>
<p class="lead">The MAIN reason for YOU to download THIS app on your handheld Android or iOS device.</p>
<hr class="my-4">
<p class="lead">Want to learn more ? Join our Mailing List and get a free bonus.</p>
<form class="form-inline justify-content-center">
<label class="sr-only" for="email">Email</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">#</div>
<input style="width: 350px;" type="email" class="form-control solid-gray-border" id="email" placeholder="Your Email">
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
I'm creating an application with list of employees. An admin can see the list of employees and change their data. When he clicks "change" button, html form should be filled with chosen employee data so he could change it. I used standard mechanism in play framework but it doesn't work. I was debugging it and everything looks ok (employee data is set to form) but it doesn't display on my html form... I have no idea why...
def loadEmployee(id: Int) = Action { implicit request =>
val loadedEmployee = EmployeeService.getEmployee(id)
val employee = Await.result(loadedEmployee, Duration(5, SECONDS)).get
val employees = Await.result(EmployeeService.listAllEmployees, Duration(5, SECONDS))
val form = EmployeeForm.form.fill(EmployeeFormData(employee.name, employee.additionalInformation, employee.resume))
Ok(views.html.index(form,employees))
}
View file:
#(employeeForm: Form[models.EmployeeFormData],employees : Seq[models.Employee])
#main() {
<form id="employee-data-form" role="form" action='#routes.ApplicationController.addInformation()' method="post" class="form-horizontal" align="center" autocomplete="off">
<fieldset class="employee-fieldset">
<div class="employee-form">
<label class="form-title" style="color: #F8741B; font-size: 22px;font-weight: bold; text-decoration:none">title</label>
</div>
<br/>
<table align="center" cellspacing="20">
<tr>
<td align="left">
<div class="employee-form" id="name_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>name</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="name_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td align="left">
<div class="employee-form" id="additionalInformation_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>Additional information</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="additionalInformation_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<textarea rows="4" cols="50" id="additionalInformation" name="additionalInformation" value="" class="form-control input-lg" required></textarea>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td align="left">
<div class="employee-form" id="resume_field_label">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<strong>resume</strong> :
</div>
</div>
</div>
</td>
<td align="center">
<div class="employee-form" id="resume_field_value">
<div class="controls col-xs-offset-3 col-xs-9">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<textarea rows="4" cols="50" id="resume" name="resume" class="form-control input-lg" required></textarea>
</div>
</div>
</div>
</td>
</tr>
</table>
<br/>
<div class="form-actions controls ynt-btn-xlarge">
<button type="submit" class="btn btn-primary ynt-btn-orange">Add</button>
</div>
</fieldset>
</form>
<div class="employee-display" >
<fieldset>
<legend align="center"><h3>Registered Employees</h3></legend>
<table cellspacing="20">
<tr>
<th>employeeid</th>
<th>firstname</th>
<th>lastname</th>
<th>resume</th>
</tr>
#for(employee <- employees){
<tr>
<td>#employee.id</td>
<td>#employee.name</td>
<td>#employee.additionalInformation</td>
<td>#employee.resume</td>
<td>delete</td>
<td>loadEmployee</td>
</tr>
}
</table>
</fieldset>
</div>
}
Your controller code looks OK - you're filling a Form[EmployeeFormData] and passing it to your template. The trouble is, you never use your employeeForm inside the template - there's no way that form can be populated.
If you read up on the Play documentation for showing forms in a view template you'll see that there is a whole family of helpers available for this purpose. In many cases, they are almost as easy to write as the "plain HTML" version such as you've used. Here's an example:
Where you had:
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
<input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>
You will need:
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
#helper.inputText(
employeeForm("name"),
'id -> "name",
'placeholder -> "First Name",
'class -> "form-control input-lg",
'required -> "true"
)
</div>
Notice how you can pass any number of arbitrary arguments into the generated HTML by prefixing with the ' character. This can be very handy, for example if you would like to set extra data- attributes on the input.
I can't vertically center input form in table using Twitter Bootstrap. I've found solution on the stack but it works only with plain text, doesn't work with input form (class vert-align). Do you have any suggestions?
JSFiddle
<table class="table table-striped">
<tr>
<th>
#
</th>
<th>
<i class="glyphicon glyphicon-check"></i>
</th>
<th>
Item#1
</th>
<th>
Item#2
</th>
</tr>
<div class="row">
<tr>
<div class="col-md-2">
<td class="vert-align">
1
</td>
</div>
<div class="col-md-2">
<td class="vert-align">
<input type="checkbox">
</td>
</div>
<div class="col-md-4">
<td class="vert-align">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
<div class="col-md-4">
<td class="vert-align">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-refresh"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
</tr>
</div>
<div class="row">
<tr>
<div class="col-md-2">
<td class="vert-align">
2
</td>
</div>
<div class="col-md-2">
<td class="vert-align">
<input type="checkbox">
</td>
</div>
<div class="col-md-4">
<td>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
<div class="col-md-4">
<td>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-refresh"></i></span><input type="text" class="form-control" placeholder="...">
</div>
</div>
</td>
</div>
</tr>
</div>
</table>
and css
.datepicker.dropdown-menu {
z-index: 1151;
}
.table tbody>tr>td.vert-align {
vertical-align: middle;
}
Anyone who can explain how this would be done in bootstrap?
First try was with 2 inline forms, but then the search button screws it up...
So i was thinking on a combination of an inline and a horizontal form.
Any ideas how to do this?
My guess here is that you want to do this with as much bootstrap markup as possible and as little custom styling as possible, and in that case I would do it like so:
HTML:
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal">
<div class="row">
<div class="col-sm-10">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="search" class="col-sm-2 control-label">Find</label>
<div class="col-sm-10">
<input type="search" class="form-control" placeholder="What are you searching for?"/>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">in</label>
<div class="col-sm-10">
<input type="number" class="form-control" placeholder="Postcode"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">under</label>
<div class="col-sm-10">
<select class="form-control">
<option>All categories</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
<option>Category 5</option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<select class="form-control">
<option>Within 20 miles of</option>
<option>Within 30 miles of</option>
<option>Within 40 miles of</option>
<option>Within 50 miles of</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-2 cover-col">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-search"></i> Search</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
CSS:
.panel-default {
background-color: #e6ed9f;
}
.cover-col {
height: 6em;
}
.cover-col .btn {
display: block;
width: 100%;
height: 100%;
padding-left: 15px;
padding-right: 15px;
}
.cover-col .form-group {
height: 100%;
margin-bottom: 0;
}
.cover-col .form-group > div {
height: 100%;
}
JSFIDDLE