How to edit the HTML of a form

Chas_L 17 Jan, 2022
Hopefully an easy question.
How do I edit the HTML of a form?
I need to change the width of the table it sends as it's 50/50 and I need to reduce it to 20/80.
Here is what I get in a standard message:
How to edit the HTML of a form image 1

Cannot seem to find a simple way to access the form HTML.
Thanks
Chas
GreyHead 17 Jan, 2022
Hi Chas,

Is this the form itself - or the email you receive? It doesn't look right for either of these :-(

You can change the form styling using Custom CSS.

Bob
Chas_L 17 Jan, 2022
Hi Bob,
The image I posted shows how the message is received in Outlook. The source looks like this:
we have received the following message from the website:
<br><br>
<table width="100%" cellpadding="5" cellspacing="5" border="0" class="email_content_table" style="border:3px solid #e2e2e2; border-radius:7px;" class="ui table"><tr style="border:3px solid #e2e2e2;" class="email_content_tr">
<td width="50%" valign="middle" align="right" style="background-color:#fafafb; border:3px solid #e2e2e2;" class="email_content_td td_label">
<strong>Name</strong>
</td>
<td width="50%" valign="middle" align="left" class="email_content_td td_value">DILBERT</td>
</tr><tr style="border:3px solid #e2e2e2;" class="email_content_tr">
<td width="50%" valign="middle" align="right" style="background-color:#fafafb; border:3px solid #e2e2e2;" class="email_content_td td_label">
<strong>Email</strong>
</td>
<td width="50%" valign="middle" align="left" class="email_content_td td_value">Dilbert@underwater.co</td>
</tr><tr style="border:3px solid #e2e2e2;" class="email_content_tr">
<td width="50%" valign="middle" align="right" style="background-color:#fafafb; border:3px solid #e2e2e2;" class="email_content_td td_label">
<strong>Message</strong>
</td>
<td width="50%" valign="middle" align="left" class="email_content_td td_value">Hi there, is this a good enough messae for you?</td>
</tr></table>

What I need to do is edit the HTML of the form itself in Chronoforms, so I can change the way the email content is contained within the table of the message.

You can see the form on the site: https://chas-large.co.uk/index.php/contact
GreyHead 17 Jan, 2022
Hi Chas,

If you are using the basic Contact Form you can click Settings in the form Menu bar then scroll down to Admin Email and edit the email HTML there. You can use shortcodes like {data:field_name} to include the form data. (See the Shortcodes Cheatsheet from the 'book' icon at the right end of the form menu.

Bob
Chas_L 17 Jan, 2022
Hi Bob,
Thanks for that. Yes I can see the edit window, mine looks like this:
How to edit the HTML of a form image 2

However, I can't see the HTML TABLE code there and even if I enable the WYSIWYG Editor I see this:
How to edit the HTML of a form image 3

and if I click the <> to see the source code, I get this:
How to edit the HTML of a form image 4

So I must assume the form has some form of basic template that contains the TABLE code, as seen in the source of the received email. Where do I edit that template? It's not part of the Joomla template as far as I can see. If I send a standard Joomla contact form email from the site, using the same default template, it's not frmatted with TABLE code, so this must be being introduced by Chronoforms.

Regards and thanks Chas.
GreyHead 17 Jan, 2022
Answer
1 Likes
Hi Chas,

You can replace the HTML there with whatever you want to include in the email.

Bob
Chas_L 17 Jan, 2022
AH! the light dawns! What you put there OVERRIDES the default that is in the {email_content} code, it must be encapsulated in your own code. That's not in the cheat sheet.

Thanks Bob,
can sort it now. Cheers.

BTW, suggestion. Can the cheat sheet be made downloadable elsewhere? switching it on and off and scrolling up and down when entering code, is cumbersome. Maybe suggest on the sheet that users copy them to a text file for easy reference?

Regards
Chas
You need to login to be able to post a reply.

VPS & Email Hosting 20% discount
hostinger