Customise CSS in an embedded JS Form

Design help Custom code
1

Hi

I have been supplied the below code which populates a form on my site’s Blog page (view read-only):

<!--MyGuestlist Form - http://www.myguestlist.com.au - Begin form -->
 <script src="//myguestlist.com/mgl/displayform.php?formID=mf8da135e161d" type="text/javascript"></script>
 <!--End MyGuestlist Form-->

It creates a very basic layout, but I’m not sure how to edit the form’s CSS to look like the forms on the rest of the site (Home & Functions pages).

If you could help me out that would be great!

Thanks,
Bonnie :slight_smile:

2

Put this in Page Settings > Footer Code

<script>
Webflow.push(function() {
  $('.MGLRow input:text').addClass('w-input');
  $('.MGLRow select').addClass('w-select');
  $('#MGLSubmit').addClass('w-button');
  $('.MGLPoweredBy').remove();
});
</script>
3

Thanks! This makes the form fields full width, which is a start!

What I’m trying to do though is replicate the styling of the form on this page:
http://the-port.webflow.io/functions

Is there a way to copy the CSS and insert that?

I’m super new to this sorry!

Cheers,
Bonnie :slight_smile:

4

Hi @bonnieforsyth, do you have an example of the form published using the default css?

Could you please share that link to the published page where the form is embedded?

Thanks in advance!

5

The embedded form is here:
http://the-port.webflow.io/blog

But ideally i want it to have the same formatting as the contact form in the footer.

Thanks!

6

Hi @bonnieforsyth, it looks like this service is using it’s own forms layout and styling controls: Styling your event - MyGuestlist Support

The embed that is on the blog page has no styling at all applied currently, so one option to try might be to create some styles on the site for the styles shown in the published form:

Class Names from the form embed:

MGLRow - To show if the form cannot be run, i.e. user not have javascript
MGLLabel - style for form field labels
MGLField - style for form field inputs, i.e. text input for email and name
MGLSubmit - style for form submit button
MGLPoweredBy - style for the powered by link added to the form

Create a new form so that it looks the way you want using just those class names and style the fields how you want it to look. There is not a lot of control to the structure, because the form elements are getting generated automatically from myguestlist.

After creating some new styles, delete the new form as that was used just to create the styles.

Publish the site and see if it has any affect to the styling. Alternatively, check the “Styling your Event” link I shared above.

I hope this helps!