-
- 834 Posts
I'm sure this has been asked before, but the forum search function doesn;t even recognize the term Formit.
Anyway, how do I change the Submit button in Formit?
<input name="submit" class="submit" type="submit" value="Submit"/>
and where do I put any new graphical button elements?
Thanks
[ed. note: markg last edited this post 11 years ago.]
Content Creator and Copywriter
The best way to use a graphical button is to use CSS to style the button. Size the button, adjust borders and other directives as desired, and use your graphic (without any text) as a background image.
FormIt doesn't put any limits on the HTML that makes up your form, it only processes the POST when the form is submitted.
-
- 834 Posts
Susan,
yeh, I kinda figured that, but what I was asking is how do I actually change it in Formit?
Perhaps I'm not being clear, let me ask it another way.
Is there, or are there, files or snippets within Formit that I can change, is there a separate CSS file for Formit?
Or, if I understand you correctly, are you saying I just need to create my own style "submit" in my own stylesheet and then Formit will pick that up?
Sorry if I'm being a bit slow here,but I've tended to avoid the intricacies of forms in the past.
Content Creator and Copywriter
discuss.answer
You make your form in HTML like any HTML form. Put whatever fields you want, use whatever styling you want.
The FormIt snippet doesn't have anything to do with your actual form's initial display. All it does is provide the processing of the POST after the form gets submitted.
The FormIt placeholders in your form's fields are only there to allow FormIt to insert the previously submitted values in the case of the page being re-loaded with validation or other errors, so the user doesn't have to fill in all the rest of the fields again.
By the way, using the search word "FormIt" will get results in the forum's search, but I always use Google search anyway, with something like "MODx FormIt styling". That way you'll also get all of the many blogs and articles from other sources, like Mary's Coding Pad
http://codingpad.maryspad.com/2011/03/08/modx-revolution-for-complete-beginners-part-9-using-formit-for-contact-forms/
-
- 834 Posts
Susan,
ok baby steps here
I have a styled form which I'm trying to integrate with Formit.
I'm trying to match the fields with what's in the Formit tutorials. (Monkey see monkey do.)
My original non Formit code looks like this:
<input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">
And the Formit tute code looks like this
<input id="contact_name" name="contact_name" size="30" class="required" minlength="2" value="[[!+fi.contact_name]]" />
If I'm understanding this reight (which is highly unlikely) the only thing I need to add to the original line is
IS that correct or have I got it completely wrong?
Thanks
Content Creator and Copywriter
That is correct. Just make sure the placeholder name matches your field name (prefixed with the fi. part, of course). The same with using validators; make sure the property elements match your actual field names.
Tip:
When working with the validated fields property, be very careful to separate the fieldnames with a comma, but do not have a comma after the last fieldname!
-
- 834 Posts
OK,
I've restyled my form but I don't seem to be able to get it working.Can someone check the code to see if I've marked it up correctly?
Thanks
Never mind, got it working.
[[!FormIt?
&hooks=`spam,email,redirect,FormItAutoResponder`
&emailTpl=`MyEmailChunk`
&emailSubject=`Message from Test Form`
&emailTo=`[email protected]`
&validate=`name:required:minLength=`2`,
email:email:required,
contact_message:required`
&redirectTo=`250`
&fiarTpl=`BautoResponseTpl`
&fiarSubject=`Thank You for Contacting Us`
&fiarToField=`email`
&fiarFromName=`Make Them Click`
]]
<h2>Contact Form</h2>
<div>
<section id="formit">
<form name="formit" id="formit-form" method="post" action="[[~[[*id]]]]" />
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="name" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput" value="[[!+fi.name]]" />
<input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="2" class="txtinput" value="[[!+fi.email]]"/>
<input type="url" name="website" id="website" placeholder="Website URL" autocomplete="off" tabindex="3" class="txtinput" value="[[!+fi.website]]"/ >
<input type="tel" name="telephone" id="telephone" placeholder="Phone number" tabindex="4" class="txtinput" value="[[!+fi.telephone]]" maxlength="14" />
<textarea name="message" id="message" placeholder="How can we help you?..." tabindex="5" class="txtblock">[[!+fi.message]]</textarea>
</section>
</div>
<section id="buttons">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Let's Talk" />
<br style="clear:both;">
</section>
</form>
</section>
</div>
Content Creator and Copywriter
☆ A M B ☆