Mastering Phoenix forms

The definitive guide to building complex, powerful forms with Phoenix, LiveView, and Ecto

Praise for my previous courses, Learn Phoenix LiveView and Phoenix on Rails:

Abdisamad Khalif

“Arrowsmith is the kind of instructor whose future courses I'll enroll in without hesitation.”

Iván Munguía

“This course is phenomenal, well written, engaging with every lesson, useful for beginners but also for more experienced devs.”

Teo Rothman

“Wow, this was fantastic! Best online learning material I have tried.”

Get the free preview:

Forms in Phoenix don’t have to be difficult

Phoenix, Ecto and LiveView let you build complex, interactive forms at lightning speed - but there’s a learning curve.

To know what you’re doing, you need to understand a whole bunch of overlapping concepts: changesets, schemas, validations, <.form> and to_form/1, nested params, associations, embeds, CoreComponents and more.

Mastering Phoenix Forms is the ultimate guide that will make everything clear, once and for all. In my usual style, it’s a written course with 57 lessons. (See below for the full table of contents.)

You’ll build two Phoenix apps that illustrate everything you need to know about forms - from a simple “deadview” form with basic inputs, to a complex LiveView with dynamic nested associations and all the other tricky stuff.

I’ve figured out everything you need to know and organized it into clear, concise, logical steps. You’ll start from the basics and build things up piece by piece, each new concept being introduced at exactly the right time for maximum learning and understanding.

By the time you’re done, you’ll wonder what you ever found confusing. Phoenix forms don’t have to be difficult - I promise. All it takes is a clear, organized understanding of how the different parts of the stack fit together. Once you have this conceptual outline, you’ll be building complex, dynamic forms at blazingly fast speeds. You’ll see once again why LiveView is the best stack out there - you just won’t believe how quick and easy it becomes to write complex, powerful yet maintainable code!

Convinced? Buy it for life

No subscription, no time limit. Lifetime access with a single payment.

Individual license
  • For personal use
  • Lifetime access
  • 57 lessons + full source code
  • All future updates for free
$49
Buy now

Questions

What’s the format?

Like my previous courses, Mastering Phoenix Forms is a written course containing 57 lessons.

In Part 1, you’ll learn how to build forms with a static “deadview” controller. In Part 2, you’ll expand on what you’ve learned and see how everything works with LiveView. Then in the Bonus Lessons, you’ll explore some miscellaneous topics such as security, multi-step forms, form recovery, and more. >

What about Ecto?

In Phoenix, forms and Ecto are two sides of the same coin. But that’s the confusion: you need to learn Ecto before you can build an effective form, but it can also feel like you need to understand forms before you can get your head around Ecto.

I’m here to clear things up. I’ve figured out the dependency graph between all these interlocking concepts - I’ll take you gently from the simple to the complex and explain everything in an order that makes maximum sense.

What about Tailwind?

Since Phoenix 1.7, newly-generated Phoenix apps use Tailwind CSS for their styling. You don’t have to use Tailwind in your Phoenix project - it’s easy to, for example, use SASS, LESS, or vanilla CSS instead - but Tailwind is the default.

Tailwind is a simple framework that’s very easy to learn. The apps you’ll build in Mastering Phoenix Forms use Tailwind for their styling, but you don’t need a deep knowledge of Tailwind to understand the tutorial.

Does it cover [topic X]?

I’ve included every form-related topic I could think of. The syllabus includes, but is not limited to:

  • understanding <.form>, to_form/1, %Phoenix.HTML.Form{}, and how they interplay.
  • building complex, custom validations with Ecto.
  • making dynamic, nested forms with both cast_assoc and cast_embed.
  • thoroughly examining CoreComponents, including various advanced tricks you may have missed in <.input />.
  • how Phoenix parses HTTP params into nested data structures.
  • enhancing your forms with Javascript hooks.
  • effective errors, including LiveView’s new used_input? helper.
  • working with embedded data and relational associations.
  • dealing with latency, and improving your form’s UX on slow connections.
  • best security practices so your forms remain unbreakable.
  • internationalizing your forms with gettext.
  • integrating your forms with 3rd-party Javascript libraries.

Scroll to the bottom of this page to see the full table of contents.

What’s the stack?

The tutorial uses the latest version of everything as of 2024: Elixir 1.17, Phoenix 1.7, and LiveView 1.0. It will be kept updated as new versions of these technologies are released in the future.

Isn’t Phoenix 1.8 coming out soon? Will the course be kept up-to-date?

Phoenix and LiveView are continually receiving new features and upgrades. As with my other courses, I’ll keep Mastering Phoenix Forms up-to-date with all and any future changes to the framework. Once you buy the course you’ll have lifetime access to all future updates for free.

Do I need to know Phoenix already?

I’ve tried to minimize the amount of existing Phoenix knowledge that’s required to take this course. If I don’t teach a concept directly, I’ve added the necessary code to the starter app(s) so that you shouldn’t need to worry about it.

Still, Mastering Phoenix Forms probably isn’t suitable for the total Phoenix beginner. If you’re not familiar with basic concepts like the router, controllers, or HEEx, you might want to take a beginner’s tutorial before going deep on forms.

I have another question.

I’d love to hear it! Get in touch on george@arrowsmithlabs.com.

You’ll learn Phoenix forms thoroughly from this course - I guarantee it. Sign up, and if you aren’t impressed, send an email within 30 days of purchasing and I’ll give a full refund.

Table of contents

01 Introduction


Part 1. Static forms


02 Setup


03 The Contact schema


04 The Contacts context


05 Form basics


06 form/1


07 simple_form/1


08 Nested params


09 Changesets


10 Validation


11 Phoenix.HTML.Form


12 Changeset action


13 translate_error/1


14 input/1


15 Custom error messages


16 Uniqueness validations


17 Edit and update


18 Checkboxes


19 Textareas


20 XSS


21 Select


22 Ecto.Enum


23 Date inputs


24 Custom validations


Part 2. LiveView


25 LiveView introduction


26 The starter app


27 Live forms


28 phx-change


29 phx-submit


30 Security


31 used_input?


32 Debouncing


33 Latency simulation


34 phx-submit-loading


35 phx-disable-with


36 Hooks


37 Live action


38 Live file uploads part 1


39 Live file uploads part 2


40 Live file uploads part 3


41 3rd-party Javascript part 1


42 3rd-party Javascript part 2


43 Embedded schemas


44 cast_embed


45 inputs_for


46 sort_param part 1


47 sort_param part 2


48 sort_param part 3


49 drop_param


50 sort_param part 4 (Sortable.js)


51 cast_assoc (coming soon)


Bonus lessons


52 CSRF (coming soon)


53 I18n (coming soon)


54 Plug.MethodOverride (coming soon)


55 phx-trigger-action (coming soon)


56 phx-auto-recover (coming soon)


57 Changeset and form internals (coming soon)