I was trying to embed a sign up form in my wordpress website. what i did is like this: i went to the wordpress editor for that page and choose the option to add raw html code. Then pasted the below code:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://luisaspagnolistanford.us3.list-manage.com/subscribe/post?u=3b43aec3c5c107948b570c43d&id=b67bd69928" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Get notified about events and sales</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3b43aec3c5c107948b570c43d_b67bd69928" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Then the design is coming fine and i can see all the code is there from inspect element option of chrome but when clicked the submit button it doesnt do anything and also there is no error. I am just wondering whats wrong here.
target="_blank" this means that form response opens up in a new tab. Look for the tab.
You have a script in your core-scripts.js file that's preventing default behavior. Remove it.
$( "#mc-embedded-subscribe-form" ).submit(function( e ){
var $this = $(this);
e.preventDefault();
Related
I am having a sign up form which is a raw HTML with stripe integration, Now i want to integrate a mail chimp into it.I have placed a code
<p>
<label>
<input type="checkbox" name="mc4wp-subscribe" value="1" />
Subscribe to our newsletter. </label>
</p>
in my html page. I am not getting the subscribers list in the admin pannel.
login to your MailChimp account then manage contacts-> group then create there a group with checkbox after then go to signup forms and embed code will show the check box edit the code under then forms tag like below
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//dada.us14.list-manage.com/subscribe/post?u=804ce11ffe4a5684c85f88d38&id=d5ab97dfc9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="checkbox" value="1" name="group[4917][1]" id="mce-group[4917]-4917-0"><label for="mce-group[4917]-4917-0">Subscribe to our mailing list</label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_804ce11ffe4a5684c85f88d38_d5ab97dfc9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I'm using bootstrap 3 along with angularjs (with angular for bootstrap) for an html5 application running on google apps script.
I expected Bootstrap to be responsive by default, but for my surprise a very simple form is remaining small on my mobile device. Text, buttons and input fields are so small that they are almost unusable. I'm writting some CSS rules for mobile screens, but I'm not sure if I should. Maybe I'm doing something wrong?
Here is the form. I have removed some extra stuff to make it simple, but bootstrap makes any single form a big monster:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<!-- BOOTSTRAP CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<base target="_top">
<?!= include('css'); ?>
</head>
<body ng-app='Gestor'>
<div class="container-fluid" ng-controller="ExampleController">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-8 col-lg-4">
<fieldset class="form-group">
<label for="Concepto" class="col-md-4">Concepto:</label>
<div class="col-md-8 text-left"><input type="text" ng-model="data.concepto" class="form-control"></div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="pvp" >Precio:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',-5)">-5</a>
<input type="number" ng-model="data.pvp" class="form-control">
<div class="input-group-addon">€</div>
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('pvp',5)">+5</a>
</div>
</div>
<label class="col-md-4 " for="cantidad">Cantidad:</label>
<div class="col-md-8">
<div class="input-group">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',-5)">-5</a>
<input type="number" ng-model="data.cantidad" class="form-control">
<a class="input-group-addon btn btn-default" role="button" ng-click="increase('cantidad',5)">+5</a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-6 col-lg-4">
<fieldset class="form-group">
<label class="col-md-4" for="Category">Categoría:</label>
<div class="col-md-8">
<select ng-model="data.category" class="form-control form-control-lg" ng-options="option for option in formValues.availableOptions" ></select>
</div>
<label class="col-md-4" for="Fecha">Fecha:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="data.fecha" is-open="datepicker.opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"> </i></button></span>
</div>
</div>
</fieldset>
</div>
<div class="col-md-12">
<fieldset class="form-group">
<button ng-click="formValues.submitStatus ===0 ? submit() : reset()" class="btn" ng-class="{'btn-primary':(formValues.submitStatus===0),'btn-success':(formValues.submitStatus===1),'btn-danger':(formValues.submitStatus<0)}" type="submit">{{formValues.submitStatus===0 ? 'Register' : 'Reset'}}</button>
</fieldset>
</div>
</div>
</form>
</div>
<!-- MAIN APP CODE -->
<?!= include('app.js'); ?>
</body>
</html>
EDIT:
Here is an image that shows what I want to achieve. As you can see, input and label elements are quite big, but that is because the custom CSS styles that I made. I expected this to be automatic on Bootstrap. If you take a look at the bottom, you can see a very small button, that is how the entire form is displayed without my custom styles.
[.. Removed image ..]
EDIT2:
Here is another screenshot added. This time is a much simpler form, which was directly taken from here:
http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=vertical-form-layout
As you can see, it looks awful
EDIT3:
I have added the tag google apps script, because it should be a problem with how google apps scripts serves the webpage on the Iframe. I have updated the plunk provided by #Satej to make it work properly with angular, but it works exactly as I expected:
http://plnkr.co/edit/Ze4DEQDxr3Hd8SVtdifZ?p=preview
I have opened the plunker on my mobile device, and it works flawlessly, no issues so far as you can see on the following screenshot:
So the question is, what does google apps script when it serves the HTML file to make it display so small?
Finally I got the solution.
The problem was the view-port meta tag. It was being removed by CAJA, or whatever sanitization is applied to IFRAME mode.
There was a bug about this, where people pointed this exact problem:
https://code.google.com/p/google-apps-script-issues/issues/detail?id=4659
And on that same thread, someone linked to a solution:
https://plus.google.com/+MarcoColomboMow/posts/GXgRCh98HTu
Finally, it was just a matter of adding the following to the html template when serving it (on the doGet function)
return t.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).addMetaTag('viewport', 'width=device-width, initial-scale=1');
You are doing something wrong.
You have to explicity state the styling for small and extra small screens if you want them to take a particular column size.
This is done by using the col-sm-* and col-xs-* classes.
My Grails (2.4.2) app has a simple form on one of its GSPs, that uses Bootstrap for styling:
<!DOCTYPE html>
<html>
<head>
<!-- Head omitted for brevity. -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h1 class="strong-primary">Sign in to continue to MyApp.</h1>
</div>
<div class="col-md-4 text-center">
<form role="form">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<button type="submit" class="btn form-control btn-lg btn-success">Sign in</button>
<div class="form-group" style="text-align: left;">Need help?</div>
</form>
</div>
</div>
</div>
</body>
</html>
When the user clicks the "Sign in" button, the FizzController#signin() action should be executed. I am tempted to change the GSP form to something like:
<g:form controller="fizz" action="signin">
<div class="form-group">
<input type="email" class="form-control" id="signin-email" placeholder="Your email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="signin-password" placeholder="Password">
</div>
<g:submitButton name="submit" value="Sign in" />
<div class="form-group" style="text-align: left;">Need help?</div>
</g:form>
But then I lose the form role="form" declaration and the styling (btn form-control btn-lg btn-success) classes on the button.
How can I merge <g:form> and <g:submitButton> with my Bootstrap stylings?
There is nothing keeping you from adding additional attributes and values to the output from the standard <g:> tag library.
For example:
<g:form controller="fizz" action="signin" role="form" class="someClass">
The above will include the two additional attributes role and class as they appear. This holds true for almost all (if not all) of the standard tags in Grails.
If you want to look and see how this is actually implemented in the outputAttributes, you can review the source code for the built in forms tag library.
Applying styles to a dynamically generated page can be difficult coming from styling static HTML pages. A problem I ran into was correctly applying styles to my rendered templates in Grails. If your project uses a rendered template to display a form remember to apply the Bootstrap .form class to the parent view's <g:form> tag as noted in #Joshua Moore's answer.
Styles would look similar to:
<g:form id='myId' class='form-horizontal'>
<g:render template='myFormTemplate' model='yourModelInformationHere'/>
</g:form>
Done this way, the .form-group class can be used on the underlying template and since the .form-horizontal class is declared already the rendered page will be correct.
I'm taking my first steps in jQuery Mobile and I'm getting a bit disappointed with the lack of customization it provides...
As an example, I have a simple form and I'd like to customize the layout of the form components.
This is my code:
<form id="loginForm" action="#" method="post">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
<a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</form>
See the fiddle.
Concretely I'd like:
The rememberMe checkbox to be as wide as the text inside, and the info button to be inline with the checkbox.
The "group" containing the previous checkbox and button to be aligned to the right.
The submit button to be to the right as well.
Please provide an example of how such things can be achieved...
EDIT: I'd like something like this:
Customization you require will not come from jQM but from custom css.
Usually this could be easily done with jQuery Mobile grids but they are not that flexible. So you need a custom solution.
A div around every element is needed because jQM recreates every element with new style and unless we have a parent div everything will go to hell.
Working example: http://jsfiddle.net/Gajotres/8NB22/
HTML :
<form id="loginForm" action="..." method="post">
<div class="row">
<div class="inline-mid">
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
</div>
<div class="inline-left">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
</div>
</div>
<div class="row">
<div class="inline-left">
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</div>
</form>
CSS :
.row {
min-width: 400px;
width: 400px;
}
.inline-left, .inline-mid , .row {
position: relative;
float: right;
}
.inline-mid {
margin-left: 10px;
padding-top: 5px;
}
This can be achieved using ui-grid classes.
Working Demo
Markup
<form id="loginForm" action="..." method="post">
<div class=ui-grid-a>
<div class=ui-block-a>
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe" data-inline="true">Remember me in this computer</label>
</div>
<div class=ui-block-b>
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
</div>
</div>
<div class=ui-grid-solo>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</form>
Override CSS
.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }
Layout should never be primarily the responsibility of Javascript code, as such you shouldn't blame jQuery Mobile for this.
Customization for different screen sizes should be done with CSS Media Queries instead, click the link for more examples than you'll ever need.
The docs specify to use the template {{> loginButtons}} to implement the default login buttons.
What is the best way to apply my own styles to this?
Rewrite a new template (how would this be done?)
Add styles to my CSS files marked !important
Other?
It turns out a combination of the two ideas can be used. After delving into the accounts-ui package, it turns out that it contains only one .less file. The actual template is included in accounts-ui-unstyled, which is automatically included when accounts-ui is added to a meteor project.
Hence, the CSS can be removed as follows:
meteor remove accounts-ui
meteor add accounts-ui-unstyled
You are then left with the raw HTML, which can be styled as you choose.
Creating your own templates would definitely give you more control.
You create a template by using the "template" tag:
<template name="player">
<div class="player {{selected}}">
<span class="name">{{name}}</span>
<span class="score">{{score}}</span>
<span class="wins"> {{wins}} </span>
<span class="losses"> {{loss}} </span>
</div>
</template>
OR You can check the "classes" or the "id" of the login buttons after they are rendered on a webpage, using "Inspect Element" on Chrome, And the use those classes as CSS selectors to style them accordingly.
For example:
HTML:
//The login button has a class of loginButton
<button class="loginButton"> Login! </button>
CSS:
#Then you can Have a style for the login button as:
.loginButton{
width: 100px;
background-color: cyan;
}
Create your own html template similar to this below. Style it to your taste.
meteor add accounts-password accounts-ui
<template name="login">
<form class="login-form">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Login</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email address">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-danger btn-lg">Login</button>
</div>
</div>
</form>
</template>
You can now call Meteor.loginWithPassword in the template event like so:
Template.login.events({
'submit .login-form': function(e) {
e.preventDefault();
var email = e.target.email.value;
var password = e.target.password.value;
Meteor.loginWithPassword(email, password,function(error){
if(error) {
//do something if error occurred or
}else{
FlowRouter.go('/');
}
});
}
});
You can create another form for registration as well.
Just call Accounts.createUser(object, callback);