• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Form custom HTML problem!

Form custom HTML problem! 10 years 5 months ago #29535

  • denis l.
  • denis l.'s Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 19
Hi,

For starters, I'm using the latest RSForm Pro and Joomla 3.3.6.

Bare with me, I'm gonna try to be as precise and detailed as I can! :)

I'm building a form in which I use custom HTML for the form code. I'm basically using the "Pure" CSS architecture to arrange the form (see purecss.io for details) and it displays perfect.

The problem is, the sent E-mails won't display the collected form data... it simply doesn't seems to collect it. In my form settings and custom HTML, I have put all the "name" and "id" tags but I've noticed that the form collects the data form the {tag_nam:body} tag. That is the problem... if I don't put the body tag with brackets, the E-mail doesn't collect data. But if I put the body tag, I get a duplicated empty field.

First, here is my code with the body tag for the first field of the form:

<div class="pure-u-1 pure-u-md-1-3"><input class="obli formClr" name="prenom" id="prenom" type="text" placeholder="*Prénom..." />{prenom:body}{prenom:validation}{prenom:description}
			</div>

Now, with this code, it looks like this with the duplicated field:



The empty field below is the one that actually collects the data for the E-mails.
So... what I need is for it to look like the image bellow:



In order to obtain that so far, is to type the code without the body tag like this...

<div class="pure-u-1 pure-u-md-1-3"><input class="obli formClr" name="prenom" id="prenom" type="text" placeholder="*Prénom..." />{prenom:validation}{prenom:description}
			</div>

... but like this, the form does not collect the data and doesn't add it to the sent E-mails.

Sigh! I hope my explanations are clear enough! :laugh:

So, is there a way to collect the data using other form of code then the {tag_name:body} tag to obtain the look I use?

Please help me, I really need help on this on!

Thanks in advance!

Best regards,

Denis.
The administrator has disabled public write access.

Form custom HTML problem! 10 years 5 months ago #29538

  • denis l.
  • denis l.'s Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 19
Here's thought from observations that could help you guys come up with a solution for my problem...

In the E-mail templates, the tag we must use is identified with the ID of the field. For example, if I have a field that has the ID "name", we would use {name:value} to have the data displayed in the sent E-mail.

But somehow, the {name:value} seems to fetch the data from the {name:body} tag.

Wouldn't it be possible in some way to use a traditional tag like <input name="name" id="name" type="text" /> and fetch the data value from the ID or name of the said so input tag?

How could I do that?
Last Edit: 10 years 5 months ago by denis l..
The administrator has disabled public write access.

Form custom HTML problem! 10 years 5 months ago #29551

  • cosmin.cristea
  • cosmin.cristea's Avatar
  • OFFLINE
  • Platinum Boarder
  • Posts: 756
  • Thank you received: 144
Please keep in mind that RSForm!Pro generates the layout based on 4 placeholders:
  • {field_name:caption} controlling the caption or label (text or HTML that is displayed in the form)
  • {field_name:body} which controls the field's body
  • {field_name:validation} in charge of displaying the error message when the field is invalid
  • {field_name:description} controlling the description of the field.

Basically in the code below, you are creating an input manually and use the RSForm!Pro placeholders as well:
<div class="pure-u-1 pure-u-md-1-3">
	<input class="obli formClr" name="prenom" id="prenom" type="text" placeholder="*Prénom..." />
	{prenom:body}{prenom:validation}{prenom:description}
</div>

I would suggest taking a look at the following article:
http://www.rsjoomla.com/support/documentation/view-article/600-how-to-perform-layout-and-style-adjustments.html
My help is not official customer support. To receive your support, submit a ticket by clicking here
The administrator has disabled public write access.

Form custom HTML problem! 10 years 5 months ago #29553

  • denis l.
  • denis l.'s Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 19
Thanks for your answer...

So I see in the article you suggested me how I may be able to style the form to my needs but, the way its displaying is with the field and the label beside it.

Is there no way to put the "label" inside the field and when people click in the field, the label disappears? In my example, in the traditional way, I was using the placeholder tag like placeholder="Enter your name..." and that would put a "label" in the field and that way, I had no need to put a label next to the field.

Is there a way to code that for RSForm Pro to get a look like the image below?


Last Edit: 10 years 5 months ago by denis l..
The administrator has disabled public write access.

Form custom HTML problem! 10 years 5 months ago #29555

  • cosmin.cristea
  • cosmin.cristea's Avatar
  • OFFLINE
  • Platinum Boarder
  • Posts: 756
  • Thank you received: 144
The placeholder attribute can be placed by editing the field and in the "Additional Attribute" area insert placeholder="placeholder goes here".

Also, in order to remove the caption from the form layout, you will simply have to remove it from the HTML Layout (explanation on how to do this can be found in the provided article);

More information on textboxes can be found here:
www.rsjoomla.com/support/documentation/v...cle/826-textbox.html
My help is not official customer support. To receive your support, submit a ticket by clicking here
The administrator has disabled public write access.

Form custom HTML problem! 10 years 5 months ago #29556

  • denis l.
  • denis l.'s Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 19
HA! Thanks cosmin.cristea! You saved my life for the input field styling! :)

Now, just one last thing I have to ask in the same order...

In my form, I have some "upload files" buttons. With the traditional HTML I was able to style them like this...


And to be able to style the browse button, I used this code to mask the original button and style one over it since you can't really directly style that type of input...


So, do you think, by looking at my code, that it would be possible to achieve the same result by putting some code in the "Additional Attributes" area?

And if yes, can you please give me an example?

That would be my last request and would be incredibly awesome if it would work!

Thanks in advance for your help!
The administrator has disabled public write access.

Form custom HTML problem! 10 years 5 months ago #29613

  • cosmin.cristea
  • cosmin.cristea's Avatar
  • OFFLINE
  • Platinum Boarder
  • Posts: 756
  • Thank you received: 144
If you are trying to populate an input-field with the filename of the uploaded file, unfortunately it's not possible. However, if this is not the case, provide an accurate description of the scenario so I can provide some further guidance.

PS: You can insert Javascript in the CSS and Javascript section and call the functions in the Additional Attributes area of the fields.
My help is not official customer support. To receive your support, submit a ticket by clicking here
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!