FES css Class

[Chris Hirst]

I would like to be able to put a background colour on some rows of the FES Form.
Could you give me a pointer as to what I need to do to achieve that please?

[Stephen Harris]

Hi Chris,

In the form customiser you can specify any classes you want added to element – specify it without the proceeding full-stop (i.e. my-custom-class, not .my-custom-class). It’s added to its containing <div>. You can use those classes to style the corresponding element.

You can see what I mean if you add custom class and take a look at the source code. Then try:

.my-custom-class {
   background: red;
}

[Chris Hirst]

Thanks for the response.

I have added my-custom-class to the Css Class box for the phone number on my fes form. Then put
.my-custom-class {
background: red;
}
in additional css page of my theme, that is where I have put other css to format the odd table.

Saved everything, then viewed the page that holds to fes and there is no red background.

The page source shows as below:

<div class="eo-fes-form-element ">  <label id="eo-fes-form-element-5-label" class="eo-fes-element-label" for="eo-fes-form-element-5"> 
            Event Organiser Phone* </label>

<input
type=”tel”
name=”eventorganiser[event_form][5]”
class=”my-custom-class eo-fes-form-element-type-phone”
id=”eo-fes-form-element-5″
value=””
autocomplete=”off”
required=”required”
/>

    Event organiser contact phone. This will be available to your customers.

<hr>

</div>

Do I need to put
.my-custom-class {
background: red;
}
on a css somewhere?

[Stephen Harris]

Ah my, apologies. I had forgotten the class is added to the field not its <div> container. That solution won’t work unfortunately. Alternatively you can do:

.eo-fes-form-element:nth-child(2) {
  background: blue;
}

To style the 2nd element blue. This assumes that the position of your form fields will be static.

[Chris Hirst]

Thanks for that. I have added all kinds of stuff there now, and my form looks just like a pizza – just what I wanted. Thanks again.

Can you point me to the template for the email that is sent when a user makes an event submission, using the submission form? It all works just fine, but the template one is blue and I want to change it to match my site colours.

I have found and edited the email received following a booking, but I do not see the one for the event submission.

Thanks
Chris

[Stephen Harris]

It’s event-organiser-fes/templates/email-templates/eo-email-template-event-organiser.php

[Author]

Posts