{"id":220571,"date":"2024-02-02T02:48:48","date_gmt":"2024-02-02T02:48:48","guid":{"rendered":"https:\/\/wpmudev.com\/blog\/?p=220571"},"modified":"2024-02-02T02:46:32","modified_gmt":"2024-02-02T02:46:32","slug":"forminator-receipt-template-slider-form-field","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/forminator-receipt-template-slider-form-field\/","title":{"rendered":"Forminator 1.29 Introduces New PDF Receipt Template &#038; Slider Form Field"},"content":{"rendered":"<p>Since the release of Forminator&#8217;s <a href=\"https:\/\/wpmudev.com\/blog\/forminator-pdf-generator-addon\/\" target=\"_blank\" rel=\"noopener\">new PDF Generator Addon<\/a>, the team has been hard at work cooking up even more handy features, and today we&#8217;re excited to announce the first of our time-saving PDF templates!<\/p>\n<p>A PDF receipt\/invoice template was highly-requested by Forminator users. Learn everything you need to know about the new addition and see it in action in this post.<\/p>\n<p><strong>But wait, there&#8217;s more&#8230;<\/strong> Forminator 1.29 also added another handy &#8216;slider&#8217; form field feature, perfect for forms where selecting a range is required or beneficial &#8211; you can now add one in a few clicks!<\/p>\n<p>Here&#8217;s what we&#8217;re covering:<\/p>\n<ul>\n<li><a href=\"#why-use\">Why use the PDF receipt template?<\/a><\/li>\n<li><a href=\"#how-works\">How the PDF receipt template works<\/a><\/li>\n<li><a href=\"#slide-field\">Try Forminator\u2019s new free slider form field!<\/a><\/li>\n<\/ul>\n<h2 id=\"why-use\">Why use the PDF receipt template?<\/h2>\n<p>Many Forminator users <a href=\"https:\/\/wpmudev.com\/blog\/stripe-subscriptions-wordpress\/\" target=\"_blank\" rel=\"noopener\">collect on-site payments directly through their forms<\/a> via integrated PayPal and Stripe fields.<\/p>\n<p>So, we knew it was essential for us to provide an easy and streamlined way for you to create professional receipts\/invoices for clients.<\/p>\n<p>The new PDF receipt template does exactly this&#8230;<\/p>\n<p>You can easily create professional PDF receipts that automatically and accurately output with form data and can be sent to clients after on-site form payment.<\/p>\n<p>No more manual work or sending receipts via a third-party payments provider &#8211; now it&#8217;s all easy and automated for you.<\/p>\n<h2 id=\"how-works\">How the PDF receipt template works<\/h2>\n<p>A few PSA&#8217;s before we continue&#8230;<\/p>\n<p>To use the PDF receipt template you must:<\/p>\n<ul>\n<li><strong>Use <a href=\"https:\/\/wpmudev.com\/project\/forminator-pro\/\" target=\"_blank\" rel=\"noopener\">Forminator Pro<\/a><\/strong><\/li>\n<li><strong>Have the <a href=\"https:\/\/wpmudev.com\/blog\/forminator-pdf-generator-addon\/\" target=\"_blank\" rel=\"noopener\">Forminator PDF Addon<\/a> installed.<\/strong><\/li>\n<li><strong>Use a form with a Stripe or PayPal payments field.<\/strong><\/li>\n<\/ul>\n<p>Cool? Let&#8217;s continue!<\/p>\n<p>After creating your on-site payment form, navigate to <strong>Edit Form &gt; PDF, <\/strong>then click <strong>Create New PDF.<\/strong><\/p>\n<figure id=\"attachment_220580\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220580 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/create-new-PDF.png\" alt=\"A screen showing the option to create a new PDF.\" width=\"1200\" height=\"494\" \/><figcaption class=\"wp-caption-text\">Creating a new PDF couldn&#8217;t be easier thanks to Forminator&#8217;s integrated addon.<\/figcaption><\/figure>\n<p>&#8230;Give your PDF a name.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-220583 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/name-pdf.png\" alt=\"A screen showing where you give your PDF a name.\" width=\"1200\" height=\"620\" \/><\/p>\n<p>&#8230;Select the brand new <strong>Receipt<\/strong> PDF template.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_220579\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220579 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/choose-template-e1706652391315.png\" alt=\"A screen showing the option of choosing a defined PDF template.\" width=\"1194\" height=\"746\" \/><figcaption class=\"wp-caption-text\">Choose from a selection of unique templates, including the new Receipt option.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<div>\n<p>Next, enter the payee and payer data you want included on your receipts.<\/p>\n<p>You will notice you can add <strong>dynamic data merge tags<\/strong>, which automatically pulls and outputs data from your forms.<\/p>\n<p>For example, you can dynamically include form fields like <strong>Name<\/strong>, <strong>Email,<\/strong> or <strong>Phone Number<\/strong>, and these will automatically populate in your PDF receipt.<\/p>\n<\/div>\n<div>\n<figure id=\"attachment_220584\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220584 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/receipt-details.png\" alt=\"A screen showing how users can easily edit the payee and payer details of their PDF receipts.\" width=\"1200\" height=\"1322\" \/><figcaption class=\"wp-caption-text\">Easily add payee and payer info, including dynamic field population that automatically outputs in your final PDF.<\/figcaption><\/figure>\n<\/div>\n<p>After confirming the details, you&#8217;ll be taken back to the<strong> Edit PDF<\/strong> screen where you can also edit your PDF header, footer, and add any additional fields if needed.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_220581\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220581 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/edit-pdf.png\" alt=\"A screen showing the editing options available with your PDF.\" width=\"1200\" height=\"1076\" \/><figcaption class=\"wp-caption-text\">On top of the default template settings, you can edit the header, footer, and add more fields.<\/figcaption><\/figure>\n<p>Next, you can customize the appearance of your PDF and adjust page size and margin settings.<\/p>\n<p>We&#8217;ll be adding more advanced customization options soon. In the meantime, you can manually adjust the appearance of your PDFs with the <strong>Custom CSS<\/strong> option.<\/p>\n<figure id=\"attachment_220591\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220591 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/PDF-appearance.png\" alt=\"As screen showing how you can adjust the appearance of your PDF\" width=\"1200\" height=\"1098\" \/><figcaption class=\"wp-caption-text\">Adjust the appearance of your PDF with some basic customization options.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<p>When you&#8217;re happy with the appearance, layout, and info included, you can preview your receipt with one click.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_220582\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220582 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/invoice-preview.png\" alt=\"A screen showing a preview of what the final receipt PDF will look like.\" width=\"1200\" height=\"950\" \/><figcaption class=\"wp-caption-text\">Easily preview your PDF before you set it up for clients.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<p>That&#8217;s it! Your PDF receipt template is now ready to be sent to your client via email.<\/p>\n<p>To do this, just go to <strong>Edit Form<\/strong> &gt; <strong>Email Notifications<\/strong>.<\/p>\n<p>Here you can add and edit email notifications to be sent to admins or form users.<\/p>\n<p>Simply create a new email notification and you&#8217;ll see you can add your newly created PDF as an attachment to your confirmation email.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_220637\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220637 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/02\/attach-email.png\" alt=\"A screen showing how you can attach your PDF receipt to an email\" width=\"1200\" height=\"998\" \/><figcaption class=\"wp-caption-text\">Easily attach your newly created PDF receipt to a client email.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<p>You can also edit more settings, such as the recipients and conditions of the email, depending on your particular form.<\/p>\n<h2 id=\"slide-field\">Try Forminator&#8217;s new free slider form field!<\/h2>\n<p>As mentioned earlier, another handy feature Forminator 1.29 introduced was a <strong>new slider form field.<\/strong><\/p>\n<p>This was another hotly requested addition and it&#8217;s available with the <strong><a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">free version of Forminator<\/a><\/strong>, so anyone can use and benefit from it.<\/p>\n<p>You can use the slider field for anything from mortgage or loan calculators and donation forms, to price filtering and product customization.<\/p>\n<p>Adding a slider to a form is easy, just go to <strong>Edit Form &gt; Fields &gt; Insert Field, <\/strong>and select the <strong>Slider<\/strong> field.<\/p>\n<figure id=\"attachment_220597\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220597 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/slider-select.png\" alt=\"A screen showing how you now have the option to add a slider field to your forms.\" width=\"1200\" height=\"726\" \/><figcaption class=\"wp-caption-text\">Easily add a convenient slider functionality to forms that could benefit from it.<\/figcaption><\/figure>\n<p>&#8230;Edit the type of slider you want to display, and label it.<\/p>\n<figure id=\"attachment_220598\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220598 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/slider-labels.png\" alt=\"A screen showing how you can define and label your slider.\" width=\"1200\" height=\"1130\" \/><figcaption class=\"wp-caption-text\">Choose the type of slider you want to add and label it.<\/figcaption><\/figure>\n<p>&#8230;With <strong>Settings<\/strong> you can also adjust the slider size, values, and advanced settings like default value, and suffix\/prefix text.<\/p>\n<figure id=\"attachment_220599\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220599 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/range-slide-settings.png\" alt=\"A screen showing Forminator's range slider settings\" width=\"1200\" height=\"1270\" \/><figcaption class=\"wp-caption-text\">Adjust the settings of your range slider to suit the unique needs of your form.<\/figcaption><\/figure>\n<p>&#8230;You can also choose whether or not to enable calculations, and set your own visibility rules based on your form.<\/p>\n<figure id=\"attachment_220600\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-220600 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/range-slide-calculations.png\" alt=\"A screen showing where users can customize Forminator's range slider calculation settings.\" width=\"1200\" height=\"1004\" \/><figcaption class=\"wp-caption-text\">Choose whether or not to enable\/disable calculations for your field.<\/figcaption><\/figure>\n<p>Easy as that! Here&#8217;s an example of a simple rating slider in action:<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/slider-example.webm\" type=\"video\/webm\"><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2024\/01\/slider-example.mp4\" type=\"video\/mp4\"><\/video>\n<h2>Upgrade your forms with these new game-changing additions<\/h2>\n<p>We hope you enjoyed this overview of Forminator&#8217;s new PDF Receipt Template and Slider field features.<\/p>\n<p>If you&#8217;re interested in trying them, they&#8217;re both available with <a href=\"https:\/\/wpmudev.com\/project\/forminator-pro\/\" target=\"_blank\" rel=\"noopener\">Forminator Pro<\/a> and the <a href=\"https:\/\/wpmudev.com\/blog\/forminator-pdf-generator-addon\/\" target=\"_blank\" rel=\"noopener\">Forminator PDF Generator Addon<\/a>.<\/p>\n<p>Forminator Pro also comes free with any <a href=\"https:\/\/wpmudev.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">paid WPMU DEV membership<\/a>, along with a whole lot of other amazing WordPress tools, services, plugins, and 24\/7 support from our expert team.<\/p>\n<p>Or, if you&#8217;re looking for the lowest barrier of entry, trying <a href=\"https:\/\/wordpress.org\/plugins\/forminator\/\" rel=\"noopener\" target=\"_blank\">the free version of Forminator<\/a> is also a great option. Just note that the free version will not have the full functionality available with Pro (including the new PDF Receipt Template).<\/p>\n<p>Want to know what&#8217;s coming next for Forminator? Check the <a href=\"https:\/\/wpmudev.com\/roadmap\/\" target=\"_blank\" rel=\"noopener\">WPMU DEV Roadmap<\/a>, where we add regular progress updates.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since the release of Forminator&#8217;s new PDF Generator Addon, the team has been hard at work cooking up even more handy features, and today we&#8217;re excited to announce the first of our time-saving PDF templates! A PDF receipt\/invoice template was highly-requested by Forminator users. Learn everything you need to know about the new addition and [&hellip;]<\/p>\n","protected":false},"author":775041,"featured_media":220934,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"4","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[],"tutorials_categories":[11232],"class_list":["post-220571","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tutorials_categories-forminator-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/220571","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/775041"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=220571"}],"version-history":[{"count":73,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/220571\/revisions"}],"predecessor-version":[{"id":220631,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/220571\/revisions\/220631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/220934"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=220571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=220571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=220571"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=220571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}