Posting from HTML form to Custom form

(David Higley) #1

Hi

 

We have paid an agency to develop some responsive templates including a nicely styled HTML form for booking events which also includes JQuery client side validation.

 

Whilst I've created a Custom Form with the same fields in Matrix and have adapted the validation rules etc. I can't get the form to look precisely the way I want it to.

 

So myu question is "Is it possible to post from a standard HTML form to the 'action' of the Custom Form" i.e.

 

<form action="./?a=[assetID of custom form]" method="post">

<fieldset><label for="bookingEmail">Email Address:</label><span class="formRequiredIndicator">*</span>
<input id="bookingEmail" name="bookingEmail" required type="email" />

...

</form>

 

 

Hope this makes sense

 

David

(Nic Hubbard) #2

Sure, you could do that as long as you include all the correct POST values that the form is expecting. But, I wouldn't recommend you do this since it would be a huge pain to update, change, etc.

 

You say you can't get the form to look how you want. What is missing? What are you not able to do?

(Anthony) #3

I agree with Nic its not ideal, but you certainly can. I've done something similar with posting to an asset builder to replace its HTML UI with something more sophisticated. You can use Firebug (or IE F12) or a lower level network tool like fiddler to snoop on the exact POST syntax to make sure you duplicate it properly.

(David Higley) #4

Thanks Nic and Anthony

 

Turns out it was just me being dopey and expecting to be able to set the ID of the Matrix custom form so it matched the class in my supplied CSS...

 

Now I've had a coffee I appreciate there are at least several good reasons why Matrix needs to control the form ID, so have updated my CSS to reference the form ID generated by Matrix and it looks exactly as it should.

 

It's useful to know that I can post directly though, should the need ever arise.

 

Moving from one numpty admission possibly onto another, is there a option to set a CSS class for the form, and avoid having to add an ID to the CSS every time I create a new form?  I appreciate having a "Form extras" option to inject code could cause conflicts with names and IDs which is probably why it's not there as a Simple Formatting option, but not sure if there's another way around this?

(Nic Hubbard) #5

Moving from one numpty admission possibly onto another, is there a option to set a CSS class for the form, and avoid having to add an ID to the CSS every time I create a new form?  I appreciate having a "Form extras" option to inject code could cause conflicts with names and IDs which is probably why it's not there as a Simple Formatting option, but not sure if there's another way around this?

 

No, there is no option for this. Most likely for the reason you stated.

 

I always just use javascript to add it. Quite simple and quick that way.

(Bart Banda) #6

In Matrix 5.1 you will actually be able to add extra attributes to the form tag, such as classes and autocomplete attributes. 

 

However you should easily be able to style your form by wrapping a div with a class on it like so:

<div class="form-wrapper">
  <form>
    //contents...
  </form>
</div>

And then target CSS using something like:

.form-wrapper form {
}

That way you can create a generic form class.