Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <form accept-charset="UTF-8" action="" class="form" id="pardot-form" method="post" name="pardot-form">
		<style type="text/css">
		form.form p label { color: #000000; float: none; text-align: left; line-height: 1em; width: auto; }
		form.form p.submit { margin-left: 5px; }
		form.form p.no-label { margin-left: 50px; }
		form.form span.value { margin-left: 0px; }
		form.form p span.description { margin-left: 0px; }
		form.form p.required label, form.form span.required label { background-position: top left; background: none; padding-left: 0px; }
		form.form .pd-radio:after { content: " "; display: table; clear: both; }
		form.form .pd-radio { *zoom: 1; }
		form.form .pd-radio .value span { float: left !important; }
		</style>
		<p class="form-field form-col-1 first_name pd-text required required-custom"><label class="field-label" for="93172_108787pi_93172_108787">First Name *</label> <input class="text" id="93172_108787pi_93172_108787" maxlength="40" name="93172_108787pi_93172_108787" onchange="" onfocus="" size="30" type="text" value=""></p>
		<div id="error_for_93172_108787pi_93172_108787" style="display:none"></div>
		<p class="form-field form-col-2 last_name pd-text required required-custom"><label class="field-label" for="93172_108789pi_93172_108789">Last Name *</label> <input class="text" id="93172_108789pi_93172_108789" maxlength="80" name="93172_108789pi_93172_108789" onchange="" onfocus="" size="30" type="text" value=""></p>
		<div id="error_for_93172_108789pi_93172_108789" style="display:none"></div>
		<p class="form-field form-col-2 email pd-text required required-custom"><label class="field-label" for="93172_108791pi_93172_108791">Email *</label> <input class="text" id="93172_108791pi_93172_108791" maxlength="255" name="93172_108791pi_93172_108791" onchange="piAjax.auditEmailField(this, 93172, 108791, 146929247);" onfocus="" size="30" type="text" value=""></p>
		<div id="error_for_93172_108791pi_93172_108791" style="display:none"></div>
		<p class="form-field Response_1 pd-checkbox"><label class="field-label" for="93172_108793pi_93172_108793">Im a checkbox with a label</label> <span class="value"><span><input id="93172_108793pi_93172_108793_1228947" name="93172_108793pi_93172_108793_1228947" onchange="" type="checkbox" value="1228947"><label class="inline" for="93172_108793pi_93172_108793_1228947"><img src="https://jennamolby.com/wp-content/uploads/2021/09/radio-1.png" width="70"> <span>Checkbox 1</span></label></span><span><input id="93172_108793pi_93172_108793_1228949" name="93172_108793pi_93172_108793_1228949" onchange="" type="checkbox" value="1228949"><label class="inline" for="93172_108793pi_93172_108793_1228949"><img src="https://jennamolby.com/wp-content/uploads/2021/09/radio-2.png" width="70"> <span>Checkbox 2</span></label></span><span><input id="93172_108793pi_93172_108793_1228951" name="93172_108793pi_93172_108793_1228951" onchange="" type="checkbox" value="1228951"><label class="inline" for="93172_108793pi_93172_108793_1228951"><img src="https://jennamolby.com/wp-content/uploads/2021/09/radio-3.png" width="70"> <span>Checkbox 3</span></label></span></span></p>
		<div id="error_for_93172_108793pi_93172_108793" style="display:none"></div>
		<p style="position:absolute; width:190px; left:-9999px; top: -9999px;visibility:hidden;"><label for="pi_extra_field">Comments</label> <input id="pi_extra_field" name="pi_extra_field" type="text"></p><!-- forces IE5-8 to correctly submit UTF8 content  -->
		<input name="_utf8" type="hidden" value="☃">
		<p class="submit"><input accesskey="s" type="submit" value="Submit"></p>
		<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"><!-- Load jQuery -->
		<script src="https://code.jquery.com/jquery-1.12.4.js">
		</script><!-- Load the jQuery UI JS library -->
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
		</script>
		<script>
		$(function() {
		var myDate = new Date("January 1, 1903");
		  $( "p.Date_Field input" ).datepicker({
		      changeMonth: true,
		      changeYear: true,
		      dateFormat: 'yy-mm-dd',
		      maxDate: '0',
		      yearRange: '1903:2021',
		      defaultDate: myDate
		  });
		});
		</script> 
		<script type="text/javascript">
		//<![CDATA[

		  var anchors = document.getElementsByTagName("a");
		  for (var i=0; i<anchors.length; i++) {
		      var anchor = anchors[i];
		      if(anchor.getAttribute("href")&&!anchor.getAttribute("target")) {
		          anchor.target = "_top";
		      }
		  }
		      
		//]]>
		</script> <input id="hiddenDependentFields" name="hiddenDependentFields" type="hidden" value="">
	</form>
              
            
!

CSS

              
                
/* --- customize the checkboxes --- */
/* Put the checkbox text on one line */
#pardot-form .pd-checkbox label span  {
    display:block;
    float:none;
    padding-top:10px;
}
/* align the new checkboxes */
#pardot-form .pd-checkbox span.value {
  display:flex;
  width:100%;
  gap: 10px;
}
#pardot-form .pd-checkbox span.value span {
  flex-grow: 1;
  flex-basis: 0;
}
/* style the new checkboxes */
#pardot-form .pd-checkbox label.inline  {
    margin-top:5px;
    background-color:#FFF;
    display:flex;
    flex-direction:column;
    border:solid 1px #e8e8e8;
    padding:20px;
    text-align:center;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    align-items:center;
    cursor:pointer;
}
/* hide the default checkbox */
#pardot-form .pd-checkbox input {
    display:none;
}
/* style the checkboxes when selected */
#pardot-form .pd-checkbox input:checked+label {
	background-color:#e8e8e8;
	border:solid 1px #539c18;
}

/* Other form CSS generated by https://jennamolby.com/pardot-form-style-generator/ */
/* Load the custom font */ 
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
#pardot-form {
	font-family:'Roboto', sans-serif;
  width:100%;
  max-width:425px;
  margin:0 auto;
  background-color:#f4f4f4;
  padding:20px;
}
#pardot-form .form-field {
 	margin:0;
 	padding:5px 0 0 0;
} 
 /* The input fields */ 
 #pardot-form input.text,
 #pardot-form textarea.standard,
 #pardot-form select,
 #pardot-form input.date { 
	background-color:#FFFFFF;
	border:solid 1px #E0E0E0;
	font-size:15px;
	color:#757575;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
	padding-top:5px;
	padding-bottom:5px;
	padding-left:10px;
	padding-right:10px;
	width:100%;
	font-family:'Roboto', sans-serif;
	box-sizing:border-box;
}
/* the input fields on focus */ 
 #pardot-form input.text:focus,
 #pardot-form textarea.standard:focus,
 #pardot-form select:focus,
 #pardot-form input.date:focus { 
	border-color:#cccccc;
	outline: none;
}
#pardot-form span.value { 
	margin-left: 0;
}
/* the field labels */ 
 #pardot-form label {
	font-size:15px;
	color:#757575;
	font-weight:normal;
	padding-top:5px;
	padding-bottom:5px;
	float:none;
	text-align:left;
	width:auto;
	display:block;
}
/* the submit button */ 
 #pardot-form .submit input {
	margin:0;
  font-family:'Roboto', sans-serif;
	background-color:#2CA4BF;
	border:solid 1px #2CA4BF;
	font-size:16px;
  width:100%;
	color:#FFFFFF;
	font-weight:normal;
	padding-top:10px;
	padding-bottom:10px;
	padding-right:30px;
	padding-left:30px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	border-radius:0px;
}
/* the submit button hover */ 
 #pardot-form .submit input:hover {
	background-color:#1988a1;
	border-color:#1988a1;
	color:#FFFFFF;
}
/* the spacing around the submit button */ 
 #pardot-form .submit {
	margin:0;
	padding-top:10px;
	padding-bottom:0px;
	text-align:center;
}
              
            
!

JS

              
                
              
            
!
999px

Console