How to Integrate Custom Forms in Shopify (2024) Step by Step

Welcome back everybody to Techspress, I'm going to be showing you how to add custom forms into your Shopify store

There is 1, 2, even 3, there is actually a lot of solutions that you can use, but I'm going to be showing you just a couple of things that you can do in order to get started with

So the very first thing I do want to do is to make sure that I have my Shopify enabled, so check it out here

What I want to do is to add my very first form here, where it says schedules, I want to add contact us or contact forms

So here, contact us, I wanted to add, instead of this I wanted to add a contact form, right

So let's go here into the load pallet, I'm going to go into my online store, I'm going to hit now here into my themes and go into customize

Inside customize, let's go and go directly into my contact us section, and I wanted to choose this element, and I've removed this section

So I have removed that section, so now what I want to do is to hit into add section or add a new section

I'm going to go back, I go here into add section, and here I'm going to go with form

Usually we have the contact form here that we can add automatically, so as you can see we have the contact form here

So here into my contact form I can change this leave us your info, and I can change the color scheme if I want to

So theme settings and the custom CSS are by default already been added here

So this is one way of how you can create your contact form

The second way of how you can get started with, I'm going to select this info, I delete this, I'm going to do exactly the same thing

but I'm going to do now something else. Usually what I do is to go directly here into add my section, I go once again into contact form

and here usually we do have an application that can be helping us to add a form

If you don't have one, I can totally suggest one called the actual MailChimp

So I can go here into apps, I go into MailChimp email marketing, and this one should be helping us to create a custom contact form

So I'm going to go here to continue to MailChimp, if you don't have a MailChimp account you can always create one totally for free

So usually what I just do is to go here into the actual section of my website, or look out here for create

and usually you can create a regular email, you can create automations, line and paste, or focus into sign up form

And let's go for embeamed form. So I choose this option, I hit into begin, and I get started with my new form

For example, let's say that I have just created this one, I have this information of my form field, I go back

I have my settings, what is the actual name, the wedding, remove css files

and once you are finished, you hit into copy this code, and now I can go now into my online store

let's go here into online store, let's go into pages, inside pages I want to look out for the contact us section

which in my case I enabled my show HTML file, I paste this file, and I hit now into save

And check it out, here is the contact form that we have just added from MailChimp

Of course this is like too easy, but you can add more information with your actual page as you are just getting started with

And the last solution that I can give you is to do this totally manually

So instead of just pasting any beamed code, you can just get started by adding here into the section

let's say for example into my table, so here I have the table number 1

Another solution is the chat dbd, a artificial intelligence application that can help you to do almost anything

and it can help us to do this. Let's go for create here to send a message

create a HTML file for a contact form where I, and subject, enter

And now I have an HTML file that I can use totally for free directly into my store

Just wait a few seconds here, I now go up, I copy this code, I go back into my store

remember to always import the source HTML file, I paste my HTML file directly from chat dbd

and here is my contact us form. So what I can do is just to leave all of this like that, or command A, alignment, let's go center, and there we go

So as you can see, it is actually really, really simple to get started with something too easy

Just hit into save, hit into view your page, and your page should be now updated

So there we go, as you can see, it is actually really simple, and the best part is that this one is actually working

So guys, without being said, we have now reached the very end of the video, but don't forget to like and subscribe to the channel if you want to see more great tools

how I can get started to adding elements here into your actual applications section of Shopify

Thank you so much for watching the video guys, hopefully we can see you all next time

Bye