How Our Team Created a Holiday Greeting Card Generator From Scratch

hi guys it’s Christmas time which means
it’s time for elementary education team
to come up with something special we
think we’ve come up with the perfect
gift a fully automated greeting card
done entirely in Elemental if you want
to send greetings to your parents family
or your best friend
all you have to do is fill in the
details your friend’s name David for
example and add a greeting with all your
best wishes for the new year and don’t
forget to add a nice closing as well as
your name let’s say Jack now fill in the
email filled with David’s email and hit
the deliver button from there we are
redirected to a personalized thank-you
page that confirms the greeting card was
sent successfully and at the same time
David receives an email with a link to
the greeting card by clicking the link
David will be directed to the result
page and see the beautiful Christmas
greeting made just for him are you lost
let’s go over it again fill in the
Christmas greeting card and send it to
your friend you are redirected to a
thank-you page and your friend receives
an email with the link to the Christmas
greeting you especially made for him wow
that sounds like magic so how does it
work
a heads up in advance this might get a
little complicated but we’ll go over it
step-by-step understand the logic behind
it see how things work behind the scenes
and then you’ll see it isn’t as
complicated as you might have thought so
let’s see what we’re up against by
breaking it down and understand the
bigger picture the first screen is the
main page you can see the form on the
left and the greeting card on the right
the second screen is the result page
which is the page your friends land on
after having clicked the link in the
email they receive here they will see
your beautifully designed Christmas
greeting the third screen is a Thank You
page this is the page you are redirected
to after having sent the greeting and
confirms that the message was sent
successfully
we’ve designed and created these three
pages with elemental so go ahead and
create your own designs
because what we’re doing here can be
applied to any design first off on the
main page we will focus on the first
trick real-time live preview as you can
see while I’m filling in the form on the
left the greeting card on the right is
mirroring the same text now let’s head
over to the editor as you can see the
page is the same we just clean it up a
bit so we can focus on the technical
side of things now let’s dig in we have
a section with two columns the column on
the left has the form with all the
fields we need the column on the right
has a bunch of form widgets stacked one
on top of the other we’ve also added a
script to the HTML widget you see here
this script helps us with the mirroring
effect and we’ve added some custom CSS
as well but don’t worry this is not the
time to panic
things will be cleared up in a bit let’s
start off by understanding the
relationship between the two columns and
all of the forms each field in the form
on the Left corresponds with one of the
fields in the form on the right now
let’s start off with the first field in
the form on the left by filling in the
necessary details the type label
placeholder and let’s set the required
option to yes moving on to the Advanced
tab give the field a unique ID now on
the form on the right all you need to do
is just repeat what we did before and
just make sure to give it a unique idea
of its own as well in order for the
mirroring to take place we need to add
this script to the HTML widget over here
and you can find this script in the
first comment below let’s check it out
so we can see it in action click to
preview as you can see writing hello in
the left field over here is mirrored in
the field on the right as well let’s do
the same for the next field fill in all
the details and give it a unique ID on
the form to the right fill in all the
details as well and make sure to give it
a unique ID like before let’s preview it
this trick works with the help of the
script we created especially for this
tutorial it essentially allows us to
connect the fields IDs which in turn
allows for the live preview stat you can
anywhere on your page you can go ahead
and add your own fields as many as you
like let’s make some minor adjustments
in the Advanced tab go to custom CSS and
paste this code this needs to be done in
all of the form widgets on the right
column and we’ll remove the buttons the
focus state border and align all the
text to the middle
pay attention though in order to remove
all of the buttons you’ll need to give
each one a unique ID great we’re done
with the live preview pod this helped us
create a virtual Christmas greeting card
allowing us to preview it before sending
it on to our family or friends moving on
to part 2 actions after submit the
actions of the submit option in the
forum widget allows us to set an action
that will be performed after a user
submits the form we will add two actions
let’s start with the first one click on
the add action field in the drop-down
and choose email you will find a new
email tab below it comes with pre-built
parameters but we can change any of
those as we wish we can set the
receivers email a subject the message
and more in the message field we can add
HTML as well this way we can customize
the message in the email you can find
HTML tags easily via Google search now
let’s focus on the second trick the link
inside the email message your friend
receives needs to be dynamic for it to
create personalized content which gets
us right to the next action request
parameter before we understand how it
works let’s see what it does the forum
knows how to take all the parameters
filled inside it send an email to our
friend who upon clicking the link in the
email will see the custom Christmas
greeting with all the details we filled
in on the form now let’s see how to set
up the result page in the content tab
and the title click on dynamic and on
the side choose the request parameter
now click on the request parameter field
in the settings drop-down and make sure
that the type is set to get it should so
by default the get field allows us to
receive data from the
our L in our case the daughter will
arrive from the field inform connected
to the link in the email now go ahead
and fill in the parameter name in this
case I’ve used F nem we also added some
fullback text in the Advanced drop-down
let’s go over it again click on dynamic
and then in the request parameter define
the parameter name now go ahead and
apply this to the remaining widgets just
make sure that the parameter name is
written all together without any spaces
in between and use Latin characters you
can also use the dash and underline
symbols now that we’ve added names to
all of the parameters we can go back to
the email section in the form on the
main page basically what we need to do
now is connect the fields in the form up
with the dynamic request parameters we
set up on the result page we also need
to transfer the dots via the link sent
in the email to your friend sounds a bit
complicated so let’s go over this link
and see how it works first in the link
tag we see the URL of the result page
the question mark separates the domain
from the query string which contains all
of the different parameters we define
before let’s look at it a bit closer F
name is equal to its corresponding field
ID in the result page in our case it’s
equal to ID name 1 let’s see another
example message is equal to its
corresponding field ID in the result
page in our case it’s equal to ID
message 1 as you can see this way we
link the parameters from the result page
to the fields from the main page where
each parameter has its corresponding
field this is where the magic happens
the link we send connects the fields of
the main page to the dynamic parameters
of the result page let’s go through the
whole link and see that we have all the
fields between each field we make sure
to have the ampersand symbol it
separates them now all that’s left is to
talk about the Thank You page this page
informs the sender that the message was
sent successfully we need to go back to
the form on the main page and and the
actions of the submit choose redirect in
the redirect to field fill in the link
of the
Thank You page in this case the name of
the sender is also connected so that the
thank-you page is personalized as well
that’s it we’re done let’s see the magic
in action again I’ll go to the main page
hmm to whom shall I send the holiday
greeting
I’ll send the greeting to my mother we
will fill in all the details and write
her a heartfelt blessing
let’s click the deliver button we’re
taken to a personal thank-you page that
shows that the message was sent
successfully my mother received an email
containing a link to the greeting I
prepared she clicks on the link and is
taken to the Christmas card prepared
especially for her cool you can send as
many wishes as you like each time the
content changes dynamically well that’s
it from all of us at Elementor we wish
you a Merry Christmas and a Happy New
Year
[Music]