Can I use a third party form tool on my site?

Yes, many form providers provide code snippets you can use to add to any PrintNow page for data collection. We also provide a way you can use built-in. 

### Custom CMS Email Forms

Custom email forms will only work on custom CMS pages that do not use the `Blank Page` option. They will not work when embedded in any other content area on any other page.

You can use almost any html input element you'd like (including select and textarea but not type=upload), however they need to have a name attribute that begins with `mail_`. Example: `<input type="text" name="mail_subject" />`

Certain input names have defined meaning, these include `mail_to`, `mail_from`, `mail_subject` and `mail_body`. All other `mail_xxxxx` inputs will be added to the then end of the email body. An exception to this rule is radio or checkbox inputs that are not checked, values for those items don't get sent.

The submit button for the form can be any clickable element, however it is recommended not to use an `<input type="submit" />` button as it will cause the page to refresh. The same is also true for a button element, however the button element can be fixed by specifying the attribute type="button".

Below are some samples of custom email forms.

**Minimal form:**

<script type="text/javascript">
function mailUpdate(sent){
if(sent){
$('.mail-form').hide();
$('.thank-you').show();
}
}
</script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="mail-form" style="position:relative;">
<h4>Send me an email</h4>
<div class="form-group">
<label class="control-label">Subject</label>
<input type="text" name="mail_subject" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Email Address</label>
<input type="text" name="mail_from" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Message</label>
<textarea name="mail_body" class="form-control" rows="8"></textarea>
</div>
<button type="button" class="btn btn-primary" onclick="PN.mail.send(mailUpdate);">Submit</button>
</div>
<div class="thank-you" style="display:none;">
<h4>Thanks for submitting yout request.</h4>
</div>
</div>
</div>

**Minimal with overlay and validation:**

<script type="text/javascript">
function mailUpdate(sent){
$('.mail-overlay').hide();
if(sent){
$('.mail-form').hide();
$('.thank-you').show();
}
}
function validate_email_form(){
var valid = true;

$('[name^=mail_][required]').each(function(){
var $this = $(this);

if($this.val().replace(/^\s+|\s+$/g, '') != ''){
$this.parent().removeClass('has-error').find('.help-block').addClass('hidden');
}
else{
valid = false;
$this.parent().addClass('has-error').find('.help-block').removeClass('hidden');
}
});

return valid;
}
function sendmail(){
$('.mail-overlay').show();
PN.mail.send(mailUpdate);
}
</script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="mail-form" style="position:relative;">
<div class="mail-overlay" style="display:none;position:absolute;background-color:rgba(0,0,0,.25);left:0;top:0;right:0;bottom:0;z-index:1;">
</div>
<h4>Send me an email</h4>
<div class="form-group">
<label class="control-label">Subject</label>
<input type="text" name="mail_subject" class="form-control" required="1" />
<span class="help-block hidden">Mail subject is required.</span>
</div>
<div class="form-group">
<label class="control-label">Email Address</label>
<input type="text" name="mail_from" class="form-control" required="1" />
<span class="help-block hidden" required>Email address is required.</span>
</div>
<div class="form-group">
<label class="control-label">Message</label>
<textarea name="mail_body" class="form-control" rows="8" required="1"></textarea>
<span class="help-block hidden">Message is required.</span>
</div>
<button type="button" class="btn btn-primary" onclick="validate_email_form() && sendmail();">Submit</button>
</div>
<div class="thank-you" style="display:none;">
<h4>Thanks for submitting yout request.</h4>
</div>
</div>
</div>

**Various inputs with overlay and validations:**

<script type="text/javascript">
function mailUpdate()(sent){
$('.mail-overlay').hide();
if(sent){
$('.mail-form').hide();
$('.thank-you').show();
}
}
function validate_email_form(){
var valid = true;

$('[name^=mail_][required]').each(function(){
var $this = $(this);

if($this.val().replace(/^\s+|\s+$/g, '') != ''){
$this.parent().removeClass('has-error').find('.help-block').addClass('hidden');
}
else{
valid = false;
$this.parent().addClass('has-error').find('.help-block').removeClass('hidden');
}
});

return valid;
}
function sendmail(){
$('.mail-overlay').show();
PN.mail.send(mailUpdate);
}
</script>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="mail-form" style="position:relative;">
<div class="mail-overlay" style="display:none;position:absolute;background-color:rgba(0,0,0,.25);left:0;top:0;right:0;bottom:0;z-index:1;">
</div>
<h4>Send me an email</h4>
<div class="form-group">
<label class="control-label">Subject</label>
<input type="text" name="mail_subject" class="form-control" required="1" />
<span class="help-block hidden">Mail subject is required.</span>
</div>
<div class="form-group">
<label class="control-label">Email Address</label>
<input type="text" name="mail_from" class="form-control" required="1" />
<span class="help-block hidden" required>Email address is required.</span>
</div>
<div class="form-group">
<label class="control-label">Subject</label>
<select name="mail_reason" class="form-control">
<option>Bug Submission</option>
<option>Feature Request</option>
<option>Other</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Anything</label>
<input type="text" name="mail_anything" class="form-control" />
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label class="control-label">Select an option</label>
<div>
<label class="radio-inline">
<input type="radio" name="mail_option" value="Option 1" checked="checked" />
Option 1
</label>
<label class="radio-inline">
<input type="radio" name="mail_option" value="Option 2" />
Option 2
</label>
</div>
</div>
<div class="col-md-6">
<div class="checkbox">
<label>
<input type="checkbox" name="mail_contact_me" />
It's ok to send me junk mail
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label">Message</label>
<textarea name="mail_body" class="form-control" rows="8" required="1"></textarea>
<span class="help-block hidden">Message is required.</span>
</div>
<button type="button" class="btn btn-primary" onclick="validate_email_form() && sendmail();">Submit</button>
</div>
<div class="thank-you" style="display:none;">
<h4>Thanks for submitting yout request.</h4>
</div>
</div>
</div>