Forums - How to edit the HTML of a form

Chas_L , January 17 2022, 08:51

ChronoForms v7

C

Chas_L 49

January 17 2022, 08:51 #397761

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:

Cannot seem to find a simple way to access the form HTML.

Thanks

Chas

GreyHead 65

January 17 2022, 10:12 #397762

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

If you'd like to buy me a coffee or two, thank you very much

C

Chas_L 49

January 17 2022, 10:30 #397764

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 65

January 17 2022, 15:47 #397772

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

If you'd like to buy me a coffee or two, thank you very much

C

Chas_L 49

January 17 2022, 16:08 #397773

Hi Bob,

Thanks for that. Yes I can see the edit window, mine looks like this:

However, I can't see the HTML TABLE code there and even if I enable the WYSIWYG Editor I see this:

and if I click the <> to see the source code, I get this:

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 65

January 17 2022, 16:56 #397774

1

Answer

Hi Chas,

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

Bob

If you'd like to buy me a coffee or two, thank you very much

C

Chas_L 49

January 17 2022, 17:16 #397776

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