Added a form in index.mdx

[Deepak-Choudhary0]

Description

This PR fixes #

This PR solves the issue #4219
by adding a form at https://layer5.io/learn/service-mesh-books/the-enterprise-path-to-service-mesh-architectures-2nd-edition.
Still need a review before making the merge, like the data shown after signing up for book. I'm open for any improvements.

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[leecalcote]

Suggested change

	<Col lg={5} md={6} sm={12} style={{ padding: "0" }}>
	<CommonForm
	title="Get the Book"
	form="The Enterprise path to service mesh Architectures 2nd Edition"
	account_desc="Send the The Enterprise path to service mesh Architectures 2nd Edition book in the Mail."
	submit_title="You will get book soon in the mail!"
	submit_body="Please patiently await for The Enterprise path to service mesh Architectures 2nd Edition Book."
	/>
	</Col>
	<Col lg={5} md={6} sm={12} style={{ padding: "0" }}>
	<CommonForm
	title="Get the Book"
	form="epsma-book"
	account_desc="Email the The Enterprise Path to Service Mesh Architectures 2nd Edition"
	submit_title="Your copy of the book will arrive in your mailbox shortly."
	submit_body="While waiting for your copy to arrive take a free learning path - https://layer5.io/learn/learning-path"
	/>
	</Col>

[leecalcote]

Thanks, @Deepak-Choudhary0

[l5io]

🚀 Preview for commit 0d00df7 at: https://646dfec62d81770c35b5f18d--layer5.netlify.app

[Deepak-Choudhary0]

Thanks, @Deepak-Choudhary0

Hey lee any update on link? like even if you click on image of the book it leave you at another link.
So can i remove that link completely?

[l5io]

🚀 Preview for commit 168e038 at: https://646e1a819244ec05242d4f60--layer5.netlify.app

[leecalcote]

Thanks, @Deepak-Choudhary0

Hey lee any update on link? like even if you click on image of the book it leave you at another link. So can i remove that link completely?

@Deepak-Choudhary0, yes, you can remove the external link completely. 👍

[Deepak-Choudhary0]

Thanks, @Deepak-Choudhary0

Hey lee any update on link? like even if you click on image of the book it leave you at another link. So can i remove that link completely?

@Deepak-Choudhary0, yes, you can remove the external link completely. 👍

Done any other review??

[leecalcote]

Please make this a clickable <Link> --> https://layer5.io/learn/learning-path

[leecalcote]

The form action isn't invoking the necessary webhook to handle submission on the server-side.

[l5io]

🚀 Preview for commit 8276b44 at: https://646eefeaedf95673549e8c14--layer5.netlify.app

[l5io]

🚀 Preview for commit 4a03c2f at: https://646f42f90283630986d6fe1b--layer5.netlify.app

[Deepak-Choudhary0]

Please make this a clickable <Link> --> https://layer5.io/learn/learning-path

[Deepak-Choudhary0]

The form action isn't invoking the necessary webhook to handle submission on the server-side.

I did not know about this one can you tell me someone who can help me about server side webhook?

[Savio629]

@Deepak-Choudhary0 Let's discuss this on websites call, add this as an agenda in meeting minutes if you would.
The meeting is at 5.30 pm IST.

[theBeginner86]

@Deepak-Choudhary0

Would you please fix this styling issues?

On submission:

[theBeginner86]

I've handled all the server-side changes. // @Deepak-Choudhary0

[theBeginner86]

Also switching CTA from Docker Extension to Playground or MeshMap might be good. 🤔

[Deepak-Choudhary0]

@Deepak-Choudhary0

Would you please fix this styling issues?

On submission:

<img alt="Screenshot 2023-06-01 at 4 57 24 PM" width="1438" src="https://user-images.githubusercontent.com/73700530/242582886-fa3d84ae-09b8-4302-bb9c-39c3893d394f

Yeah sure, that's where i am working.

[Savio629]

@Deepak-Choudhary0 Updates?

[Deepak-Choudhary0]

I will show it on Monday meetings as i have done the output(the confirmation message) part styling , just the input form needs to be corrected too.

[Ghat0tkach]

@Deepak-Choudhary0

Would you please fix this styling issues?

On submission:

Well this could be resolved by changing .book class
float:none from float:right when we click on submit button.
What are your thoughts @Savio629 @Shivam-AfA @Deepak-Choudhary0

Recording.2023-06-11.003858.mp4

[vishalvivekm]

I will show it on Monday meetings as i have done the output(the confirmation message) part styling , just the input form needs to be corrected too.

Please add this as an agenda item in the meeting minutes @Deepak-Choudhary0

[Deepak-Choudhary0]

@Deepak-Choudhary0
Would you please fix this styling issues?
On submission:

Well this could be resolved by changing .book class float:none from float:right when we click on submit button. What are your thoughts @Savio629 @Shivam-AfA @Deepak-Choudhary0

Recording.2023-06-11.003858.mp4

This will lead the input form to be bigger

[Ghat0tkach]

@Deepak-Choudhary0
Would you please fix this styling issues?
On submission:

Well this could be resolved by changing .book class float:none from float:right when we click on submit button. What are your thoughts @Savio629 @Shivam-AfA @Deepak-Choudhary0

Recording.2023-06-11.003858.mp4

This will lead the input form to be bigger

Im saying after when we click submit button , because the issue arises when we submit the form.

[Savio629]

@Deepak-Choudhary0 updates?

[Deepak-Choudhary0]

@Deepak-Choudhary0
Would you please fix this styling issues?
On submission:

Well this could be resolved by changing .book class float:none from float:right when we click on submit button. What are your thoughts @Savio629 @Shivam-AfA @Deepak-Choudhary0

Recording.2023-06-11.003858.mp4

This will lead the input form to be bigger

Im saying after when we click submit button , because the issue arises when we submit the form.

hey @Ghat0tkach do you have anything in mind how we can do that float:none when user clicks on submit , mine mind is blank.

[Ghat0tkach]

@Deepak-Choudhary0 , Mine approach is simple , we have to use two functions one for submitting email to backend and another is to making float to none.

We can use

function floatnone() {
  document.getElementById("myImg").style.cssFloat = "none";

}

[Deepak-Choudhary0]

@Ghat0tkach how will we trigger this, because in commonform component there is no prop to handle like onclick,onsuccess to trigger this function

[Savio629]

@Deepak-Choudhary0 Maybe you can check if "thank-you-box" class is rendering/visible and then append the float:none to the "book" class.

[Deepak-Choudhary0]

yeah @Savio629 but i am not getting how will i implement this function such that when "ThankYouBox" renders after user successfully registers for book email , the "Book" class should be made float:none

[vishalvivekm]

yeah @Savio629 but i am not getting how will i implement this function such that when "ThankYouBox" renders after user successfully registers for book email , the "Book" class should be made float:none

Let's discuss this on websites call. Please add this as an agenda item in the meeting minutes if you would :)

[Savio629]

@Deepak-Choudhary0 Did you figure it out?
If you are still facing difficulty to implement it, Try the suggested changes mentioned in #4364

[Deepak-Choudhary0]

let @Ghat0tkach submit a pr then w'll make a feedback