Form Send Results not Keeping Styling

Product Support
1

Hi All,

My Mautic version is: 5.2.2

My problem is:
When creating a form with the Send Form Results action, the styling is not respected, no matter what method is used.

Steps I have tried to fix the problem:
I have tried each and every way of designing the email -

  1. Create a Triggered Email and then import this onto the Send Form Results action
  2. Copy the MJML from the created Email and copy that into the source of the Send Form Results action
  3. Design the email through HTML and put this into the source of the Send Form Results action
  4. Design the email in the builder of the action

Each of these methods results in styling being lost(e.g. when setting a width on a table and having a cell of text, the text can expand the size of the table).

The creation of the email in the builder of the action is “best” but definitely not desirable. I have not seen this posted in here so I am wondering if anyone else has run into this issue or if everyone instead sends results through a campaign being triggered off of the form?

Any input would be greatly appreciated as I have customers wanting to use this behaviour but currently it cannot be trusted. Using the import email option, the Triggered description states that it is intended to be used on forms. If you send an example of the email to yourself it looks perfect, but as soon as it is used in the form it loses all styling.

Thanks,
Connor

2

Hello @cdavey,

I am gonna be honest, I have never used that option myself, but it’s great that youve already tested several workarounds, and that’s really helpful for debugging!

Would you be able to share some screenshots of the emails before and after each method you tried? It would also be useful if you could provide the email code (HTML/MJML), so I can take a closer look at what might be causing the issue.

Working with GrapeJS can be tricky, especially since it sanitises a lot of your code, so having access to the actual markup would help a lot.

Looking forward to your feedback,
Ricardo

3

Hi Ricardo,

Okay, I thought it would be a wider used feature, it is handy for quick forms.

image
image2878×845 203 KB

From left to right:

  • “Send Example” from the Email
  • Selecting the Email in the Send Form Results action
  • Copying the email source code and pasting it into the source code of the Send Results action

It is unclear on the form email builder which method it prefers, using MJML or HTML. The overall workaround seems to be using a campaign triggering off of the form, but since the feature is there, I would want it behaving itself.

For the below HTML, the output from the form results is:

image
image1380×433 95 KB

Thanks,
Connor

<html>
	<body>
		<table padding-top="20px" padding-bottom="20px" padding-right="0px" padding-left="0px" text-align="center" width="600px">
			<tr>
				<td>
					<img src="https://thesolicitorsgroup.em360.uk/media/images/certificate_header_800_x_150_px_.jpg" padding-top="0px" padding-bottom="0px" 
padding-right="0px" padding-left="0px">
				</td>
			</tr>
			<tr>
				<td>
					<p style="font-family:arial; size:11px; text-align: center;" padding-top="10px" padding-bottom="10px" padding-right="25px" padding-left="25px">This CPD has been quality assured 
by the contributors working in conjunction with Practice Enterprise Ltd. We confirm that the information provided on this certificate is full and 
accurate.</p>
				</td>
			</tr>
			<tr>
				<td>
					<img src="https://thesolicitorsgroup.em360.uk/media/images/certificate_footer_800_x_150_px.jpg" padding-top="0px" padding-bottom="0px" 
padding-right="0px" padding-left="0px">
				</td>
			</tr>
		</table>
	</body>
</html>